javascript - HTML5 Audio Tag - Start and end at position - Stack Overflow

admin管理员组

文章数量:1345727

I have a number of <audio> tags in my code and I would like to know if there is a way that I can set each one to have a custom start and end position as they all load the same file.

This should happen without user interaction. effectively I need to deploy and <audio> tag and have something like data-start="04.22" data-end="09.45"

I have a number of <audio> tags in my code and I would like to know if there is a way that I can set each one to have a custom start and end position as they all load the same file.

This should happen without user interaction. effectively I need to deploy and <audio> tag and have something like data-start="04.22" data-end="09.45"

• javascript
• html
• html5-audio

Share Improve this question Follow edited Aug 7, 2017 at 19:34 Justin Erswell asked Aug 7, 2017 at 18:22 Justin ErswellJustin Erswell 70877 gold badges4444 silver badges9090 bronze badges 3

• Use setitmeout() to start audio with your custom time – Harpreet Singh Commented Aug 7, 2017 at 18:27
• @noobcode this isn't about delaying the start of an audio file, but playing it at a certain time. – Our_Benefactors Commented Aug 7, 2017 at 19:14
• 2 Possible duplicate of HTML 5 <audio> - Play file at certain time point – Our_Benefactors Commented Aug 7, 2017 at 19:15

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

There is a timerange parameter available in MediaElement's src attribute which does exactly this.

://url/to/media.ext#t=[starttime][,endtime]

Note that if you enable the controls on these elements, then the user will be able to seek to different positions.

Example :

var url = 'https://upload.wikimedia/wikipedia/mons/4/4b/011229beowulf_grendel.ogg';
var slice_length = 12;
var audio, start, end;
for (var i = 0; i < 10; i++) {
  start = slice_length * i; // set the start
  end = slice_length * (i + 1); // set the end
  // simply append our timerange param
  audio = new Audio(url + '#t=' + start + ',' + end);
  audio.controls = true; // beware this allows the user to change the range

  document.body.appendChild(document.createTextNode(start + 's ~ ' + end + 's'));
  document.body.appendChild(document.createElement('br'));
  document.body.appendChild(audio);
  document.body.appendChild(document.createElement('br'));
}

The following is what your looking for. I have four options from which you can choose from each with a bit less difficulty than the one before. I remend the last one based on what you needed.

The start time is in seconds and in this example it is 12 seconds. Instead of a end time you have a play time and this is in milliseconds.

    myAudio=document.getElementById('audio2');
    myAudio.addEventListener('canplaythrough', function() {
      if(this.currentTime < 72){this.currentTime = 72;}
      this.play();
      setTimeout(function(){
      document.getElementById('audio2').pause();

}, 3000); 

    });

<audio id="audio2" 
       preload="auto" 
       src="https://upload.wikimedia/wikipedia/mons/f/f0/Drum.ogg" >
    <p>Your browser does not support the audio element</p>
</audio>

If you really want to have an end time you can write a function that will take your input and subtract it from start time and convert it into millisecond. An example of that is seen below:

var startTime = 72;
var endTime = 75;
var delaySec = endTime - startTime;
var delayMillis = delaySec * 1000;
    myAudio=document.getElementById('audio2');
    myAudio.addEventListener('canplaythrough', function() {
      if(this.currentTime < startTime){this.currentTime = startTime;}
      this.play();
      setTimeout(function(){
      document.getElementById('audio2').pause();

}, delayMillis); 

    });

<audio id="audio2" 
       preload="auto" 
       src="https://upload.wikimedia/wikipedia/mons/f/f0/Drum.ogg" >
    <p>Your browser does not support the audio element</p>
</audio>

In this one you can set both the start time and end time in seconds.

Or you could do this with the start time in minutes and seconds.

var startMinute = 1;
var startSecond = 12;
var endMinute = 1;
var endSecond = 15;
var startinsec = startMinute * 60;
var startTime = startinsec + startSecond;
var endinsec = endMinute * 60;
var endTime = endinsec + endSecond;;
var delaySec = endTime - startTime;
var delayMillis = delaySec * 1000;
    myAudio=document.getElementById('audio2');
    myAudio.addEventListener('canplaythrough', function() {
      if(this.currentTime < startTime){this.currentTime = startTime;}
      this.play();
      setTimeout(function(){
      document.getElementById('audio2').pause();

}, delayMillis); 

    });

<audio id="audio2" 
       preload="auto" 
       src="https://upload.wikimedia/wikipedia/mons/f/f0/Drum.ogg" >
    <p>Your browser does not support the audio element</p>
</audio>

Here is another one which should actually be easier for you to do since you have multiple files:

audioControl('audio2', 1, 12, 1, 15);
    
function audioControl(elemID,sM, sS, eM, eS) {
var startinsec = sM * 60;
var startTime = startinsec + sS;
var endinsec = eM * 60;
var endTime = endinsec + eS;;
var delaySec = endTime - startTime;
var delayMillis = delaySec * 1000;
    myAudio=document.getElementById(elemID);
    myAudio.addEventListener('canplaythrough', function() {
      if(this.currentTime < startTime){this.currentTime = startTime;}
      this.play();
      setTimeout(function(){
      document.getElementById(elemID).pause();

}, delayMillis); 

    });
    
    }
    

<audio id="audio2" 
       preload="auto" 
       src="https://upload.wikimedia/wikipedia/mons/f/f0/Drum.ogg" >
    <p>Your browser does not support the audio element</p>
</audio>

Anytime you want to do it you just run the following:

audioControl(ElementID, StartMinute, StartSecond, EndMinute, EndSecond);

See this answer for how to play an audio file at a certain time:

HTML 5 <audio> - Play file at certain time point

本文标签： javascriptHTML5 Audio TagStart and end at positionStack Overflow