使用<；音频>；标签和Javascript

嗨，我目前正在开发一个纯HTML5 w/Javascript编写的音频波形编辑器

我使用

取得了一些进展，获得了每个帧中的数据并将它们绘制在画布上。然而，有了MozAudio，我只能得到它现在播放的帧

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

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

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

更新：

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


1:55.10左右的垂直线表示当前播放的帧。对于行左侧的帧，我可以使用程序保存的历史帧。但是对于线右侧的帧，它们还没有播放，我无法在播放之前获得它们

一个丑陋的解决方案可能是添加另一个
标签，该标签的播放速度比原始标签快（屏幕截图中的播放速度应为1:55.90），这样我就可以将帧放在垂直线的右侧。但这很难看，也不容易实现，不是吗

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

要访问历史数据的特定部分，只需缓存以前的帧缓冲区捕获

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);
  }
}

var通道，
比率，
帧缓冲长度，
样品；
函数audioInfo（）{
var audio=document.getElementById（'audio'）；
//loadedmetadata事件后，已知以下媒体元素属性：
频道=音频.moz频道；
速率=audio.mozate；
frameBufferLength=audio.mozFrameBufferLength；
}
功能可用（事件）{
var samples=event.frameBuffer；
var-time=事件时间；
对于（变量i=0；i

增编：

好的，所以你需要你的计划来展望未来。据我所知，除非你能使用某种聪明的预加载解决方案，否则这是不可行的（尽管我怀疑这也行不通——也许订阅moz邮件列表可以让你在将来申请这项功能）

我仍然不知道你到底想做什么，但我有一个HTML5播放器，它使用绘制的波形背景，在播放过程中使用原始音频数据绘制示波器，我自己在服务器上从音频文件中提取这些数据-我不使用mozilla API，因为我希望它能在所有支持ogg的浏览器中工作，所以我加载了一个单独的数据块。这当然意味着a）它不是纯HTML5和Javascript，b）我的播放器只播放源于我的服务器的文件。在任何情况下，阶段为：

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

2） 使用原始PCM使用php_gd绘制波浪的PNG，并将其缓存（用于播放器背景）

3） 如果使用原始数据，则可以将其作为base64编码字符串加载到javascript中

如果您只是将服务器用作代理来提取原始数据，那么即使使用外部音频文件也不可能做到这一点，但是您需要注意由此带来的安全问题

如果这适用于你，那么让我知道，我会发布一些源代码。
我一整理好这个程序，它就将作为一个开源项目发布

另请注意，此活动的屏幕截图位于上面链接的页面底部
谢谢，1360050。你的回答很有帮助，但还没有解决我的问题。请参阅上面的更新，它可能更清楚地描述了我的问题。谢谢克兰西。我相信你的解决方案是有效的。我已经考虑过一些像你这样的解决方案，但是一个纯HTML5解决方案会更好地满足我的需求。也许我可以找到一些用Javascript编写的波形解码器，这可能会对我有更大的帮助。是的，你会的，但是如果你打算用Javascript来读取一个源自二进制音频文件的音频波形，那么你必须自己将二进制数据转换成更容易理解的东西。据我所知，mozilla音频数据API是唯一一个可以避免自己创建单独原始流的解决方案，正如您所说，它只知道缓冲区的状态。如果你能解决你的问题，我很想知道你的决定。