Question

所有歌曲都有一个.song课程，但它播放播放列表中的第一首歌曲。它基本上是整个播放列表的播放按钮。我已经玩了一段时间，我似乎无法做到这一点。这可能是最简单的事情。根据专辑，我有用php填充的歌曲。我希望人们能够点击某首歌并播放该歌曲。

示例：http://mixtapemonkey.com/mixtape?m=637

此外，如果你知道如何在播放和停止按钮之间切换，那么扔在那里也会很好。谢谢！

<script>

jQuery(document).ready(function(){

    i=0;

    nowPlaying = document.getElementsByClassName('playsong');
    nowPlaying[i].load();

    $('.play').on('click', function() {
        nowPlaying[i].play();
        callMeta();
    });

    $('.song').on('click', function() {
        nowPlaying[i].play();
        callMeta();
    });

    $('.pause').on('click', function() {
        nowPlaying[i].pause();
        callMeta();
    });

    $('.next').on('click', function() {
        $.each($('audio.playsong'), function(){
            this.pause();
        });
        ++i;
        nowPlaying[i].load();
        nowPlaying[i].play();
        callMeta();

    })

    function callMeta(){
        var trackTitle = $(nowPlaying[i]).attr('data-songtitle');
        $('.songtitle').html(trackTitle);

        var trackArtist = $(nowPlaying[i]).attr('data-songartist');
        $('.songartist').html(trackArtist);

    }

})

Answer 1

您必须定位每个.song内的音频元素，现在您始终以第一个为目标要切换，请检查音频是paused，还是play()或pause()：

$('.song').on('click', function() {
    var audio = $('.playsong', this).get(0);

    if (audio.paused) {
         audio.play();
    }else{
         audio.pause()
    }
    callMeta();
});

修改

有一些变化，我猜这样的东西会起作用：

jQuery(document).ready(function($){ var audios = $('.playsong'); var audio = audios.get(0); audio.load(); $('.play').on('click', function() { callMeta(audio); }); $('.song').on('click', function() { audio = $('.playsong', this).get(0); callMeta(audio); }); $('.pause').on('click', function() { audio.pause(); }); $('.next').on('click', function() { var i = audios.index(audio); audio = $(audios).get(i+1); callMeta(audio); }); function callMeta(elem){ audios.each(function(i,el) { if (!el.paused) { el.pause(); el.currentTime = 0; } }); elem.load(); elem.play(); $(elem).on('ended', function() { $('.next').trigger('click'); }); $('.songtitle').html($(elem).attr('data-songtitle')); $('.songartist').html( $(elem).attr('data-songartist') ); } });

Answer 2

为了清楚起见 - 你说这些歌曲有“歌曲”类，但你的代码却说“playong”。也许错字？

第一首歌总是播放，因为您总是播放nowPlaying[i]和i=0 - 当$('.next').on('click', function(){})被调用时，仅会发生变化！你需要一种方法来点击一首歌时改变i，或者让每个歌曲的HTML更“模块化”（我松散地使用它）。

示例HTML：

<audio id="coolSong1">
    <!-- Sources -->
</audio>
<!-- I'm not sure what you're using as play, pause, next buttons, so I'll use buttons -->
<input type="button" class="play" name="coolSong1" value="play" />
<input type="button" class="pause" name="coolSong1" value="pause" />
<input type="button" class="next" name="coolSong1" value="next" />

对应的剧本：

$(".play").click(function(event) {
    document.getElementById(event.target.name).play();
});
$(".pause").click(function(event) {
document.getElementById(event.target.name).pause();
});

单击时播放某个音轨

2 个答案: