如何在点击播放音频前预加载音频解决首次点击无音效问题

开发者阿泽

2026-10-6

你遇到的前几次点击无音效的问题确实是音频延迟加载导致的：原有逻辑每次点击时才创建新的Audio实例发起资源请求，音频文件还没下载完成就调用play方法自然没有输出，直到资源被浏览器缓存后才能正常播放。

解决方案（改动最小，仅需调整JS逻辑）

将音频实例的创建提前到页面初始化阶段预加载资源，同时适配连续点击的播放需求：

var clicks = 0;
// 页面加载时就创建音频实例，提前触发资源加载
const clickAudio = new Audio('https://www.joiji.com/click.wav');
clickAudio.preload = 'auto'; // 明确要求浏览器预加载完整音频

function hello() {
    clicks += 1;
    // 重置播放进度，支持连续点击重复触发音效
    clickAudio.currentTime = 0;
    clickAudio.play();
    document.getElementById("clicks").innerHTML = clicks;
};

可选优化方案（HTML内嵌音频标签）

也可以直接在HTML中提前声明音频标签，预加载逻辑更直观：

<!-- 新增隐藏的音频标签，提前加载资源 -->
<audio id="clickAudio" src="https://www.joiji.com/click.wav" preload="auto" hidden></audio>
<font size="5">clicked  <font size="7"><a id="clicks">0</a></font> times</font><br>
<button name="cat" class="cat" type="button" onmousedown="hello()"></button>

对应调整后的JS逻辑：

var clicks = 0;
const clickAudio = document.getElementById('clickAudio');

function hello() {
    clicks += 1;
    clickAudio.currentTime = 0;
    clickAudio.play();
    document.getElementById("clicks").innerHTML = clicks;
};