HTML5 音频和 Web Audio API 是死党

媒体来源元素演示
演示

作为与 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，要求源代码设置在 window.onload 之后进行。

下一步是修复 crbub.com/112367。完成这些准备工作后，您就可以将 WebRTC（尤其是 navigator.getUserMedia() API）连接起来，将音频输入（例如麦克风、调音台、吉他）管道化到 <audio> 标记，然后使用 Web Audio API 对其进行可视化。大爆炸！