HTML5 Audio playlist, кнопка воспроизведения / паузы - PullRequest
Новая
       29

HTML5 Audio playlist, кнопка воспроизведения / паузы

1 голос
/ 09 февраля 2012

Так вот мой текущий 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, если щелкнуть по другому.

Любые идеи будут с благодарностью! Спасибо!

...