带有播放列表的 HTML 5 音频

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

这似乎有效

$(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();
}

})

Answer 2

把 init();在代码的底部。您在创建函数之前调用 init。