AudioContext createMediaElementSource 从视频从 blob 中获取数据答案

【问题标题】：AudioContext createMediaElementSource from video fetching data from blobAudioContext createMediaElementSource 从视频从 blob 中获取数据
【发布时间】：2016-05-08 10:55:20
【问题描述】：

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

【问题讨论】：

长期面临同样的问题。您是否设法找到解决方案？这对我有很大帮助。
不，我最终是通过服务器完成的

标签： javascript html audiocontext

【解决方案1】：

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

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

该链接有一个更详细的示例。然而，这个MediaStreamAudioSourceNode 的主要区别在于它可以仅使用您从媒体服务器或本地（通过getUserMedia）获得的MediaStream 创建.以我的经验，我无法通过仅使用来自 <video> 标签的 blob 网址找到任何方法。

【讨论】：

【解决方案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 实例。

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

【讨论】：