微信内自动播放音乐(移动端)

微信内自动播放音乐(移动端)

 转载地址  地址

<audio autoplay="autoplay" id="music">
  <source src="./music.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>


function autoPlay(src) {
  const audio = new Audio();
  // 该元素用来在页面上控制音乐的播放和暂停
  const musicEle = document.querySelector("#music")
  audio.src = src;
  audio.preload = "auto"
  let played = false;

  // 第一次触摸结束后开始播放音乐
  document.addEventListener("touchend", () => {
    if (played) return;
    if (audio.paused) {
      played = true;
      audio.play();
    }
  })

  // 兼容微信
  if (window.WeixinJSBridge) {
    WeixinJSBridge.invoke("getNetworkType", {}, function (e) {
      played = true;
      audio.play();
    }, false);
  } else {
    document.addEventListener("WeixinJSBridgeReady", function () {
      WeixinJSBridge.invoke("getNetworkType", {}, function (e) {
        played = true;
        audio.play();
      });
    }, false);
  }

  // 控制音乐的播放和暂停
  musicEle.addEventListener("click", function () {
    if (audio.paused) {
      this.className = "on";
      audio.play();
    } else {
      this.className = "off"
      audio.pause();
    }
  })
}
autoPlay("./music.mp3");

猜你喜欢

转载自blog.csdn.net/qq_38880700/article/details/107754720