javascript - HTML Web Audio API - 左右声道的音频可视化
问题描述
我是 Web 音频 API 的新手。我需要可视化播放音频的左右声道信号强度,如下图所示。
evt.inputBuffer.getChannelData(0) 将返回整个通道信息,我将如何获取左右通道数据,我应该在哪里更改我的代码?请帮忙。
这是我的代码:
<style>
#meter1, #meter2 {
width: 0%;
height: 15px;
margin: 2px 0;
background: green;
}
</style>
<div style="width: 250px;">
<div id="meter1"></div>
</div>
<div style="width: 250px;">
<div id="meter2"></div>
</div>
<script>
// Create the audio context - AudioContext is a little container where all our sound will live.
//It provides access to the Web Audio API, which in turn gives us access to some very powerful functions.
// Browser support
window.AudioContext = window.AudioContext || window.webkitAudioContext;
// Initialize audio context
var audioContext = new AudioContext();
var soundUrl = "sample.mp3";
var soundBuffer;
var audio = new Audio(soundUrl);
var processor = audioContext.createScriptProcessor(2048, 1, 1), meter1 = document.getElementById('meter1'), meter2 = document.getElementById('meter2'), source, splitter;
audio.crossOrigin = 'anonymous'
audio.addEventListener('canplaythrough', function(){
//create a new MediaElementAudioSourceNode object, given an existing HTML <audio> or <video> element, the audio from which can then be played and manipulated.
source = audioContext.createMediaElementSource(audio)
splitter = audioContext.createChannelSplitter(2);
source.connect(splitter);
source.connect(processor)
source.connect(audioContext.destination)
processor.connect(audioContext.destination)
audio.play()
console.log(source);
}, false);
// loop through PCM data and calculate average
// volume for a given 2048 sample buffer
processor.onaudioprocess = function(evt){
//console.log(evt.inputBuffer);
var input = evt.inputBuffer.getChannelData(0)
, len = input.length
, total = i = 0
, rms
while ( i < len ) total += Math.abs( input[i++] )
rms = Math.sqrt( total / len )
meter1.style.width = ( rms * 100 ) + '%'
}
</script>
解决方案
用于createScriptProcessor(2048, 2, 2)
有两个输入通道和两个输出通道。然后,在 内onaudioprocess
,第二个输入通道数据将在 内evt.inputBuffer.getChannelData(1)
。
注意:
- 创建后
audioContext
,您可能想要存储(或检查)inChannels = audioContext.destination.channelCount
和outChannels = audioContext.destination.channelCount
- 值 2048
processor.bufferSize
有利于数据可视化,但考虑到 16384 对音频质量更好
推荐阅读
- django - Django:validate_date() 缺少 1 个必需的位置参数:'value'
- c# - 如何使用最短路径返回多个节点?
- spring - 错误:在 Spring boot kotlin 新项目中找不到或加载主类
- python - Python face_recognition 数据集质量
- django - Django 3.0 + 频道 + ASGI + TokenAuthMiddleware
- bash - 使用bash将表格转换为文本文件中的逗号分隔
- android - Google Assistant Action - 隐式调用体验
- matlab - 如何创建具有逻辑变量的数组并在 for 循环中遍历这些变量?
- c# - 使用 SQL 和 LDAP 验证登录
- ubuntu - modprobe module.ko 上的“PKCS#7 签名未使用受信任的密钥签名”错误