给shopify网站添加一个背景音乐模块，已解决Chrome浏览器、ios safir浏览器不能自动播放的问题

给shopify网站添加一个背景音乐模块，已解决Chrome浏览器、ios safir浏览器不能自动播放的问题

1、在shopify主题代码编辑模式下，在section目录新建一个文件，命令“music.liquid”，插入以下的代码，代码如下

{%- if section.settings.link_text != blank -%}
<div class="bg-music">
  <audio id="myAudio" autoplay loop>
    <source src="{{section.settings.link_text}}" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
  </audio>
</div>
<!--<iframe src="{{section.settings.link_text}}" allow="autoplay" style="display:none" id="iframeAudio"></iframe>-->

<script>
  var music = document.getElementById('myAudio');
  var state = 0;
  document.addEventListener('touchstart', function () {
    if (state == 0) {
      music.play();
      state = 1;
    }
  }, false);
  document.addEventListener("WeixinJSBridgeReady", function () {
    music.play();
  }, false);
  //循环播放
  music.onended = function () {
    music.load();
    music.play();
  }
</script>
{%- endif -%}

{% schema %}
{

"name": "Music",
"settings": [
{
"type": "text",
"id": "link_text",
"default":"https://cdn.shopify.com/s/files/1/0623/5252/3448/files/bj.mp3",
"label": "Music url"
}
],
"presets": [
{
"name": "Music",
}
]
}
{% endschema %}

2、保存代码后，在shopify主题自定义界面，插入模块，输入 music 即可找到新建的模块。输入你想播放的音乐地址即可