HTML5 音频和 Web Audio API 是死党

Eric Bidelman

媒体来源元素演示
演示

在与 WebRTC 进行 MediaStream 集成的过程中,Web Audio API 最近获得了一个称为 createMediaElementSource() 的卧底宝藏。基本上,它允许您将 HTML5 <audio> 元素作为输入来源连接到 API。简单来说,您可以直观呈现 HTML5 音频、执行实时声音突变、过滤等!

通常,Web Audio API 的工作方式是通过 XHR2、文件输入等方式加载歌曲,但您已关闭。相反,您可以通过这个钩子将 HTML5 <audio> 与 Web Audio API 的可视化、过滤器和处理能力相结合。

<audio> 集成非常适合流式传输相当长的音频资源。假设您的文件的时长为 2 小时。您并不想解码整个代码!如果您想构建用于播放/暂停/跳转的高级媒体播放器 API(和界面),但希望应用一些额外的处理/分析,这也会很有趣。

外观如下:

// Create an <audio> element dynamically.
var audio = new Audio();
audio.src = 'myfile.mp3';
audio.controls = true;
audio.autoplay = true;
document.body.appendChild(audio);

var context = new webkitAudioContext();
var analyser = context.createAnalyser();

// Wait for window.onload to fire. See crbug.com/112368
window.addEventListener('load', function(e) {
    // Our <audio> element will be the audio source.
    var source = context.createMediaElementSource(audio);
    source.connect(analyser);
    analyser.connect(context.destination);

    // ...call requestAnimationFrame() and render the analyser's output to canvas.
}, false);

如代码中所述,存在一个 bug,该 bug 要求在 window.onload 之后进行源代码设置。

下一个逻辑步骤是修复 crbub.com/112367。当这只小狗准备就绪后,您就可以使用 WebRTC(尤其是 navigator.getUserMedia() API)将音频输入(例如麦克风、混音器、吉他)通过管道传送到 <audio> 标记,然后使用 Web Audio API 将其可视化。超级棒!