HTML5 网络音频 seeTo 用于缓冲源

Question

我有一个网络应用程序(类似于卡拉 OK)，用户可以在其中通过乐器录制他的声音。 录音后用户回放录音。我在这里演奏<audio>使用网络音频 API 进行标签和语音。为了在播放/暂停时同步两个音频，我这样计算时间

pausedAt = Date.now() - startedAt;
startedAt = Date.now() - pausedAt;

这很好用。问题是当用户使用音频标签上的 slider 向前/向后移动时。我正在考虑这样的解决方案

• 使用ontimeupdate事件，停止语音，然后使用 startAt(currentTime)其中 currentTime 是音频标签中乐器演奏的时间。

由于api中没有seekTo函数，我必须停止然后再启动音频。有没有更好的解决方案？

我面临的第二个问题是在音频标签上寻找不顺畅。如果我任意点击进度条，有时它不起作用。当我在开发人员工具窗口中看到网络选项卡时，我看到了如图所示的内容。它发出约 600 个请求并下载约 86 MB 数据，而文件大小小于 10 MB。

Answer 1

您确实应该使用 Web Audio API 来执行此操作。永远不会为您提供精确的同步，并且它将依赖于流式传输来寻找 - 正如您所看到的，这将导致额外的下载。只需通过XHR 和decodeAudioData 加载歌曲，并提供您自己的播放控件即可。