HTML5点击类游戏快速点击按钮音频无法重复播放问题

你的问题出在同一个Audio实例在播放期间，再次调用play()不会触发新的播放——浏览器会忽略正在播放中的音频的重复play请求。下面给两种简单的解决方法：

方法1：每次点击创建新的Audio实例 #

每次点击时生成一个新的Audio对象，这样每个点击都对应独立的音频播放，不会互相干扰：

let counterDisplayElem = document.querySelector('.points');
let counterPlusElem = document.querySelector('.bigButton');
let count = 0;

updateDisplay();

counterPlusElem.addEventListener("click", () => {
    count += 1;
    updateDisplay();
    play();
});

function updateDisplay() {
    counterDisplayElem.innerHTML = "points : " + count;
};

function play() {
    // 每次点击都创建新的Audio实例
    const audio = new Audio('btnClick.mp3');
    audio.play();
}

方法2：重置现有Audio实例的播放位置 #

如果不想重复创建实例，可以在每次播放前将音频的currentTime重置为0，这样即使音频正在播放，也会从头开始播放：

const audio = new Audio('btnClick.mp3');
let counterDisplayElem = document.querySelector('.points');
let counterPlusElem = document.querySelector('.bigButton');
let count = 0;

updateDisplay();

counterPlusElem.addEventListener("click", () => {
    count += 1;
    updateDisplay();
    play();
});

function updateDisplay() {
    counterDisplayElem.innerHTML = "points : " + count;
};

function play() {
    // 重置播放位置到开头
    audio.currentTime = 0;
    audio.play();
}

这两种方法都能实现每次点击按钮都播放音频的需求，你可以根据自己的场景选择：如果音频文件很小，方法1简单直接；如果想避免重复创建对象，方法2更高效。

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