html5 音频播放器自动播放在 squarespace 上不起作用答案

【问题标题】：html5 audio player autoplay is not working on squarespacehtml5 音频播放器自动播放在 squarespace 上不起作用
【发布时间】：2018-06-18 05:07:07
【问题描述】：

我在 squarespace 中使用 html5 音频播放器。但它并没有开始播放自动。我添加了自动播放标签但不起作用。

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

如何创建一些js函数？

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

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您面对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>

然后您可以单击页面上的任意位置开始播放音频。

【讨论】：

【解决方案2】：

试试这个。

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

现在里面的脚本：

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

    });
</script>

【讨论】：