HTML and JS playlist

Question

I am creating a custom audio player with JavaScript and I have a bit of trouble figuring out part of the playlist. I can play one song on the player, and I have everything that was built in HTML to go to the previous or next song and a list of links created to select a specific song. I found a couple of sloppy demos, but when I apply the code to mine, the player crashes. In the end, I want the player to be compatible with a mobile device (if that matters) that will read the playlist stored in the array. The player will allow the user to play, pause and skip the next or previous song. The user should also be allowed to select a song from the list, and the player will download it and play.

I do not want to use jPlayer. It is strictly custom from scratch. What do I need to do next? Here is my code.

Basically, I don’t have functions for the key elements of the playlist: the next and previous song in the array and the choice of a specific song from the list of displayed titles.

UPDATED CODE (W / MANOMEEDED FAILED ATTEMPTS)

JS:

var playIt = function() { var musicPlayer= new Audio(); musicPlayer.src = "mulan.mp3"; musicPlayer.autoplay= false; var currentSong = 0; //array for song list var playlist = new Array(); playlist[0] = {src:'mulan.mp3', name:'mulan'}; playlist[1] = ('foxAndHound.mp3'); playlist[2] = ('aladdin.mp3'); /*var playlist = [ {name:"mulan", url:"mulan.mp3"}, {name:"friend", url:"foxAndHound.mp3"}, {name:"aladdin", url:"aladdin.mp3"}]; */ //plays the first song var play = document.getElementById('play'); play.addEventListener('click', function() { musicPlayer.play(); alert("song playing: " + currentSong[name]); }, false); //pause the current song var pause = document.getElementById('pause'); pause.addEventListener('click', function() { musicPlayer.pause(); }, false); //change the volume var volume = document.getElementById('volume'); volume.addEventListener('change', function() { musicPlayer.volume= parseFloat(this.value / 10); }, false); var mute = document.getElementById('mute'); if(musicPlayer.volume > 0){ mute.addEventListener('click', function(){ musicPlayer.volume= 0; alert('muted'); }); } //gets song time musicPlayer.addEventListener("timeupdate", function() { var duration = document.getElementById('duration'); var s = parseInt(musicPlayer.currentTime % 60); var m = parseInt((musicPlayer.currentTime / 60) % 60); if(s < 10){ s = '0' + s; } duration.innerHTML = m + ':' + s; }, false); //play the next song on the list when button clicked var next = document.getElementById('next'); /*next.addEventListener('click', nextSong()); musicPlayer.play(); alert("song changed");*/ //next.addEventListener('click', musicPlayer.nextSong()); next.addEventListener('click', function(){ if(currentSong < playlist.length){ playlist.length - 1; musicPlayer.currentSong++; musicPlayer.setAttribute('src', currentSong.url); musicPlayer.play(); alert('song changed'); }else if(currentSong = playlist.length){ currentSong = 0; } }, false); var previous = document.getElementById('prev'); previous.addEventListener('click', musicPlayer.prevSong(), false); function nextSongPlay(){ musicPlayer.src = playlist[currentSong]; musicPlayer.load(); musicPlayer.play(); currentSong++; alert('new song'); } /*function nextSong(){ if(currentSong < playlist.length){ currentSong++; musicPlayer.setAttrubute(playlist[currentSong]); musicPlayer.load(); alert('song changed'); }else{ currentSong=0; alert('default song'); } musicPlayer.play(); } */ /* function nextSong(){ if(currentSong < playlist.length){ currentSong++; musicPlayer.setAttrubute(playlist[currentSong]); }else{ currentSong=0; } musicPlayer.load(); musicPlayer.play(); } */ /* function nextSong(){ if(currentSong < playlist.length){ currentSong++; musicPlayer.setAttrubute('src', currentSong,url); }else{ currentSong=0; } musicPlayer.load(); musicPlayer.play(); } */ /*function prevSong(){ if(currentSong <= playlist.length){ currentSong--; musicPlayer.setAttribute('src', playlist[currentSong]); musicPlayer.load(); }else{ currentSong=0; } musicPlayer.play(); } */ 

}

HTML:

 <a href="#"><img src="images/play.png" id="play" alt=""/></a> <a href="#"><img src="images/pause.png" id="pause" alt=""/></a> <a href="#"><img src="images/prev.png" id="prev" alt=""/></a> <span id="duration"></span> <a href="#"><img src="images/ff.png" id="next" alt=""/></a> <div id="volumeBox"> Volume: <a href="#"><img src="images/mute.png" id="mute" alt=""/></a><input id="volume" type="range" min="0" max="10" value="5" /> </div> </div> </section> <section id="list"> <ul> <li><a href="#">Song 1</a></li> <li><a href="#">Song 2</a></li> <li><a href="#">Song 3</a></li> </ul> </section> </body> 

Answer 1

Wouldn't your next function look like this? The preview should be similar.

 function next() { if(currentSong<playList.length) currentSong++; else currentSong=0; musicplayer.play(); } 

Regarding the selection of a specific song from the list of displayed titles, you can do this by specifying the index of the li element that was pressed. The jQuery index method (shown) does a great job of this, but you can do it in plain old JS as well. To do this, you obviously need a method to automatically select a playlist index.

 $('ul li a').live('click', function() { var indexToPlay = $(this).parent('li').index(); musicplayer.selectIndex(indexToPlay); musicplayer.play(); }); 

Is that what you meant?

Change response to comment ...

You can click on the button in the same way as you did the play button.

 var next = document.getElementById('next'); next.addEventListener('click', musicplayer.next(), false);