许多用户反馈，HTML5的audio标签在iPhone 8P及以上机型上播放音频时出现卡顿或无法播放的情况，而安卓设备和iPhone 8及以下机型则运行正常。本文提供一种有效的解决方案。
问题根源在于：在微信环境中，使用wx.ready方法内加载和播放音频，对于高版本iPhone的兼容性较差。
改进后的代码如下，有效解决了这个问题：
const doPlay = () => {
const audioPlayer = this.$refs.audioDom;
if (audioPlayer) {
audioPlayer.load();
setTimeout(() => {
audioPlayer.play();
}, 500);
}
};
doPlay(); //立即尝试播放
wx.ready(() => {
doPlay(); //微信SDK就绪后再次尝试播放
});
wx.error(res => {
doPlay(); //微信SDK出错后再次尝试播放
});
核心改进：
-
封装播放逻辑: 将音频加载和播放操作封装到
doPlay函数中，提高代码可读性和可维护性。 -
延时播放:
setTimeout函数引入500毫秒的延迟，确保音频加载完成之后再进行播放，避免因加载未完成导致的卡顿。 -
多重尝试: 在
wx.ready和wx.error事件中都调用doPlay函数，确保在各种微信SDK状态下都能尝试播放音频，增强程序的健壮性。
通过以上修改，可以有效提升audio标签在iPhone 8P及以上机型上的播放稳定性，避免卡顿问题。
