标签: web-audio-api

我们需要将实时音频(从医疗设备)流式传输到网络浏览器,端到端延迟不超过3-5秒(假设网络延迟为200毫秒或更短).今天我们使用浏览器插件(NPAPI)来解码,过滤(高,低,带)和回放音频流(通过Web套接字传送).

我们想要替换插件.

我正在查看各种Web Audio API演示,我们所需的大部分功能(播放,增益控制,过滤)似乎都可以在Web Audio API中使用.但是,我不清楚Web Audio API是否可用于流式传输源,因为大多数Web Audio API都使用短音和/或音频剪辑.

可以使用Web Audio API播放实时流式音频吗？

更新(2015年2月11日):

经过一些研究和本地原型设计后,我不确定是否可以使用Web Audio API进行实时音频流传输.由于Web Audio API的decodeAudioData并非真正设计用于处理随机的音频数据块(在我们的例子中通过WebSockets提供).它似乎需要整个'文件'才能正确处理它.

请参阅stackoverflow:

• 如何使用node.js和socket.io通过WebSockets传输MP3数据？
• 为decodeAudioData定义'有效的mp3块'(WebAudio API)

现在可以使用createMediaElementSource将<audio>元素连接到Web Audio API,但是根据我的经验,该<audio>元素会导致大量的端到端延迟(15-30秒)并且似乎没有任何方法将延迟减少到3-5秒以下.

我认为唯一的解决方案是将WebRTC与Web Aduio API一起使用.我希望避免使用WebRTC,因为它需要对我们的服务器端实现进行重大更改.

更新(2015年2月12日)第一部分:

我还没有完全删除<audio>标签(需要完成我的原型).一旦我排除了它,我怀疑createScriptProcessor(已弃用但仍然支持)将是我们环境的一个不错的选择,因为我可以"流"(通过WebSockets)我们的ADPCM数据到浏览器,然后(在JavaScript中)将其转换为PCM.类似于Scott的库(见下文)使用createScriptProcessor.此方法不要求数据处于适当大小的"块"和关键时序,如decodeAudioData方法.

更新(2015年2月12日)第二部分:

经过更多测试后,我删除了<audio>Web Audio API接口,因为根据源类型,压缩和浏览器,端到端延迟可能是3-30秒.这留下了createScriptProcessor方法(参见下面的Scott的帖子)或WebRTC.在与我们的决策者讨论后,我们决定采用WebRTC方法.我认为它会起作用.但它需要更改我们的服务器端代码.

我要标记第一个答案,就这样'问题'就此结束了.

谢谢收听.随意添加评论.

我很高兴看到iOS 6支持Web Audio API,因为我们制作HTML5游戏.但是,我无法让iOS 6使用Web Audio API播放任何声音,其中的示例在桌面Chrome中运行良好.

这是一款带有触摸控件和通过Web Audio API播放音频的HTML5游戏(如果存在 - 如果不存在,它将回退到HTML5音频):

http://www.scirra.com/labs/sbios6b/

编辑:@Srikumar提出了一些解决方法.我在下面的版本中应用它们.它仍然无法正常工作!

http://www.scirra.com/labs/sbios6f/

桌面Chrome上的一切都很好,但iOS 6根本没有声音.我无法调试它,因为我只进行Windows开发,iOS 6用远程Web检查器取代了调试模式,这显然在Safari for Windows上不可用.使用一些警报,我确实发现它正确识别Web Audio API,使用它,检测不到Vorbis支持,因此回退到AAC音频,解码缓冲区然后播放它,并且没有错误,但我什么都没听到.当然,我尝试将音量调高到最大值:)

应该没有编解码器问题,因为iOS 6可以很好地播放AAC - 您可以浏览.m4a中的一个游戏,并且直接从Safari访问它.

在iOS 6上查看Web Audio API示例:http://chromium.googlecode.com/svn/trunk/samples/audio/samples.html - 其中一些有效,有些则无效.例如,Chrome Audio Visualizer可以正常工作,但Javascript Drone却没有.

iOS 6和桌面Chrome上的Web Audio之间必然存在一些微妙的不兼容性.我错过了什么？

我正在尝试使用Audiolet(一个综合库,http: //oampo.github.io/ )在JavaScript中实现Yamaha YM3812声音芯片(又名OPL2 http://en.wikipedia.org/wiki/YM3812)的一些功能.Audiolet/api.html)

Audiolet允许您将合成器构建为节点图(振荡器,DSP,包络发生器等).

OPL2有9个通道,每个通道有两个运算符(振荡器).通常,每个通道中的一个振荡器调制另一个振荡器的频率.为了模拟这个,我为每个频道建立了一系列节点:

Synth节点链(九个通道之一)

节点链创建和连接代码:

var FmChannel = function(audiolet) {
    this.car = new ModifiedSine(audiolet);
    this.carMult = 1;
    this.setCarrierWaveform(this.SIN);
    this.mod = new ModifiedSine(audiolet);
    this.modMult = 1;
    this.setModulatorWaveform(this.SIN);
    this.modMulAdd = new MulAdd(audiolet);
    this.carGain = new Gain(audiolet);
    this.carEnv = new ADSREnvelope(audiolet, 0, 0.1, 0.1, 0.1, 0.1,
        function() {
            this.carEnv.reset();
        }.bind(this)
    );
    this.carAtten = new Multiply(audiolet);
    this.modGain = new Gain(audiolet);
    this.modEnv = new ADSREnvelope(audiolet, 0, 0.1, 0.1, 0.1, 0.1,
        function() {
            this.modEnv.reset();
        }.bind(this)
    );
    this.modAtten = …

是否可以使用客户端JavaScript从浏览器访问麦克风(内置或辅助)？

理想情况下,它会将录制的音频存储在浏览器中.谢谢!

我使用了来自Analyzer节点的FFT数据,使用getByteFrequencyDataWeb Audio API中的方法创建了一个频谱可视化工具,如下所示:

在这个例子中,我有256个数据库.这个数字到底对应的是什么？它是每个频率成分的分贝水平.如果是这样,我怎么知道每个bin的频率值对应于什么？

我想知道所以我可以尝试构建图形方程,因此想知道在哪些点指示滤波器带.理想情况下,我想表示20Hz到20kHz的频率,并相应地绘制它们之间的间隔.

谢谢你的帮助.

我正在尝试使用Web Audio API在我的iPhone游戏上运行声音.问题是这个应用程序完全是客户端.我想将我的mp3存储在本地文件夹中(并且没有用户输入驱动),所以我不能使用XMLHttpRequest来读取数据.我正在研究使用FileSystem,但Safari不支持它.

还有其他选择吗？

编辑:感谢以下回复.不幸的是,Audio API的游戏速度非常慢.我有这个工作,延迟只是让用户体验不可接受.为了澄清,我需要的是像 -

var request = new XMLHttpRequest();
request.open('GET', 'file:///./../sounds/beep-1.mp3', true);
request.responseType = 'arraybuffer';
request.onload = function() {
    context.decodeAudioData(request.response, function(buffer) {
    dogBarkingBuffer = buffer;
}, onError);
}
request.send();

但这给了我错误 -

XMLHttpRequest无法加载file:///sounds/beep-1.mp3.仅支持HTTP的跨源请求.未捕获的错误:NETWORK_ERR:XMLHttpRequest异常101

我理解读取本地文件的安全风险,但在您自己的域中肯定应该没问题？

我找到了一些用Web Audio API进行仪器合成的库.

其中一人(Band.js)使用createOscillator(),结合振荡器型(正弦波,方波,...)看到源.

但它听起来太合成了(例如,听)我想要听起来更真实的东西,但我不想使用任何预编译的声音字体,所以它应该被合成.它也适用于移动设备.

所以我找到了另一个库(musical.js),它使用前32个谐波作为矩阵与createPeriodicWave see source结合使用.音色很棒,你可以听

正如它在源代码的注释中所写,谐波来自该钢琴样本文件.还有更多其他乐器的示例文件.我试图取代谐波,甚至整个2000年,但它听起来总是像钢琴.

还有一些值可以调整和插入谐波和ADSR值.也许他们只针对钢琴声音进行了优化？

然后我找到了另一个库(吉他合成器),它有一个非常好的吉他音色,听听它.但是这个库不使用任何createPeriodicWaveAPI.相反,它使用createScriptProcessor并getChannelData结合一些"简单"计算,但没有像其他库中的谐波那样,请参阅源代码

所以我的主要问题

可以将吉他合成器移植到使用createPeriodicWaveAPI吗？我想在musicjs中使用吉他音色.这样我就可以在钢琴音色和吉他音色之间切换.

BTW:找到了另一个合成声音乐器的库.这是演示,这里是源代码.声音也很好听,但是music.js音乐库的音色更加美妙.但它看起来也像使用像getChannelDataWAVE 一样编码的东西.它也无法在我的Android移动设备上运行.

如何编写JavaScript程序以显示音频文件中的波形？我想使用Web Audio和Canvas.

我试过这段代码:

(new window.AudioContext).decodeAudioData(audioFile, function (data) {
   var channel = data.getChannelData(0);
   for (var i = 0; i < channel; i++) {
       canvas.getContext('2d').fillRect(i, 1, 40 - channel[i], 40);
   }
});

但结果远非我想要的(即,由于我用矩形绘制,图像不平滑).我希望它看起来像这样的图像:

有关如何实现波形的任何提示？

我正在使用带有网络音频api的麦克风输入,需要获得音量值.

现在我已经让麦克风工作了:http: //updates.html5rocks.com/2012/09/Live-Web-Audio-Input-Enabled

另外,我知道有一种操纵音频文件的方法:http: //www.html5rocks.com/en/tutorials/webaudio/intro/

    // Create a gain node.
    var gainNode = context.createGain();
    // Connect the source to the gain node.
    source.connect(gainNode);
    // Connect the gain node to the destination.
    gainNode.connect(context.destination);
   // Reduce the volume.
   gainNode.gain.value = 0.5;

但是如何将这两者结合起来并获得输入音量值？我只需要价值,不需要操纵它.

有人知道吗？

我想读一个MP3流(来自icecast,读取ICY元数据,然后将二进制MP3数据传递给Web Audio Api).

Firefox有一个"moz-chunked-arraybuffer"xhr responseType来读取进度数据,但我找不到webkit/chrome的任何等价物.

编辑2014/02/03:

Chrome已开始实施xhr.responseType"stream"

"解析"登陆Chrome(带有--enable-experimental-webkit-features标志),但xhr.response结果对象(Stream)在Javascript中无法直接使用:https://code.google.com/ p /铬/问题/细节？ID = 240603

编辑2014/07/10:

该规范现已开发:https://github.com/whatwg/streams

Chromium devs计划"在不等待完成标准化的情况下做一些原型"

编辑2015/01/22:

该流API不会XHR执行(这只是为原型).它最终将在Fetch API实现中实现,该实现最近在Chrome中提供(在实验标志后面).

编辑2015/01/30:Fetch API有意图发货!Streams API被宣布为"即将推出的集成",它就在这里!

编辑2015/04/15:

\ /荣耀!Fetch API现已登陆Chrome 42(当前稳定版本:http://googlechromereleases.blogspot.fr/2015/04/stable-channel-update_14.html).42不仅是生命,宇宙和一切的答案,而且还有这个问题"如何消费"AJAX请求"像流一样":

https://github.com/GoogleChrome/samples/blob/gh-pages/fetch-api/fetch-response-stream.html

故事的结局 :)