javascript audio onload

Question

I made a javascript audio test. All the function works in Opera FF and Chrome, except audio.oncanplaythrough, and audio.onended (this 2function dont work on Chrome).

<!DOCTYPE html>
<html>
<body>

<script>
var audio = new Audio("http://www.w3schools.com/html5/song.ogg");

audio.oncanplaythrough = function(){
audio.play();
}

audio.onended = function(){
alert('ended');
}

</script>
<a href="#" onclick="audio.play();">start</a><br/>
<a href="#" onclick="audio.pause();">pause</a><br/>
<a href="#" onclick="audio.volume=prompt('from 0 to 1',0.7)">volume</a><br/>
<a href="#" onclick="audio.currentTime = 3;">jump</a><br/>
</body>
</html>

This question has nothing to do with onload? Please change title accordingly. — DarkTrick
– DarkTrick, Commented Dec 23, 2021 at 10:49

Ian Devlin · Accepted Answer · 2012-08-17 09:13:11Z

21

oncanplaythrough is an event, not a method, and the other event is called ended and not onended.

So you need to listen for the events and act on them. Try:

audio.addEventListener('ended', function() { 
   alert('ended');
}, false);

and

audio.addEventListener('canplaythrough', function() { 
   audio.play();
}, false);

edited Aug 17, 2012 at 9:13

answered Nov 24, 2011 at 15:21

Ian Devlin

18.9k6 gold badges59 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Uw001 Over a year ago

:D there was a space after 'oncanplaythrough '. Now it works, thanks

Ian Devlin Over a year ago

So there was (fixed)! Sorry about that. Glad it sorted your problem though.

Eric Over a year ago

This should be canplaythrough

LPunker · Accepted Answer · 2011-11-24 12:21:53Z

3

Add and play a sound via JavaScript

var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'loading.ogg');
audioElement.play();

Get the song filepath and duration

audioElement.src;
audioElement.duration;

Load a sound

var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'Mogwai2009-04-29_acidjack_t16.ogg');
audioElement.load()
audioElement.addEventListener("load", function() {
  audioElement.play();
  $(".duration span").html(audioElement.duration);
  $(".filename span").html(audioElement.src);
}, true);

Stop a song

audioElement.pause();

Change volume

audioElement.volume=0;

Play at exactly 35 seconds in the song

audioElement.currentTime=35;
audioElement.play();

answered Nov 24, 2011 at 12:21

LPunker

6114 silver badges6 bronze badges

2 Comments

Uw001 Over a year ago

... I asked: how to use audio.oncanplaythrough, and audio.onended in Chrome

Rooster242 Apr 2 at 22:13

audio elements do not have a 'load' event.

Collectives™ on Stack Overflow

javascript audio onload

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related