js如何获取音视频的分贝
想获取到音视频声音的强度值,得到一份由强度值组成的数据,根据这份数据画对应的波形震动图
使用AudioContext API实现获取音频分贝值,并且将获取的数据画出对应的波形振动图的示例代码:
<html>
<head>
<script>
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var audioCtx = new AudioContext();
// 加载音频
var audio = document.querySelector('audio');
var audioSrc = audioCtx.createMediaElementSource(audio);
var analyser = audioCtx.createAnalyser();
// 将音频源连接到分析器
audioSrc.connect(analyser);
// 将分析器连接到目标节点
analyser.connect(audioCtx.destination);
// 获取音频的分贝值
var frequencyData = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(frequencyData);
// 画出波形振动图
var canvas = document.querySelector('.visualizer');
var canvasCtx = canvas.getContext("2d");
var WIDTH = canvas.width;
var HEIGHT = canvas.height;
function draw() {
requestAnimationFrame(draw);
analyser.getByteFrequencyData(frequencyData);
canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
var barWidth = (WIDTH / analyser.frequencyBinCount) * 2.5;
var barHeight;
var x = 0;
for(var i = 0; i < analyser.frequencyBinCount; i++) {
barHeight = frequencyData[i];
canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2);
x += barWidth + 1;
}
};
draw();
</script>
</head>
<body>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
<canvas class="visualizer" width="300" height="200"></canvas>
</body>
</html>