HTMLとJSのプレイリスト

Question

JavaScriptを使用してカスタムオーディオプレーヤーを作成していますが、プレイリストの部分を理解するのに少し問題があります。私はプレイヤーで一つの曲を演奏することができます。私は、HTMLで作成されたすべてのものを前の曲や次の曲にスキップし、特定の曲を選択するために作成されたリンクのリストを持っています。私はちょっとしたデモを見つけましたが、コードを自分のものに適用すると、プレーヤーが壊れます。最終的に私が望むのは、配列に保存されたプレイリストを読み込むモバイルデバイスと互換性のあるプレーヤー（違いが生じた場合）です。プレーヤーは、ユーザーが次のまたは前の曲を再生、一時停止、およびスキップすることを許可します。ユーザーはリストから曲を選択することも許可されなければならず、プレーヤーはそれをロードして再生する。

私はjPlayerを使いたくありません。これは厳密にゼロからカスタムです。次に何をする必要がありますか？ここに私のコードです。

基本的に私が持っていないのは、キープレイリスト要素の機能です：配列内の次と前の曲、表示されたタイトルのリストから特定の曲を選択することです。

更新されたコード（W/MANYコメント失敗した試みを）

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

あなたの次の機能はありませんのようなものになる以下？ prevは似ているはずです。

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

限り表示されたタイトルのリストから特定の曲を選択すると、あなたがクリックされたli要素のインデックスを決定することによって、これを行うことができます。 jQueryのインデックスメソッド（ここに示した）はこれをうまく処理しますが、普通のJSでも同様に処理できます。これが機能するには、明らかに、プレイリストインデックスを数値で選択する方法が必要です。

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

これはあなたが気にしていたことですか？

編集コメントに反応する...

あなたのボタンのクリックを使用して、再生ボタンを達成する方法と同様に行うことができます。

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