recorder
recorder copied to clipboard
2fps
播放外部的wav音频，能否得到波形的信息？
目前在代码里看到playAudio只是创建了音频进行播放，没有走其他的流程，我想请教下，可以得到正在播放的音频的波形信息吗？如果可以，应该是一个怎么样的流程呢
可以使用下实例上的getRecordAnalyseData()方法，readme上有。具体使用可以看下example文件夹下的example.ts文件中canvas绘制那部分。
我目前是自己又创建了audio context 重新走了一遍播放以及分析节点，监听script节点的process事件..回调出来的buffer再自己画波形。
为啥会到process事件上呢？
<body>
<input type="file" id="load" />
</body>
<script>
document.getElementById('load').addEventListener('change', function() {
let file = this.files[0];
this.context = new (window.AudioContext || window.webkitAudioContext)();
this.analyser = this.context.createAnalyser();
this.analyser.fftSize = 2048;
// 转arraybuffer
let oReader = new FileReader();
oReader.onload = () => {
let res = oReader.result;
this.context.decodeAudioData(res, buffer => {
this.source = this.context.createBufferSource();
// 设置数据
this.source.buffer = buffer;
this.source.connect(this.analyser);
this.analyser.connect(this.context.destination);
this.source.start();
// 假装这是在绘制，
setInterval(() => {
let dataArray = new Uint8Array(this.analyser.frequencyBinCount);
// 将数据拷贝到dataArray中。
this.analyser.getByteTimeDomainData(dataArray);
console.log(dataArray)
}, 100)
});
}
oReader.readAsArrayBuffer(file)
})
</script>
拿dataArray去绘制就行了。
我原来觉得，我这是录音插件，没有必要支持外部的音频的播放和波形显示，又想了下，如果加上录的音频播放时能波形显示的话，这个逻辑也是可以给外部文件播放使用的，额