问使用jquery和html5音频播放歌曲列表
EN

Stack Overflow用户

提问于 2017-03-03 11:30:26

回答 1查看 2.6K关注 0票数 1

我试图让html5音频播放器播放列表的歌曲，但它只播放两个头一个，并停止。

我用这个让它在结束后播放下一首歌：

$(audio).on("ended", function() {
audio.pause();
var next = $('#playlist li.active').next();
if (next.length == 0) {
    next = $('#playlist li:first-child');
}
initAudio(next);
audio.play();
showDuration();
});

找不出这里的问题是什么。

编辑

整个代码：

var audio;

$('#pause').hide();

initAudio($('#playlist li:first-child'));

function initAudio(element){
var song = element.attr('song');
var title = element.attr('songtitle');
var artist = element.attr('artist');

audio = new Audio('audio/' + song);

if(!audio.currentTime){
    $('#duration').html('0:00');
}

$('#audio-player .title').text(title);
$('#audio-player .artist').text(artist);

$('#playlist li').removeClass('active');
element.addClass('active');
}

$('#play').click(function(){
audio.play();
$('#play').hide();
$('#pause').show();
showDuration();
});

$('#pause').click(function(){
audio.pause();
$('#pause').hide();
$('#play').show();
});

$(audio).on("ended", function() {
audio.pause();
var next = $('#playlist li.active').next();
if (next.length == 0) {
    next = $('#playlist li:first-child');
}
initAudio(next);
audio.play();
showDuration();
});

HTML

<div id="audio-player">
    <button id="play"></button>
    <button id="pause"></button>
    <ul id="playlist">
        <li song="song1.wav" songtitle="Song1" artist="Artist1"></li>
        <li song="song2.wav" songtitle="Song2" artist="Artist2"></li>
        <li song="song3.wav" songtitle="Song3" artist="Artist3"></li>
        <li song="song4.wav" songtitle="Song4" artist="Artist4"></li>
    </ul>
    <div id="audio-info">
    <span class="artist"></span>&nbsp;&nbsp;<span class="title"></span>
    </div>
</div>

jquery

html

audio

html5-audio

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-03-03 11:58:28

移动此代码：

$(audio).on("ended", function() {
audio.pause();
var next = $('#playlist li.active').next();
if (next.length == 0) {
    next = $('#playlist li:first-child');
}
initAudio(next);
audio.play();
showDuration();
});

在initAudio函数中，如下所示：

function initAudio(element){
    var song = element.attr('song');
    var title = element.attr('songtitle');
    var artist = element.attr('artist');

    audio = new Audio('audio/' + song);

    if(!audio.currentTime){
        $('#duration').html('0:00');
    }

    $('#audio-player .title').text(title);
    $('#audio-player .artist').text(artist);

    $('#playlist li').removeClass('active');
    element.addClass('active');

    $(audio).on("ended", function() {
        audio.pause();
        var next = $('#playlist li.active').next();
        if (next.length == 0) {
            next = $('#playlist li:first-child');
        }
        initAudio(next);
        audio.play();
        showDuration();
    });
}

这将确保对所有audio元素(而不仅仅是第一个元素)触发audio调用。

目前，ended事件只触发一次。所以，代码播放第一首歌，触发ended事件，播放第二首，然后不再触发ended。

这是因为$(audio)指的是在执行initAudio时被销毁和重新创建的音频元素。这句话：

audio = new Audio('audio/' + song);

在调用audio时创建一个新的initAudio元素。这个新的audio元素将而不是与其附加相同的回调。

$(audio).on("ended", ...);只附加一次，如果代码创建相同类型的新元素，则不会重新附加到它们。因此，每次重新创建音频元素时，都需要重新附加事件回调，这可以在initAudio中完成。如果使用选择器，一种常见的方法是为此使用$(document).on("ended", selector, ...);，但是在您的示例中它不能工作，因为audio不是选择器。

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42586969

复制

Excel技巧：使用上方单元格的值填充空单元格

报表

有时候，工作表列中有许多空单元格，而不是在每行都重复相同的内容，这样可以使报表更容易阅读，然而也会导致一些问题，例如不方便排序或筛选数据。

fanjy

2022/04/13

3.4K0