问题描述

在前端开发的过程中，遇到了一个音频播放异常的问题。在游戏结束时，需要播放一段结束音效，在 PC 端开发测试时均为发现异常，但是在 iOS Safari 浏览器中播放时，会出现音频不播放的问题。经过测试发现移动端其他浏览器（如 Chrome、百度等）均正常，因此可以确定是 iOS Safari 浏览器的问题。

解决过程

首先在 iPhone 的 设置 -> Safari 浏览器 -> 高级 中，将 “网络检查器” 开启，用数据线连接至 Mac。然后在 Mac 上打开 Safari 浏览器，在 Safari 浏览器中打开 开发者工具，连接手机中 Safari 浏览的网页查看是否有报错。

观察 http 请求并未报错，获取音频文件返回 206 状态码，说明请求是成功的。

之后，参考某 stackoverflow 的回答，尝试给播放器添加 muted 属性，在播放时设置为 false，发现可以播放，但播放的仅为部分音频。

在寻找原因无果后，决定参考另一个没有异常的项目。该项目使用了一个第三方音频播放库 Howler.js，参照其代码最终解决了问题。

总结

  • 同样的代码，在不同前端浏览器中可能表现不同，需要具体问题具体分析。
  • 涉及 iOS Safari 浏览器的问题时，可以连接 iPhone 至 Mac，在 Safari 浏览器中打开开发者工具，查看是否有报错。
  • 可以参考其他项目已经成功的代码，尤其是借助第三方库，很可能可以快速解决问题。