兼容微信的移动端自动播放音乐方案

大多数浏览器都禁用了自动播放音乐的功能,因为这可能会带来不好的用户体验以及更多的电池消耗。因此下面的代码是无法正常工作的:

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

此外,企图使用 audio 元素的 play 方法自动播放音乐,也是被禁止的:

const src = "./music.mp3";
const audio = new Audio();
audio.src = src;
audio.preload = "auto"
audio.play();

在 Chrome 中,上面的代码会抛出一个异常:

Uncaught (in promise) DOMException

对于音乐自动播放的解决方案,主要有两大类:

  1. 使用 iframe
  2. 借助事件

第一种方案通过借助 iframe 来进行音乐的自动播放,但我没有测试效果如何,可以参考这里
借助事件的方案很简单,就是监听触摸事件,当第一次触摸发生后就播放音乐,这样就可以绕过浏览器的检测。但缺点是如果用户打开网站后一直不触摸屏幕,是不会自动播放音乐的。不过这样的例外很少,绝大多数用户打开页面后都会发生触摸动作的,是个很好的解决方案。如果要追求百分之百自动播放,不妨试试上面的 iframe 方案。

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();
    }
  })

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

但这个方案在微信中不太好用,在我的手机上测试的时候,使用微信打开页面并触摸不会自动播放音乐(IOS 12.1.2,微信版本 6.7.4),因此存在一些兼容性问题。
对于微信,可以通过 WeixinJSBridge 对象来实现这个功能,微信自带的浏览器提供了一个 WeixinJSBridge 内建对象,借助这个对象实现音乐自动播放:

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");

以上就是在移动端自动播放音乐,同时兼容微信浏览器的方案。

完。

推荐阅读更多精彩内容

  • 姓名:邓平云 深圳蔚蓝时代商业管理有限公司南京分公司 【日精进打卡第169天】 【知~学习】 《六项精进大纲 》1...
    邓平云阅读 44评论 0 0
  • 9月,是开学季 9月,是丰收节 9月10日,是一年一度的教师节 【教师节文案】 尺长教鞭,督促学生,顺利成长; 满...
    Nanana_liu阅读 290评论 0 0
  • 01 人生的轨迹,有时候同出一辙的相似,但有的人走着走着就与成功擦肩而过,但有的人走着走着就成为人生的赢家。 小时...
    红枣馒头阅读 458评论 2 6