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

您需要检查单击的文件是否是播放器加载的文件。您可以通过在此 if 语句中包装轨道设置代码和 player.load 来做到这一点。

    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>');
    }
});