Run next audio in javascript

Question

Run next audio in javascript

Asked 10 years, 7 months ago

Viewed 1,037 times

0

I have a question about how to list the next audio using javascript, ie finishing a song will already be listed next. I currently have the following code:

function loadPlayer() {
    var audioPlayer = new Audio();
    audioPlayer.controls="controls";
    audioPlayer.addEventListener('ended',nextSong,false);
    audioPlayer.addEventListener('error',errorFallback,true);
    document.getElementById("player").appendChild(audioPlayer);
    nextSong();
}
function nextSong() {
    if(urls[next]!=undefined) {
        var audioPlayer = document.getElementsByTagName('audio')[0];
        if(audioPlayer!=undefined) {
            audioPlayer.src=urls[next];
            audioPlayer.load();
            audioPlayer.play();
            next++;
        } else {
            loadPlayer();
        }
    } else {
        alert('the end!');
    }
}
function errorFallback() {
        nextSong();
}
function playPause() {
    var audioPlayer = document.getElementsByTagName('audio')[0];
    if(audioPlayer!=undefined) {
        if (audioPlayer.paused) {
            audioPlayer.play();
        } else {
            audioPlayer.pause();
        }
    } else {
        loadPlayer();
    }
}
function pickSong(num) {
    next = num;
    nextSong();
}

var urls = new Array();
    urls[0] = 'audio.mp3';
    urls[1] = 'audio.mp3';
    urls[2] = 'audio.mp3';
    urls[3] = 'audio.mp3';
    urls[4] = 'audio.mp3';
    urls[5] = 'audio.mp3';   
    urls[6] = 'audio.mp3';       
var next = 0;

Is this code a mistake? Looking over the top, it looks okay.

– bfavaretto

2014/05/15 at 13:59
be a little more specific

– Otto

2014/05/15 at 14:30
@bfavaretto yes the code is ok, the point is that I would like to list the next audio, for example when finishing a song automatically would proceed to the second... is in this part where is my doubt.

– the flash

2014/05/15 at 14:37
The music file you’re playing is on urls[next]. If you want to display the name of that file somewhere, just use it. From what I understand from the code, the automatic passage to the next song is already working.

– bfavaretto

2014/05/15 at 14:44
Well, it’s not working yet, here’s the full code: http://codepen.io/flashpremium/pen/kfGAm

– the flash

2014/05/15 at 15:08

1 answer

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.

by J. Bruni • **8,142** points · Answer 1 · 2014-05-15T18:14:05+00:00

See, I cleaned up your code, and now it works smoothly: http://codepen.io/anon/pen/EAqeF

The main problem was the unnecessary redefinition of the Audioplayer variable (var audioPlayer = ...) in various different places, in a confused way.

Javascript looked like this:

var audioPlayer = document.getElementsByTagName('audio')[0];

var current = 0;

var urls = new Array();

urls[0] = 'audio.mp3';
urls[1] = 'audio.mp3';
urls[2] = 'audio.mp3';
urls[3] = 'audio.mp3';
urls[4] = 'audio.mp3';
urls[5] = 'audio.mp3';
urls[6] = 'audio.mp3';

function playSong() {
  audioPlayer.src = urls[current];
  audioPlayer.load();
  audioPlayer.play();
}

function pickSong(num) {
  current = num;
  playSong();
}

function nextSong() {
  current++;
  if (current >= urls.length) {
    current = 0;
  }
  playSong();
}

audioPlayer.addEventListener('ended', nextSong, false);
audioPlayer.addEventListener('error', nextSong, true);