php-单击时播放特定音轨

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

    }

})

解决方法:

您必须将每个.song中的音频元素作为目标,现在您始终将第一个作为目标.
要进行切换,请检查音频是否已暂停,并相应地进行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') );
    }
});