Question

我有一些代码可以创建一个＆lt;音频＆gt;当我点击按钮时，元素和播放歌曲。到现在为止还挺好。

按钮从“播放音乐”变为“停止音乐”。

现在我添加了这段代码：

audioElement.addEventListener('ended', function() {
    $('span#pause').fadeOut('slow');
    $('span#play').delay(1500).fadeIn('slow');
});

当歌曲结束时，技术上应该再次显示播放按钮。但事实并非如此。有谁可以告诉我为什么？

以下是整个代码：

$(document).ready(function() {

var songList = [
    'song1.ogg',
    'song2.ogg',
    'song3.ogg'
];
var randomNumber = Math.floor(Math.random()*songList.length);

var audioElement = document.createElement('audio');
audioElement.setAttribute('src', songList[randomNumber]);
audioElement.load();

audioElement.addEventListener('ended', function() {
    $('span#pause').fadeOut('slow');
    $('span#play').delay(1500).fadeIn('slow');
});

$('#play').click(function() {
    audioElement.play();
    $('span#play').fadeOut('slow');
    $('span#pause').delay(1500).fadeIn('slow');
});

$('#pause').click(function() {
    audioElement.pause();
    $('span#pause').fadeOut('slow');
    $('span#play').delay(1500).fadeIn('slow');
});
});

Answer 1

您在评论中回答问题以开始播放下一首歌：更改src标记的audio - 属性。例如。添加一个名为“next”的新button和以下脚本：

$('#next').click(function() {
    randomNumber = (randomNumber + 1) % songList.length;
    audioElement.setAttribute('src', songList[randomNumber]);
    $('#play').click();
});

另请参阅更新后的jsfiddle。

=== UPDATE ===

首先randonNumber会递增。 modulo %（除法的剩余部分）阻止该数字高于歌曲数量。
然后audio标签的来源将设置为下一首歌。
至少有一个click event will be triggered，就像有人点击了play button一样，play click handler启动了这首歌，并更改了button的可见度。

jQuery函数audioElement结束不起作用

1 个答案: