3

所有歌曲都有一个.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);

    }

})

4

2 回答 2

4

您必须针对每个内部的音频元素.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') );
    }
});
于 2013-07-18T06:48:11.177 回答
0

只是为了清楚起见 - 你说歌曲有“歌曲”类，但你的代码说“playsong”。一个错字，也许？

第一首歌总是播放，因为你总是在播放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();
});
于 2013-07-18T06:57:45.323 回答