HTML5 音频在 Chrome 中达到其持续时间之前自动停止答案

【问题标题】：HTML5 audio stopping automatically before reaching its duration in ChromeHTML5 音频在 Chrome 中达到其持续时间之前自动停止
【发布时间】：2018-07-20 13:37:44
【问题描述】：

我有一段时间正在生产一个 Angular 2 项目，我被告知最近某些功能在 Chrome 中无法正常工作。 Safari 运行良好。

经过一番调查，我意识到问题在于没有触发音频元素“结束”事件。我正在打印 currentTime / Duration 并且所有这些都会在完成的随机百分比处自动停止。例如

我完全不知道是什么突然导致了这种情况。有什么想法吗？

        let el = <HTMLMediaElement>document.getElementById(id);

        this.audio.src = <string>(<HTMLSourceElement>el.children[0].getAttribute("src"));
        this.audio.load();
        this.audio.play();


        this.audio.onended = function() {
            ...// THIS NEVER RUNS
        }
        this.audio.ontimeupdate = function() {
            console.log(this.currentTime, this.duration);

            ...// THIS DOES BUT currentTime never reaches duration
        }

更新：我目前正在使用 Chrome 最新版本 64.0.3282.140 进行测试，当我降级到版本 63 时，问题就消失了......

【问题讨论】：

不能说没有一些代码。
@Phix 编辑问题并添加代码
这是什么音频格式？长期以来（几年），这一直是 chrome 中的一个问题。我怀疑这与使用某些格式预先估计持续时间有关，如果实际持续时间较短，则忘记抛出事件。一种解决方法可能是使用 setTimeout ，但如果用户可以在某个时候暂停音频（您必须取消超时，从当前位置计算提醒等等），这将不会那么优雅。不过，任何解决方法（包括检测事件何时不再广播）都可能会给人一种骇人听闻的感觉。
@K3N 很有趣，我会对此进行调查。但是（请参阅编辑）这已经正常工作了将近一年，并且随着谷歌最新更新：64.0.3282.140 开始出现故障。我看到他们包含了一些与音频和视频相关的更改 (en.wikipedia.org/wiki/Google_Chrome_version_history)
这里有一个类似的问题：audio-playback-halts-stops-on-chrome-64 - 似乎可以通过重新编译您的 mp3 文件来解决。无论如何，这是一个 Chrome 错误，因为在旧版本和不同的浏览器中一切正常。

标签： html angular google-chrome html5-audio

【解决方案1】：

这是由 Chrome 更新中的一个错误引起的，该错误导致其音频播放器在再现“损坏的”mp3 文件时会出现这种行为。

在here 和stackoverflow thread 上进行了更深入的讨论。

修复文件的推荐方法是：

mp3val -f（对我不起作用）
用蹩脚的命令重新编码（对我有用）

根据 chromium 错误线程，它将在版本 66 中修复。

【讨论】：

您的第二个建议也对我有用。首先用ffmpeg -i something.wav something.mp3 编码，它没有达到持续时间，但用lame something.wav something.mp3 编码了。