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

执行此操作时，您的按钮仍然有效。您可以添加一个eventlistener来检查te <audio>元素是否已播放。然后你只需设置下一个源并再次开始播放。（顺便说一句，你最好不要使用内联javacript和旧的html样式（我的意思是宽度=“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

Javascript / html音频问题

2 个答案: