javascript - AudioContext createMediaElementSource 从视频从 blob 获取数据

Question

在 javascript 中，如何将音频上下文连接到从 blob 获取其数据的视频（视频使用 MediaStream 功能）。无论我做什么，音频上下文都会返回一个空缓冲区。有什么办法可以将两者联系起来吗？

Answer 1

对于这个用例，可能createMediaElementSource不是正确的处理方式。node相反，您最好使用WebAudio API 中的createMediaStreamSource节点，以防您尝试处理音频直播流，而不是固定媒体源。

Interface的createMediaStreamSource()方法AudioContext用于创建一个新MediaStreamAudioSourceNode对象，给定一个媒体流（例如，来自一个navigator.getUserMedia实例），然后可以从中播放和操作音频。

该链接有一个更详细的示例。但是，主要区别MediaStreamAudioSourceNode在于它只能使用从媒体服务器或本地（通过）获得的MediaStreamgetUserMedia创建。以我的经验，我无法通过仅使用标签中的bloburl找到任何方法。<video>

Answer 2

虽然这是一个老问题，但我搜索了类似的东西并找到了我想分享的解决方案。

要连接 Blob，您可以使用新的 Response 实例。这是创建波形可视化器的示例。

var audioContext = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioContext.createAnalyser();
var dataArray = new Uint8Array(analyser.frequencyBinCount);
    
var arrayBuffer = await new Response(yourBlob).arrayBuffer();
var audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
var source = audioContext.createBufferSource();
source.buffer = audioBuffer;
source.connect(analyser);
source.start(0);

注意：yourBlob需要是一个 Blob 实例。

您可能会发现这个小提琴很有用，它可以录制 5 秒的视频和音频，将录制内容转换为 Blob，然后播放它，包括音频波可视化。