页面嵌入audio元素时如何实现懒加载解决加载缓慢问题

你当前的实现是在DOM加载完成后立刻给音频元素赋值资源地址，浏览器会默认启动音频资源预加载，和页面其他核心资源抢占带宽，因此拖慢了整体页面加载速度，可通过以下方案优化：

• 按需触发音频资源加载
  不要在页面初始化阶段就设置音频地址，改为用户第一次点击播放按钮时再加载音频资源，修改后代码如下：

<div style="margin-left: 160px;">
    <audio controls id="audio">
      <source type="audio/mpeg">
    </audio>
</div>

<script type="text/javascript">
$(document).ready(function(){
    let audioLoaded = false;
    $("#audio").on('play', function() {
        if (!audioLoaded) {
            $(this).find('source').attr('src','test3.mp3');
            this.load();
            audioLoaded = true;
        }
    });
});
</script>

• 配置音频预加载策略
  给audio元素添加preload属性限制预加载内容：设置preload="metadata"仅预加载音频时长等元数据，不加载实际音频内容；如果完全不需要预加载可以设置preload="none"，从根源避免初始化阶段的音频资源请求。修改后的标签示例：
  <audio controls id="audio" preload="metadata">
• 优化音频资源体积
  当前5分钟5MB的音频还有压缩空间，可以降低MP3码率，或者切换为压缩率更高的AAC、OGG格式，在听感无明显差异的前提下可将资源体积压缩到2MB以内，进一步降低加载时的带宽占用。
• 延后音频加载时机
  如果业务需要页面加载完成后就预加载音频，可以将音频资源加载的触发时机从DOM就绪（$(document).ready）调整为页面所有核心资源加载完成后（$(window).on('load'），避免音频加载阻塞页面首屏渲染。

内容的提问来源于stack exchange，提问作者Umer Fayyaz