AudioContext从blob获取数据的视频创建MediaElementSource

AudioContext createMediaElementSource from video fetching data from blob

本文关键字：的视频 创建 MediaElementSource 数据 获取 blob AudioContext      更新时间：2023-09-26

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

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

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

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

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

若要连接Blob，可以使用新的响应实例。下面是一个创建波形可视化工具的示例。

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，然后播放，包括音频波形可视化。

相关文章：