如何让HTML音频控件在指定播放停止点触发事件？

当使用带时间片段的URL（如#t=0,30）时，浏览器只会在到达指定时间点暂停音频，不会触发原生的ended事件。你可以通过监听timeupdate事件检测播放进度，手动判断是否到达目标结束点，进而执行自定义逻辑。

实现步骤 #

1. 解析音频URL中的时间片段参数，提取目标结束时间。
2. 监听loadedmetadata事件，确保音频元数据（如总时长）加载完成后再进行进度检测。
3. 监听timeupdate事件，实时检查当前播放时间是否接近目标结束点。
4. 到达目标时间点时，执行业务逻辑（如更新src），并可暂停音频、移除监听避免重复触发。

完整代码示例 #

const media = document.getElementById('urlMedia');

// 监听音频元数据加载完成，确保能获取有效时长
media.addEventListener('loadedmetadata', function() {
    // 解析URL中的时间片段参数
    const timeFragment = this.src.split('#t=')[1];
    let targetEndTime = null;

    if (timeFragment) {
        const timeParts = timeFragment.split(',');
        // 提取结束时间（片段格式为start,end）
        targetEndTime = timeParts.length > 1 ? parseFloat(timeParts[1]) : null;
        
        // 防止目标结束时间超过音频实际总时长
        if (targetEndTime && targetEndTime > this.duration) {
            targetEndTime = this.duration;
        }
    }

    if (targetEndTime !== null) {
        // 定义进度检查函数
        const checkPlaybackEnd = function() {
            // 允许0.1秒误差，避免timeupdate触发间隔错过目标点
            if (this.currentTime >= targetEndTime - 0.1) {
                this.pause();
                // 替换为你的业务逻辑，比如更新音频src
                alert('片段播放结束');
                // 移除监听，避免后续重复触发
                this.removeEventListener('timeupdate', checkPlaybackEnd);
            }
        };

        // 添加timeupdate监听
        this.addEventListener('timeupdate', checkPlaybackEnd);
    }
});

// 保留原有的ended事件监听，处理无片段参数时的完整音频播放结束
media.addEventListener('ended', function() {
    alert('完整音频播放结束');
});

注意事项 #

• timeupdate事件触发频率约为每秒4-6次，设置0.1秒的误差范围可确保不会错过目标结束点。
• 若用户手动拖动进度条超过目标结束点，该逻辑也会触发，保证行为一致性。
• 当目标结束时间超过音频实际时长时，会自动切换为音频总时长，此时最终会触发原生的ended事件。

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