javascript - 如何用按钮控制背景音乐？

Question

我试过两个版本

第一个自动播放可以在 Google Chrome 上运行，但我如何使用可以播放或暂停音频的按钮进行控制？

 <embed name="pop" src="pop.mp3" loop="true" hidden="true" autostart="true">

第二个自动播放无法在 Google Chrome 上运行，但我可以使用 IE 或 FireFox 中的按钮控制它

<audio id="myAudio">
<source src="pop.mp3" type="audio/mp3">
</audio>

按钮

<button onclick="playAud()" type="button">Play</button>
<button onclick="pauseAud()" type="button">Pause</button>

和 Javascript

var aud = document.getElementById("myAudio"); 

function playAud() { 
aud.play(); } 

function pauseAud() { 
aud.pause(); } 

那么我该如何处理这个问题呢？

我想要在后台自动播放音频
然后我可以使用按钮播放或暂停它

Answer 1

你只需要在初始化时触发播放函数:

var aud = document.getElementById("myAudio");

function play() {
  aud.play();
}

function pause() {
  aud.pause();
}

aud.play(); // this will do the trick :)

<audio id="myAudio">
<source src="https://wiki.selfhtml.org/local/Europahymne.mp3" type="audio/mp3">
</audio>
<button onclick="play()" type="button">Play</button>
<button onclick="pause()" type="button">Pause</button>

---

旧的解决方案:

您可以像我在这里那样删除/添加您的嵌入元素。这可能是 hacky，但它可能是适合您的解决方案。

var audiowrapper = document.getElementById('audio-wrapper');
var audio = document.getElementById('audio');

function play() {
  if (!audiowrapper.hasChildNodes()) audiowrapper.appendChild(audio);
}

function pause() {
  if (audiowrapper.hasChildNodes()) {
    while (audiowrapper.firstChild) {
      audiowrapper.removeChild(audiowrapper.firstChild);
    }
  }
}

#audio-wrapper {
  position: absolute;
  top: -300px !important;
}

<div id="audio-wrapper">
  <embed id="audio" name="pop" src="https://wiki.selfhtml.org/local/Europahymne.mp3" loop="true" hidden="true" autostart="true">
</div>
<button onclick="play();" type="button">Play</button>
<button onclick="pause();" type="button">Pause</button>