在 JavaScript 中播放一段声音时如何获取回调？

Posted 2023-02-25

【中文标题】在 JavaScript 中播放一段声音时如何获取回调？

【英文标题】：How to get callback when section of sound has been played in JavaScript?

【发布时间】：2020-12-24 12:22:07

【问题描述】：

所以我开始创建一个“声音映射”，它是一个由许多声音片段组成的声音文件（在这种情况下连接了 100 个声音片段）。它们存储在单个 mp3 文件中。我想知道的是，您如何判断一个声音何时播放完毕？

基本上我所拥有的是剪辑名称到duration 和startTime 的映射。声音开始播放后，您可以轻松地执行 setTimeout(callback, duration)，但通常会出现延迟，并且浏览器 setTimeout 无法 100% 与音频播放性能保持一致。有什么办法可以让音频编码本身告诉浏览器在轨道的某些点发出事件？如果是这样，我该如何使用 ffmpeg 或其他工具对其进行编码？如果没有，怎么办？

基本上我想在完整曲目的子块完成时发出事件，这样我就可以停止播放。这样就可以创建由许多声音片段连接在一起的单个音轨，我可以跳到音轨中的不同位置。但我面临的问题是你怎么知道子剪辑何时结束播放？就像我需要音频编码本身来拥有Audio API 读取和发出的事件标记，诸如此类。

此代码正在浏览器中运行。

【问题讨论】：

如果您的代码在浏览器中运行并且应用程序使用 html5，您可以使用“结束”媒体事件：developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/…

@DeyanGeorgiev 结束的媒体活动适用于子剪辑吗？这是如何运作的？我不确定你是否遵循我的要求。我问的不是整首曲目什么时候结束，而是其中一部分结束。

这样想，就像我有一张完整的 CD 编码成一个 mp3 文件，我怎么知道每首歌什么时候结束？

developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/… - 也许这有帮助？基本上，当视频的播放位置发生变化时，它会以秒为单位发出视频的当前位置。注意：音频元素继承自 HTMLMediaElement，因此必须为音频和视频呈现事件

看看这个例子：codesandbox.io/s/admiring-grothendieck-9f27h?file=/index.html 你可以播放音频，看看控制台会打印什么。您也可以手动将音频移动到不同的秒。您可以实现逻辑并知道一首歌曲是否已结束，您可以创建一个状态数组来了解哪些歌曲已被标记为已结束，这样您就不会为这首歌曲重复结束事件

【参考方案1】：

没有音频 API 类型的东西，知道特定声音是否结束的唯一方法是分析 mp3 文件，这会产生更多延迟。我认为您最好的选择是使用 setTimeout，或者使用 Date 函数。

使用new Date()

所以我的想法是在开始时创建一个日期对象，然后添加毫秒直到部分结束。这段时间过去后，该部分已播放完毕。