CODEWITHSUNDEEP
javascripthtml5-audio
DrakoHyena
DrakoHyena

Reputation: 87

Audio onended not functioning

The audio plays when the user interacts with the window however when the audio ends it doesnt log 'audio ended'

let audio = new Audio();

window.onclick = () => {
  if (audio.paused) pickMusic().play();
};

audio.onended = () => {
  console.log("audio ended");
};

function pickMusic() {
  switch (Math.floor(Math.random() * 1)) {
    case 0:
      return (audio = new Audio("/music/gorp.mp3"));
      break;
    case 1:
      return (audio = new Audio("/music/gorp.mp3"));
      break;
  }
}
<p>Click anywhere!</p>

Upvotes: 1

Views: 1193

Answers (1)

Nick Vu
Nick Vu

Reputation: 15520

When you call new Audio(), it will override the previous audio which is already attached with onended event.

In this case, whenever you call new Audio(), you also need to initialize onended event once again

let audio = new Audio()

window.onclick = () => {
  if (audio.paused) pickMusic().play();
};

function pickMusic() {
  switch (Math.floor(Math.random() * 1)) {
    case 0:
      audio = new Audio("http://commondatastorage.googleapis.com/codeskulptor-assets/jump.ogg")
      audio.onended = () => {
        console.log("audio ended");
      };
      return audio;
    case 1:
      audio = new Audio("http://commondatastorage.googleapis.com/codeskulptor-assets/week7-brrring.m4a")
      audio.onended = () => {
        console.log("audio ended");
      };
      return audio;
  }
}
<p>Click anywhere!</p>

Upvotes: 2

Related Questions