本篇教程探讨了HTML5如何实现音频可视化频谱跳动，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。
<
html>
HTML5音频可视化频谱跳动代码
*{
margin:0;
padding:0;
}
#canvas{
display:block;
background:linear-gradient(135deg,rgb(142,13,133)0%,rgb(230,132,110)100%);
}
window.onload=function(){
varoAudio=document.getElementById(‘myaudio‘);
window.οnclick=function(){
if(oAudio.paused){
oAudio.play();
}else{
oAudio.pause();
}
}
//创建音频上下文对象
varoCtx=newAudioContext();
//console.log(oCtx);
//创建媒体源,除了audio本身可以获取，也可以通过oCtx对象提供的api进行媒体源操作
varaudioSrc=oCtx.createMediaElementSource(oAudio);
//创建分析机
varanalyser=oCtx.createAnalyser();
//媒体源与分析机连接
audioSrc.connect(analyser);
//输出的目标：将分析机分析出来的处理结果与目标点(耳机/扬声器)连接
analyser.connect(oCtx.destination);
//效果(实现的具体方法)
//绘制音频图的条数(fftSize)
/*
根据分析音频的数据去获取音频频次界定音频图的高度
放在与音频频次等长的8位无符号字节数组
Uint8Array:初始化默认值为1024
*/
//利用cancas渐变进行音频绘制
varctx=canvas.getContext(‘2d‘);
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
varoW=canvas.width;
varoH=canvas.height;
varcolor=ctx.createLinearGradient(oW/2,oH*2/3-30,oW/2,oH*2/3-100);
color.addColorStop(0,‘#000‘);
color.addColorStop(.5,‘#069‘);
color.addColorStop(1,‘#f6f‘);
//音频图的条数
varcount=150;
//缓冲区:进行数据的缓冲处理，转换成二进制数据
varvoiceHeight=newUint8Array(analyser.frequencyBinCount);
//console.log(voiceHeight);
functiondraw(){
//将当前的频率数据复制到传入的无符号字节数组中，做到实时连接
analyser.getByteFrequencyData(voiceHeight);
//console.log(voiceHeight);
//自定义获取数组里边数据的频步
varstep=Math.round(voiceHeight.length/count);
ctx.clearRect(0,0,oW,oH);
for(vari=0;i
varaudioHeight=voiceHeight[step*i];
ctx.fillStyle=color;
ctx.fillRect(oW/2+(i*10),oH*2/3,7,-audioHeight);
ctx.fillRect(oW/2-(i*10),oH*2/3,7,-audioHeight);
}
window.requestAnimationFrame(draw);
}
draw();
/*
analyserNode提供了时时频率以及时间域的分析信息
允许你获取实时的数据，并进行音频可视化
analyserNode接口的fftSize属性
fftSize:无符号长整型值，用于确定频域的FFT(快速傅里叶变换)
ffiSize属性值是从32位到32768范围内的2的非零幂,默认值是2048
*/
}
本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！
