Звуковая загрузка javascript, не позволяющая сделать паузу

Question

Я создаю список музыки, и у каждой музыки есть кнопка воспроизведения. Поэтому при нажатии кнопки воспроизведения кнопка превращается в кнопку паузы.

Поэтому, когда вы играете музыку, я хочу иметь возможность перейти вниз по списку и щелкнуть по другой песне с остановкой текущей песни и той, которую я щелкнул, чтобы начать.

В данный момент я могу пойти по списку и воспроизвести песню, но это не позволяет мне остановиться. Когда я нажимаю паузу, он просто начинает песню снова.

вот мой код

window.player = document.getElementById('player');
    $('ul.tracks li span.play').click(function(){

        $('ul.tracks li span.play').find('i').removeClass().addClass('fi-play');

        var trackid = $(this).attr('id');
        var track;

        if(trackid == 'play1'){
            track = 'img/music.mp3';
        } else if(trackid == 'play2'){
            track = 'img/music2.mp3';
        } else {
            track = 'img/music3.mp3';
        }

        $('#player_track').attr('src', track);
        player.load();

        if (player.paused) {
            player.play();
            $(this).html('<i class="fi-pause"></i>');
        } else {
            player.pause();
            player.empty();
            $(this).html('<i class="fi-play"></i>');
        }
    });

А вот и HTML

   <audio id="player">
                      <source id="player_track" src="img/music.mp3" />
                  </audio>
                    <ul class="tracks">
                      <li>
                        <div class="row">
                          <div class="large-8 columns">1. No Church in the Wild (feat. Frank Ocean)</div>
                          <div class="large-2 columns"><span class="play" id="play1"><i class="fi-play"></i></span></div>
                        </div>
                        <li>
                        <div class="row">
                          <div class="large-8 columns">2. Lift Off (feat. Beyonce)</div>
                          <div class="large-2 columns"><span class="play" id="play2"><i class="fi-play"></i></span></div>
                        </div>
                      </li>
                      <li>
                        <div class="row">
                          <div class="large-8 columns">3. Niggas in Paris</div>
                          <div class="large-2 columns"><span class="play" id="play3"><i class="fi-play"></i></span></div>
                        </div>
                      </li>
    </ul>

Но когда я перемещаю player.load() в оператор if, я могу приостановить его, но когда я нажимаю на другую песню во время ее воспроизведения, она просто останавливается. Так что я делаю не так?

Answer 1

Вы должны проверить, является ли файл, по которому щелкнул файл, загруженным проигрывателем. Вы можете сделать это, обернув код установки дорожки и player.load в этом операторе if.

    if ($('#player_track').attr('src') !== track){
        $('#player_track').attr('src', track);
        player.load();    
    }

Весь код:

window.player = document.getElementById('player');
$('ul.tracks li span.play').click(function(){

    $('ul.tracks li span.play').find('i').removeClass().addClass('fi-play');

    var trackid = $(this).attr('id');
    var track;

    if(trackid == 'play1'){
        track = 'img/music.mp3';
    } else if(trackid == 'play2'){
        track = 'img/music2.mp3';
    } else {
        track = 'img/music3.mp3';
    }


    if ($('#player_track').attr('src') !== track){
        $('#player_track').attr('src', track);
        player.load();    
    }


    if (player.paused) {
        player.play();
        $(this).html('<i class="fi-pause"></i>');
    } else {
        player.pause();
        player.empty();
        $(this).html('<i class="fi-play"></i>');
    }
});