iphone 8p及以上机型html5音频播放卡顿的解决方案

本文针对在iPhone 8P及以上机型使用HTML5 <audio></audio> 标签播放音频时出现卡顿的问题，提供有效的解决方案。

问题描述：

在微信小程序环境中，使用以下代码播放音频，在iPhone 8P及以上机型会出现卡顿现象：

wx.ready(() => {
  const audio = this.$refs.audioDom;
  if (audio) {
    audio.load();
    audio.play();
    document.addEventListener(
      "WeixinJSBridgeReady",
      () => {
        audio.load();
        audio.play();
      },
      false
    );
  }
});

解决方案：

微信公众号文章生成技能（专业版）

name wechat-article-writer-pro description 微信公众号文章完整生成技能（专业版）。输入主题即自动完成：信息调研、文章撰写（含章节配图）、5个备选爆款标题、封面图生成、带格式排版的DOCX文档输出。触发词：写公众号文章、生成公众号内容、做微信推文、公众号文章完整版。 agent_created true 微信公众号文章完整生成技能（专业版） 概述 本技能提供微信公众号文章从主题到成品的完整生成流程，在基础版之上增加：章节配图、DOCX 格式输出（含彩色重点文字和表格

下载

立即学习“前端免费学习笔记（深入）”；

为了解决卡顿问题，建议在load()方法后添加一个短暂的延迟，再执行play()方法。改进后的代码如下：

const doPlay = () => {
  const audioPlayer = this.$refs.audioDom;
  if (audioPlayer) {
    audioPlayer.load();
    setTimeout(() => {
      audioPlayer.play();
    }, 500);
  }
};
doPlay();
wx.ready(() => {
  doPlay();
});
wx.error(res => {
  doPlay();
});

核心改进：

• 将播放逻辑封装到doPlay()函数中，提高代码可读性和可维护性。
• 使用setTimeout()函数，在audioPlayer.load()之后延迟500毫秒再执行audioPlayer.play()，为音频加载提供足够的时间。
• 在wx.ready和wx.error回调函数中都调用doPlay()函数，确保在各种情况下都能正确播放音频。

通过以上修改，可以有效解决iPhone 8P及以上机型HTML5音频播放卡顿的问题，提升用户体验。