Question

所以这是我目前的html代码

<ul id="playlist" class="track-nav">
    <li><a class="collapsed">I </br> RAIN OF GOLD</a>
        <ul>
            <li onclick="changeVideo(0); playPause(0);"><a href="javascript:void(0);">PLAY</a></li>
            <li onclick="playPause(0);" style="display:none;"><a href="javascript:void(0);">PAUSE</a></li>
        </ul>
    </li>
    <li><a class="collapsed">II </br> ENTER THROUGH THE SUN</a>
        <ul>
            <li onclick="changeVideo(1); playPause(1);"><a href="javascript:void(0);">PLAY</a></li>
            <li onclick="playPause(1);" style="display:none;"><a href="javascript:void(0);">PAUSE</a></li>
        </ul>
    </li>
    <li><a class="collapsed">III </br> WHITE DOVES</a>
        <ul>
            <li onclick="changeVideo(2); playPause(2);"><a href="javascript:void(0);">PLAY</a></li>
            <li onclick="playPause(2);" style="display:none;"><a href="javascript:void(0);">PAUSE</a></li>
        </ul>
    </li>
    <li><a class="collapsed">IV </br> AGAINST THE WALL</a>
        <ul>
            <li onclick="changeVideo(3); playPause(3);"><a href="javascript:void(0);">PLAY</a></li>
            <li onclick="playPause(3);" style="display:none;"><a href="javascript:void(0);">PAUSE</a></li>
        </ul>
    </li>
    <li><a class="collapsed">V </br> BEACHES</a>
        <ul>
            <li onclick="changeVideo(4); playPause(4);"><a href="javascript:void(0);">PLAY</a></li>
            <li onclick="playPause(4);" style="display:none;"><a href="javascript:void(0);">PAUSE</a></li>
        </ul>
    </li>
    <li><a class="collapsed">VI </br> LET YOU SLEEP TONIGHT</a>
        <ul>
            <li onclick="changeVideo(5); playPause(5);"><a href="javascript:void(0);">PLAY</a></li>
            <li onclick="playPause(5);" style="display:none;"><a href="javascript:void(0);">PAUSE</a></li>
        </ul>
    </li>
    <li><a class="collapsed">VII </br> FINAL CALL</a>
        <ul>
            <li onclick="changeVideo(6); playPause(6);"><a href="javascript:void(0);">PLAY</a></li>
            <li onclick="playPause(6);" style="display:none;"><a href="javascript:void(0);">PAUSE</a></li>
        </ul>
    </li>
</ul>

连同当前播放/暂停和我的曲目阵列播放列表。

var songs = new Array();
songs[0] = 'assets/music/rain_of_gold.ogg';
songs[1] = 'assets/music/enter_through_the_sun.ogg';
songs[2] = 'assets/music/white_doves.ogg';
songs[3] = 'assets/music/against_the_wall.ogg';
songs[4] = 'assets/music/beaches.ogg';
songs[5] = 'assets/music/let_you_sleep_tonight.ogg';
songs[6] = 'assets/music/final_call.ogg'

var song = new Number();

function playPause(song){

playBoo = false;

//if its not playing than play
if (playBoo == false){
    playBoo = true;

    audioPlayer.src = songs[song];
    audioPlayer.play();

}else{

    playBoo = false;

    audioPlayer.src = songs[song];
    audioPlayer.pause();
} 

 }

我要做的是播放/暂停的div交换，但每首歌有一个。我设法让它有点工作，但我面临的问题是，如果我点击播放一首歌，它将切换暂停div但是如果我去点击另一首歌下的另一个播放按钮暂停按钮其他歌曲不会恢复播放。如果点击另一个div，我不太确定如何定位那些特定的div。

任何想法都将不胜感激！谢谢！

HTML5音频播放列表，播放/暂停按钮

0 个答案: