HTML5 Audio Tag - Start and end at position

Question

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"

Answer 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')); } 

Answer 2

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

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

Answer 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);