带有播放列表的 HTML 5 音频

Posted 2023-02-25

【中文标题】带有播放列表的 HTML 5 音频

【英文标题】：HTML 5 Audio with Playlist

【发布时间】：2014-04-28 16:38:46

【问题描述】：

我已经开始使用来自 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();

【参考方案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();


)

【参考方案2】：

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

【讨论】：

我把 init();在我的代码底部，没有任何改变。