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

尝试一下：

a2dismod shib2
systemctl restart apache2

Answer 2

您只需要在init上触发播放功能：

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>

旧解决方案：

您可以像我在这里一样删除/添加您的嵌入元素。这可能很骇人，但这可能是您的解决方案。

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>

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

2 个答案: