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