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

javascript音频加载不让它暂停

1 个答案: