如何在 Web Audio API 中将 SoundManager2 定义为媒体元素源

Question

我知道网络音频 api 可以采用 <audio> 元素作为它的媒体源（用于频率数据等），但是 SoundManager2 似乎没有创建 <audio> 标签，因此我不确定我将提供什么作为源，以便使用 SoundManager2 播放声音，并将其用作使用网络音频提供可视化的源。

拆分的原因是因为 SoundManager2 有很好的文档记录，可以中继诸如加载的字节数、在音频中的特定时间安排事件以及其他尚不存在或很难找到的信息在网络音频 api 中。不过，我想避免在 SoundManager 中使用 Flash 进行可视化，并使用 Web Audop API 来处理这方面的事情。

任何帮助将不胜感激，谢谢。

Answer 1

<audio> 元素确实隐藏在 SoundManager2 中，但您可以像这样找到它：

soundManager.onready = function() {
    audioElement = soundManager.sounds[soundManager.soundIDs[0]]._a;
    webAudioSource = audioContext.createMediaElementSource(audioElement);
}

就像在@MarijnS95 的示例中一样，您需要将媒体元素源节点连接到音频上下文目标节点才能听到它。这是因为 Web Audio 劫持了元素的音频输出。但 SoundManager 仍将能够控制播放/暂停/定时功能，现在您可以使用网络音频进行可视化/处理声音。

Answer 2

我不知道这在 soundmanager2 中是如何工作的，但在纯 javascript 中它非常简单。您只需创建一个MediaElementNode 并为其分配一个audio 或video 标签。所以我的猜测是你必须将 html 对象指定给 soundmanager2。 （您可以通过在 javascript 中创建音频元素来做到这一点：player = new Audio(); 或通过将 <audio id="player"></audio> 标签添加到您的 html 并使用 document.getElementById('player'); 获取它们

基本示例：

function init() {
    player = new Audio();
    window.context = new webkitAudioContext()||AudioContext();
    audioSource = context.createMediaElementSource(player);
    audioSource.connect(context.destination);
}

Source jsfiddle with example

我希望这能让你朝着正确的方向迈出一步，在 soundmanager2 中找到如何做到这一点。