Question

我已经开始使用jsfiddle链接中的脚本http://jsfiddle.net/WsXX3/33/来获取带有播放列表的HTML5音频播放器。放置/导入HTML和CSS部分没有问题。但是我发现很难让javascript运行。音频播放器仅播放放置在音频标签中的文件。当我点击播放列表中的一首歌时，它会将我带到另一个播放音频文件的页面（黑色背景）。我的问题是我导入这个脚本还是应该把它放在html文件的头部。另外，运行以下脚本的正确标签是什么（如下所示）：

var audio;
var playlist;
var tracks;
var current;

init();
function init(){
    current = 0;
    audio = $('audio');
    playlist = $('#playlist');
    tracks = playlist.find('li a');
    len = tracks.length - 1;
    audio[0].volume = .10;
    audio[0].play();
    playlist.find('a').click(function(e){
        e.preventDefault();
        link = $(this);
        current = link.parent().index();
        run(link, audio[0]);
    });
    audio[0].addEventListener('ended',function(e){
        current++;
        if(current == len){
            current = 0;
            link = playlist.find('a')[0];
        }else{
            link = playlist.find('a')[current];    
        }
        run($(link),audio[0]);
    });enter code here
}
function run(link, player){
        player.src = link.attr('href');
        par = link.parent();
        par.addClass('active').siblings().removeClass('active');
        audio[0].load();
        audio[0].play();
}

Answer 1

这似乎有用

＆＃13;

$(window).load(function(){
var audio;
var playlist;
var tracks;
var current;

init();
function init(){
    current = 0;
    audio = $('audio');
    playlist = $('#playlist');
    tracks = playlist.find('li a');
    len = tracks.length; // - 1;
    audio[0].volume = .5;
    playlist.find('a').click(function(e){
        e.preventDefault();
        link = $(this);
        current = link.parent().index();
        run(link, audio[0]);
    });
    audio[0].addEventListener('ended',function(e){
        current++;
        if(current == len){
            current = 0;
            link = playlist.find('a')[0];
        }else{
            link = playlist.find('a')[current];    
        }
        run($(link),audio[0]);
    });
}
function run(link, player){
        player.src = link.attr('href');
        par = link.parent();
        par.addClass('active').siblings().removeClass('active');
        audio[0].load();
        audio[0].play();
}

})

＆＃13;

Answer 2

放入init（）;在代码的底部。您在创建函数之前调用init。

带播放列表的HTML 5音频

2 个答案: