Question

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

Answer 1

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

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

链接有一个更详细的例子。但是，此MediaStreamAudioSourceNode的主要区别在于，您可以使用从媒体服务器或本地（通过本地）获取的 MediaStream 来创建 getUserMedia）。根据我的经验，我只能使用blob标记中的<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 实例。

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

AudioContext createMediaElementSource来自视频从blob获取数据

2 个答案: