HTML5 Audio Tag - Start and end at position

问题

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"

回答1:

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.org/wikipedia/commons/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'));
}

回答2:

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

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

回答3:

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 recommend 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.org/wikipedia/commons/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.org/wikipedia/commons/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.org/wikipedia/commons/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.org/wikipedia/commons/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);

来源：https://stackoverflow.com/questions/45553396/html5-audio-tag-start-and-end-at-position

标签

javascript

html

html5-audio