html频谱跳动效果,HTML5音频可视化频谱跳动代码

HTML5音频可视化频谱跳动代码

*{

margin:0;

padding:0;

}

#canvas {

display: block;

background: linear-gradient(135deg, rgb(142, 13, 133) 0%, rgb(230, 132, 110) 100%);

}

window.οnclick=function () {if(oAudio.paused) {

oAudio.play();

}else{

oAudio.pause();

}

}//创建音频上下文对象

var oCtx = newAudioContext();//console.log(oCtx);//创建媒体源,除了audio本身可以获取，也可以通过oCtx对象提供的api进行媒体源操作

var audioSrc =oCtx.createMediaElementSource(oAudio);//创建分析机

var analyser =oCtx.createAnalyser();//媒体源与分析机连接

audioSrc.connect(analyser);//输出的目标：将分析机分析出来的处理结果与目标点(耳机/扬声器)连接

analyser.connect(oCtx.destination);//效果(实现的具体方法)//绘制音频图的条数(fftSize)

/*根据分析音频的数据去获取音频频次界定音频图的高度

放在与音频频次等长的8位无符号字节数组

Uint8Array:初始化默认值为1024*/

//利用cancas渐变进行音频绘制

va