js音乐可视化音浪
原理
使用的是js的AudioContext
效果图
代码
function Visual(audio){
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;
audio =audio||this.$refs.audio;
let ctx = new AudioContext();
let analyser = ctx.createAnalyser();//用户频率分析,一个必须为2次方的数,范围为32-32768
let audioSrc = ctx.createMediaElementSource(audio);
audioSrc.connect(analyser);
analyser.connect(ctx.destination);
let frequencyData = new Uint8Array(analyser.frequencyBinCount);
let canvas = document.getElementById('canvas'),
cwidth = canvas.width,
cheight = canvas.height,
meterWidth = 10, //每一个音浪条的宽度
capHeight = 2,//音浪顶部小块高度
capStyle = '#5b5bea',//小块颜色
meterNum = 800 / (10 + 2), //音浪的数量
capYPositionArray = []; ////存储垂直位置
ctx = canvas.getContext('2d');
let gradient = ctx.createLinearGradient(0, 0, 0, 300);
gradient.addColorStop(1, '#8140ff');
gradient.addColorStop(0.5, '#5b5bea');
gradient.addColorStop(0, '#fff');
function renderFrame() {
let array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(array);
let step = Math.round(array.length / meterNum);
ctx.clearRect(0, 0, cwidth, cheight);
for (let i = 0; i < meterNum; i++) {
let value = array[i * step];
if (capYPositionArray.length < Math.round(meterNum)) {
capYPositionArray.push(value);
};
ctx.fillStyle = capStyle;
if (value < capYPositionArray[i]) {
ctx.fillRect(i * 12, cheight - (--capYPositionArray[i]), meterWidth, capHeight);
} else {
ctx.fillRect(i * 12, cheight - value, meterWidth, capHeight);
capYPositionArray[i] = value;
};
ctx.fillStyle = gradient;
ctx.fillRect(i * 12 , cheight - value + capHeight, meterWidth, cheight);
}
requestAnimationFrame(renderFrame);
}
renderFrame();
this.VisualState=false;
}
在audio开始播放的时候执行该函数,传入audio元素,即可在canvas上看到效果
原创不易,如果可以就打赏下吧~

