微信网页中自动播放音乐相关问题

Posted 2021-02-18 minghost

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信网页中自动播放音乐相关问题相关的知识，希望对你有一定的参考价值。

到目前为止，想在网页中自动播放音乐已经被chrome禁止，但是在微信网页中可以在 wx.ready() 中调用 document.querySelect(‘audio‘).play()达到自动播放音频的效果。

下面贴出代码，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>解决背景音乐无法播放问题</title>
    //必须在audio 标签之前加载 最好还是 本地文件 不然会出现部分微信客户端（黑鲨3pro joyui 20.02.36 ,微信版本：7.14） 音乐不自动播放情况（如有大神知晓原因，可以告知我，谢谢）
    <script src="./wx-sdk-1.6.js"></script>
   
  </head>
  <body>
    <audio id="audio"src="./song.mp3" preload loop></audio>
    <script>
        wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
        appId: 1, // 必填，公众号的唯一标识
        timestamp: 2, // 必填，生成签名的时间戳
        nonceStr: 3, // 必填，生成签名的随机串
        signature: 4, // 必填，签名，见附录1
        jsApiList: [
          ‘onMenuShareTimeline‘, //分享朋友圈接口
          ‘onMenuShareAppMessage‘, //分享给朋友接口
        ], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      })
      wx.ready(() => {
        document.querySelector(‘#audio‘).play()
      })
    </script>
  </body>
</html>

//必须在audio 标签之前加载 最好还是 本地文件 不然会出现部分微信客户端（黑鲨3pro joyui 20.02.36 ,微信版本：7.14） 音乐不自动播放情况（如有大神知晓原因，可以告知我，谢谢）

此方法参考了 https://gist.github.com/ufologist/7c14837db642a6e916ce

以上是关于微信网页中自动播放音乐相关问题的主要内容，如果未能解决你的问题，请参考以下文章