I need to call a script and specify 3 parameters, audio file ID, audio start time, audio end time (optional).
With zero prior JS knowledge, I'm unable to get this script I stitched together to work flawlessly. The main bug now is that if EventListener is active and a segment is still playing, and the user clicks on another segment, it should cancel the active EventListener and assign a new one if end time is specified.
Any help would be great.
With zero prior JS knowledge, I'm unable to get this script I stitched together to work flawlessly. The main bug now is that if EventListener is active and a segment is still playing, and the user clicks on another segment, it should cancel the active EventListener and assign a new one if end time is specified.
Any help would be great.
HTML:
<!DOCTYPE html>
<script>
function audio_play(fileID, sTime, eTime){
var audio = document.getElementById(fileID);
var segmentEnd;
audio.pause();
audio.currentTime = 0;
audio.addEventListener('timeupdate', function (){
if (segmentEnd && (audio.currentTime >= segmentEnd)) {
audio.pause();
segmentEnd = 0;
audio.currentTime = 0;
}
console.log(audio.currentTime);
}, false);
audio.currentTime = sTime;
segmentEnd = eTime;
audio.play();
}
</script>
<body>
<html lang="en">
<audio id="id1" src="1.mp3" controls preload></audio>
<audio id="id2" src="2.mp3" controls preload></audio>
<p><a href="javascript:audio_play('id1', 15, 20);">File 1 / Segment (15-20)</a></p>
<p><a href="javascript:audio_play('id1', 60, 65);">File 1 / Segment (60-65)</a></p>
<p><a href="javascript:audio_play('id1', 20);">File 1 / Segment (20 ...)</a></p>
<br>
<p><a href="javascript:audio_play('id2', 20);">File 2 / Segment (15-20)</a></p>
<p><a href="javascript:audio_play('id2', 20);">File 2 / Segment (30-35)</a></p>
<p><a href="javascript:audio_play('id2', 20);">File 2 / Segment (40 ...)</a></p>
</body>
</html>
