使用的音频数据预处理标签和 JavaScript

Question

您好，我目前正在开发一个用纯 HTML5 和 Javascript 编写的音频波形编辑器。

我使用 Mozilla

作为波形编辑器，我的程序必须在当前播放之前查找并预处理大约几秒钟的数据，即播放 00:05:00 时，我的程序可能应该显示从 00:04:50 到 00:05 的波形:10，所以我必须在播放之前对 00:05:00 和 00:05:10 之间的数据进行预处理。

我在网上搜索了解决方案（不限于Mozilla的方法，Chrome或Opera的方法也可以接受），但没有得到答案。 preload 属性和 onprogress 事件没有帮助。现在我正在尝试制作另一个 标签，它播放与原始标签相同的音乐，但速度要快几秒钟，以便提前获取数据。然而，正如您所看到的，该解决方案非常脏。

我想知道 HTML5 小组是否正在研究一些更灵活的方法来处理多媒体对象，或者是否有一些浏览器开发团队正在研究这个。如果您对此主题有任何想法或经验，请给我一些指示。谢谢。

更新：

也许我没有清楚地描述我的问题。下面是从 Audacity 拍摄的一张照片，它可以证明我的目标。

大约 1:55.10 处的垂直线表示当前正在播放的帧。对于该行左侧的帧，我可以使用我的程序保存的历史帧。但是对于该行右侧尚未播放的帧，我无法在播放之前获取它们。

一个丑陋的解决方案可能是添加另一个 标签，它的播放速度比原始标签快（应该在屏幕截图中播放 1:55.90），以便我可以将帧放在垂线。但这很丑陋，而且不容易实现，不是吗？

Answer 1

来自 https://wiki.mozilla.org/Audio_Data_API

您要查找的数据位于帧缓冲区中传递给侦听器函数的事件对象的属性

要访问历史数据的特定部分，只需缓存自己捕获的先前帧缓冲区即可。

var channels,
    rate,
    frameBufferLength,
    samples;

function audioInfo() {
  var audio = document.getElementById('audio');

  // After loadedmetadata event, following media element attributes are known:
  channels          = audio.mozChannels;
  rate              = audio.mozSampleRate;
  frameBufferLength = audio.mozFrameBufferLength;
}

function audioAvailable(event) {
  var samples = event.frameBuffer;
  var time    = event.time;

  for (var i = 0; i < frameBufferLength; i++) {
    // Do something with the audio data as it is played.
    processSample(samples[i], channels, rate);
  }
}

附录：

好的，所以您需要您的程序展望未来。据我所知，除非您可以使用某种巧妙的预加载解决方案，否则这是不可行的（尽管我怀疑这也行不通 - 也许订阅 moz 邮件列表可以让您请求将此作为未来的功能） ）。

我仍然不知道你到底想做什么，但我有一个 HTML5 播放器，它使用绘制的波形背景，并在播放期间使用我自己从服务器上的音频文件中提取的原始音频数据绘制示波器- 我不使用 mozilla API，因为我希望它能够在所有支持 ogg 的浏览器中工作，因此我完全加载一个单独的数据 blob。这当然意味着 a) 它不是纯 HTML5 和 Javascript，b) 我的播放器仅播放源自我的服务器的文件。无论如何，这些阶段是：

1）使用命令行实用程序（我推荐 sox）来提取 RAW 数据 - 我将其混合为单声道、8 位 1khz PCM，它相对较小，但分辨率足够高，可以使用（ 1kb/秒）。如果您想保留它（在非 Mozilla 浏览器中播放时绘制示波器），请将其作为 Blob 缓存在数据库中。

2) 使用 RAW PCM 使用 php_gd 绘制波浪的 PNG，并缓存它（用于您的播放器背景）

3) 如果使用 RAW 数据，那么您可以将其作为 base64 编码的字符串加载到 javascript 中

这并非不可能如果您仅使用服务器作为提取原始数据的代理，即使使用外部音频文件，您也可以执行此操作，但随后您将需要注意由此引入的安全问题。

如果这适用于您，请告诉我，我将发布一些源代码。
一旦我整理完毕，该程序将作为开源项目发布在 http://jukenix.org有点。

PS 实际操作的屏幕截图位于上面链接的页面底部