Javascript/html 音频问题

Posted 2023-02-25

【中文标题】Javascript/html 音频问题

【英文标题】：Javascript/html audio problems

【发布时间】：2014-02-12 16:48:45

【问题描述】：

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

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

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

【问题讨论】：

你试过什么？您当前拥有的代码只会在单击按钮时播放歌曲一次。

我粘贴的代码可以帮助你播放声音。请更清楚您的问题。

html5 audio playlist - how to play a second audio file after the first has ended?的可能重复

我尝试过使用 Jquery 并添加 $("#play").click(function() $("body").append(""); ) 但是，第二个文件没有声音。

【参考方案1】：

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

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

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

【讨论】：

我没有使用嵌入，我使用的是 和

好的，抱歉。只需将其添加到此处，以防您使用旧式浏览器