介绍 & lt; html lang=癳n"比;
,& lt; head>
,& lt; meta charset=癠TF-8"比;
,& lt; title>可视化音频& lt;/title>
,& lt; https://www.yisu.com/zixun/script src=" https://code.jquery.com/jquery-3.3.1.min.js ">
<时尚>身体{
显示:块;
背景:url (/8.。jpg);
背景位置:中心;
平铺方式:不再重演;
background-attachment:固定;
background-size: 100%;
}>
这篇文章将为大家详细讲解有关JS如何实现可视化音频效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
效果如图:
背景图片可以换成自己喜欢的或者不用,线条的颜色粗细也可以自己调整。
代码如下(可直接复制使用):
<帆布id=盎肌? <>脚本 窗口。onload=function () { 画布。宽度=window.innerWidth; 画布。身高=window.innerHeight; var canvasCtx=canvas.getContext (2 d); var AudioContext=窗口。AudioContext | |窗口。webkitAudioContext | | window.mozAudioContext; var audioContext=new audioContext();//实例化 $ (' # musicFile ') .change(函数(){//当选择歌曲时,判断当前audioContext的状态,如果在进行中则关闭音频环境,//释放audioContext的所有资源,并重新实例化audioContext 如果(audioContext。状态==氨寂堋?{ audioContext.close (); audioContext=new audioContext (); } 如果(this.files。长度==0)返回;=$ var文件(“# musicFile”) [0] .files [0]; var fileReader=new fileReader (); fileReader.readAsArrayBuffer(文件); fileReader。onload=function (e) { var计算=0; $(' #提示')。text(“开始解码”) var计时器=setInterval(函数(){ 数+ +; $(' #提示')。text(“解码中,已用时“+数+“秒”) }, 1000) audioContext.decodeAudioData (e.target.result函数(缓冲){ clearInterval(计时) $(' #提示')。text(“解码成功,用时共计:' +数+“秒”) var audioBufferSourceNode=audioContext.createBufferSource (); var分析器=audioContext.createAnalyser (); 分析器。fftSize=256; audioBufferSourceNode.connect(分析器); analyser.connect (audioContext.destination); audioBufferSourceNode。缓冲=缓冲区; audioBufferSourceNode.start (); var bufferLength=analyser.frequencyBinCount; var dataArray=new Uint8Array (bufferLength);//播放暂停音频 起止。onclick=function () { 如果(audioContext。状态===氨寂堋?{ audioContext.suspend(),然后(函数(){ $(" #起止”).val(“播放”); }); 如果(audioContext}其他。状态===霸萃！?{ audioContext.resume(),然后(函数(){ $(" #起止”).val(“暂停”); }); } } var噢=canvas.width; var哦=canvas.height; var color1=canvasCtx。createLinearGradient(噢/2,哦/2 - 10,噢/2,哦/2 - 150); var color2=canvasCtx。createLinearGradient(噢/2,哦/2 + 10,噢/2,哦/2 + 150); color1。addColorStop (0, ' # 1 e90ff '); color1.addColorStop (。25、“# FF7F50”); color1.addColorStop (。5,' # 8 a2be2 '); color1.addColorStop (。75年,# 4169 e1); color1。addColorStop(1 # 00飞行符”); color2。addColorStop (0, ' # 1 e90ff '); color2.addColorStop (。25、“# FFD700”); color2.addColorStop (。5,' # 8 a2be2 '); color2.addColorStop (。75年,# 4169 e1); color2。addColorStop (1 # FF0000); 函数画(){ drawVisual=requestAnimationFrame(画); var barHeight;//自定义获取数组里边数据的频步 canvasCtx。clearRect(0, 0,噢,哦); (var=0;我
