Question

我正在使用方形空间中的html5音频播放器。但它没有开始播放汽车。我添加了自动播放标签，但没有工作。

我正在寻找一些javaescript函数来触发页面加载时的播放按钮。

如何创建一些js函数？

<audio controls loop autoplay>
  <source src="horse.mp3" type="audio/mpeg">
</audio>

Answer 1

试试这个。

<div id="music"></div>

现在内幕脚本：

<script>
    $(document).ready(function() {
        $('#music').innerHTML = '<audio controls loop autoplay> <source src = "horse.mp3" type = "audio/mpeg"></audio>'

    });
</script>

Answer 2

您面对browser limitation以防止自动播放声音的嘈杂标签。

如果您打开此Codepen并检查控制台输出。你会发现有关不允许的原因的所有细节。

Chrome和现代浏览器会在启动任何媒体之前等待首次用户互动。

因此，您可以创建全屏叠加，并在点击它时启动音频。

(function(){  
  var audio2 = document.querySelector('.muted');

 

// WHen you click on overlay  
  document.querySelector('.activate').addEventListener('click',function(){
    audio2.muted = false; // Unmute
    audio2.play(); // Play 
    document.querySelector('.activate').style.display = 'none'; //hide overlay
  },true);
})();

.fullscreen {
  position : fixed;
  left : 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}

<p>Second player : will start as muted </p>
<audio class='muted' controls loop autoplay muted src="http://marc.ucla.edu/mpeg/01_Breathing_Meditation.mp3"></audio>

<div class="fullscreen activate">
  
</div>

然后，您可以点击页面上的任意位置以启动音频。

html5音频播放器自动播放不适用于squarespace

2 个答案: