JS 音频文件可视化代码
时间: 2023-09-24 09:13:13 浏览: 56
很好,下面是一个简单的JS音频文件可视化代码:
```
// 获取音频文件
var audioContext = new AudioContext();
var audioSrc = audioContext.createBufferSource();
var request = new XMLHttpRequest();
request.open('GET', 'audio.mp3', true);
request.responseType = 'arraybuffer';
request.onload = function() {
var audioData = request.response;
audioContext.decodeAudioData(audioData, function(buffer) {
audioBuffer = buffer;
audioSrc.buffer = audioBuffer;
audioSrc.connect(audioContext.destination);
audioSrc.start();
});
}
request.send();
// 可视化
var canvas = document.getElementById('canvas');
var canvasCtx = canvas.getContext('2d');
var WIDTH = canvas.width;
var HEIGHT = canvas.height;
var drawVisual;
function draw() {
drawVisual = requestAnimationFrame(draw);
var freqByteData = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(freqByteData);
canvasCtx.fillStyle = 'rgb(0, 0, 0)';
canvasCtx.fillRect(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 = freqByteData[i];
canvasCtx.fillStyle = 'rgb(' + (barHeight + 100) + ',50,50)';
canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2);
x += barWidth + 1;
}
};
var analyser = audioContext.createAnalyser();
audioSrc.connect(analyser);
analyser.connect(audioContext.destination);
draw();
```
这段代码使用JS语言实现了音频文件的可视化效果,主要使用了Web Audio API中的AudioContext和Analyser两个对象实现,具体实现方法可以参考注释。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![.zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![.zip](https://img-home.csdnimg.cn/images/20210720083646.png)