CODEWITHSUNDEEP
javascripthtmlaudiohtml5-audio
Dman61
Dman61

Reputation: 31

redirecting to a new page when an html 5 audio file has finished playing

I am playing an audiobook chapter with the text and want it to automatically redirect to a new page with the next chapter text and audio when the html5 audio file finishes.

I am not a programmer so I could use some help.

I know I need to use the addEventListener with the ended function similiar to what is below but I do not know how to modify this to call a new page instead of a new audio file.

<audio id="audio" autoplay controls src="song1.mp3" type="audio/mpeg"></audio>
<script type="text/javascript">
    document.getElementById('audio').addEventListener("ended",function() {
    this.src = "song2.mp3?nocache="+new Date().getTime();
    this.play();
    });
</script>

Upvotes: 3

Views: 2054

Answers (2)

Miguel
Miguel

Reputation: 20633

Use the ended event and redirect:

http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#event-media-ended

function redirectHandler() {
  window.location = 'http://example.com';
}

audio.addEventListener('ended', redirectHandler, false);

Demo: http://jsfiddle.net/tqam3zyf/2/

Upvotes: 2

Lo&#239;c Poullain
Lo&#239;c Poullain

Reputation: 82

When you use 

this.src = "song2.mp3?nocache="+new Date().getTime();
this.play();

you set the current source of the audio element.

If you want to load a new page instead of your current page you can use :

window.location = "your_url";

Upvotes: 0

Related Questions