如何用JS播放器在HTML页面中让音频固定播放3次后停止？

嘿，我来帮你搞定这个问题——原生HTML5 Audio元素根本没有playthroughs这个属性，所以你之前的设置完全不会生效。要实现播放3次就停止的需求，咱们得通过监听音频的ended事件来手动控制播放次数，具体方案如下：

核心思路 #

• 移除loop = true的设置，放弃原生无限循环，改用手动计数控制
• 添加计数器变量，记录已完成的播放次数
• 监听音频的ended事件，每次播放结束后更新计数，达到3次则停止，否则重新触发播放

修改后的完整代码 #

var popupAudioPlayer = document.getElementById('popup_sound');
// 初始化播放计数器和目标次数
var playCount = 0;
const MAX_PLAYS = 3;

scene.on("enter", function (event) {
    // 进入场景时重置状态：计数器归零，音频回到起始位置
    playCount = 0;
    popupAudioPlayer.currentTime = 0;
    // 启动第一次播放
    popupAudioPlayer.play();
});

// 监听音频播放结束事件
popupAudioPlayer.addEventListener('ended', function() {
    playCount++;
    if (playCount < MAX_PLAYS) {
        // 未达到目标次数，重置音频位置并继续播放
        popupAudioPlayer.currentTime = 0;
        popupAudioPlayer.play();
    } else {
        // 播放满3次，重置计数器以便下次进入场景复用
        playCount = 0;
    }
});

额外优化建议 #

如果存在场景切换、用户手动暂停等情况，建议添加状态清理逻辑，避免内存泄漏或异常播放：

// 离开场景时停止音频并重置状态
scene.on("leave", function(event) {
    popupAudioPlayer.pause();
    popupAudioPlayer.currentTime = 0;
    playCount = 0;
});

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