Javascript/html 音频问题

Question

我的代码有一些问题。首先，我希望在我正在播放的歌曲结束后播放一首歌曲（带有音频标签）。

<audio id="batmansong1">
  <source src="Songs/nanananabatman.m4a">
</audio>
<button id="play" onclick="document.getElementById('batmansong1').play()"><img src="Buttons/play.jpg" height="40" width="40"></button>
<button id="pause" onclick="document.getElementById('batmansong1').pause()"><img src="Buttons/pause.jpg" height="40" width="40"></button>

如您所见，按钮将播放或暂停第一个音频剪辑。但是，我希望他们在第二个音频剪辑开始播放时也暂停并播放它。

Answer 1

执行此操作时，您的按钮仍然可以使用。您可以添加一个事件监听器来检查 te <audio> 元素是否结束播放。然后您只需设置下一个源并重新开始播放。 （顺便说一句，你最好不要使用内联 javacript 和旧的 html 样式（我的意思是 width="40" 之类，只使用 CSS））

以下所有代码都在this jsfiddle

JS：

player = document.getElementById('batmansong1');
player.addEventListener('ended', function () {
    if (player.src == 'link/to/your/next/file.m4a') return; //check if we have already set the new src, as this function is called EVERY TIME your audio file ends.
    player.src = 'link/to/your/next/file.m4a';
    player.play();
});

document.getElementById('pause').addEventListener('click', function () {
    document.getElementById('batmansong1').pause();
});
document.getElementById('play').addEventListener('click', function () {
    document.getElementById('batmansong1').play();
});

HTML：

<audio id="batmansong1" src="Songs/nanananabatman.m4a"></audio>
<button id="play">
    <img src="Buttons/play.jpg" />
</button>
<button id="pause">
    <img src="Buttons/pause.jpg" />
</button>

CSS：

img {
    width:40px;
    height:40px;
}

如果您想了解其他任何信息，请随时提问！

Answer 2

//It should work for html 5 surpport browsers

function htmlfiveMedia(){
    document.getElementById('player').play();
}


//in your html
<audio id="player" src="../jizadmin/sounds/new_message.wav"></audio>


OR

IF THE BROWSER DOES NOT SUPPORT AUDIO TAG TRY THIS BELOW

//This function is going to play sound
function explorerMedia()
{
    $('embed').remove();

    $("<embed src='../jizadmin/sounds/new_message.wav' autostart='true' hidden='true' height='1' width='1'>").insertAfter('hr');
}



//add an <hr> below your page

Hope this would help