在与 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 将其可视化。超级棒!