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