JavaScript新手求助：如何为可重置计时器添加.mp3音频播放功能？

1. 全局创建音频实例 #

先在代码开头声明全局的音频对象，复用它来避免重复加载音频文件：

const alarmAudio = new Audio('alarm.mp3');

确保alarm.mp3和你的HTML文件在同一目录，或者填写正确的相对路径（比如./audio/alarm.mp3）。

2. 修复计时器重复运行的bug #

原代码每次调用startTimer都会新建一个setInterval，导致多个计时器同时跑，倒计时会混乱。新增变量保存计时器ID，启动前清除旧计时器：

let timerInterval; // 保存计时器ID，用于后续清除

3. 倒计时结束时播放音频 #

在timer函数里判断倒计时是否结束，触发音频播放：

function startTimer(duration) {
    if (timerInterval) clearInterval(timerInterval); // 清除旧计时器
    start = Date.now();

    function timer() {
        diff = duration - (((Date.now() - start) / 1000) | 0);

        // 倒计时结束逻辑
        if (diff <= 0) {
            display.textContent = "00:00";
            alarmAudio.play(); // 播放警报
            return; // 停止后续计时
        }

        minutes = (diff / 60) | 0;
        seconds = (diff % 60) | 0;

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        
        display.textContent = minutes + ":" + seconds;
    };
    timer();
    timerInterval = setInterval(timer, 1000); // 保存新计时器ID
}

4. 重置计时器时停止音频 #

在resetTimer里添加暂停并重置音频的逻辑，避免重置后警报继续响：

function resetTimer(){
    if (timerStarted) {
        alarmAudio.pause();
        alarmAudio.currentTime = 0; // 把音频进度拉回开头
        startTimer(fiveMinutes);
    }
}

5. 绑定鼠标/键盘重置事件 #

在window.onload里添加事件监听，实现鼠标移动或按键时重置倒计时：

window.onload = function () {
    display = document.querySelector('#time');
    // 监听鼠标移动
    document.addEventListener('mousemove', resetTimer);
    // 监听键盘按键
    document.addEventListener('keydown', resetTimer);
}

完整修改后的代码 #

const fiveMinutes = 5;
const alarmAudio = new Audio('alarm.mp3');
var start, diff, minutes, seconds;
var display;
var timerStarted = false;
var resetCtr = 0;  
var debugMsg;
const debug = true;
let timerInterval;


function startTimer(duration) {
    if (timerInterval) clearInterval(timerInterval);
    start = Date.now();

    function timer() {
        diff = duration - (((Date.now() - start) / 1000) | 0);

        if (diff <= 0) {
            display.textContent = "00:00";
            alarmAudio.play();
            return;
        }

        minutes = (diff / 60) | 0;
        seconds = (diff % 60) | 0;

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        
        display.textContent = minutes + ":" + seconds;
    };
    timer();
    timerInterval = setInterval(timer, 1000);
}

function btnStartTimer() {
    if (!timerStarted) {
        timerStarted = true;
        startTimer(fiveMinutes);
    }
}

function resetTimer(){
    if (timerStarted) {
        alarmAudio.pause();
        alarmAudio.currentTime = 0;
        startTimer(fiveMinutes);
    }
}


window.onload = function () {
    display = document.querySelector('#time');
    document.addEventListener('mousemove', resetTimer);
    document.addEventListener('keydown', resetTimer);
}

注意事项 #

• 浏览器会限制无用户交互的自动音频播放，你的btnStartTimer点击事件已经满足用户交互要求，不会触发播放限制。

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