效果如图:
背景图片可以换成自己喜欢的或者不用,线条的颜色粗细也可以自己调整。
代码如下(可直接复制使用):
<html lang="en"> <head> <meta charset="utf-8"> <title>可视化音频</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <style> body { display: block; background: url("./8.jpg"); background-position: center; background-repeat: no-repeat; background-attachment: fixed; background-size:100%; } </style> </head> <body> <input type="file" style="color:red;" name="" value="" id="musicfile"><input type="button" name="startstop" value="暂停" id="startstop"> <p id="tip" style="color:red;"></p> <canvas id="canvas"></canvas> <script> window.onload = function () { canvas.width = window.innerwidth; canvas.height = window.innerheight; var canvasctx = canvas.getcontext("2d"); var audiocontext = window.audiocontext || window.webkitaudiocontext || window.mozaudiocontext; var audiocontext = new audiocontext();//实例化 $('#musicfile').change(function(){ //当选择歌曲时,判断当前audiocontext的状态,如果在进行中则关闭音频环境, //释放audiocontext的所有资源,并重新实例化audiocontext if(audiocontext.state == 'running'){ audiocontext.close(); audiocontext = new audiocontext(); } if (this.files.length == 0) return; var file = $('#musicfile')[0].files[0]; var filereader = new filereader(); filereader.readasarraybuffer(file); filereader.onload = function(e) { var count = 0; $('#tip').text('开始解码') var timer = setinterval(function(){ count++; $('#tip').text('解码中,已用时'+count+'秒') },1000) audiocontext.decodeaudiodata(e.target.result, function(buffer) { clearinterval(timer) $('#tip').text('解码成功,用时共计:'+count+'秒') var audiobuffersourcenode = audiocontext.createbuffersource(); var analyser = audiocontext.createanalyser(); analyser.fftsize = 256; audiobuffersourcenode.connect(analyser); analyser.connect(audiocontext.destination); audiobuffersourcenode.buffer = buffer; audiobuffersourcenode.start(); var bufferlength = analyser.frequencybincount; var dataarray = new uint8array(bufferlength); //播放暂停音频 startstop.onclick = function() { if(audiocontext.state === 'running') { audiocontext.suspend().then(function() { $("#startstop").val('播放'); }); } else if(audiocontext.state === 'suspended') { audiocontext.resume().then(function() { $("#startstop").val('暂停'); }); } } var ow = canvas.width; var oh = canvas.height; var color1 = canvasctx.createlineargradient(ow / 2, oh / 2-10, ow / 2, oh / 2 - 150); var color2 = canvasctx.createlineargradient(ow / 2, oh / 2+10, ow / 2, oh / 2 + 150); color1.addcolorstop(0, '#1e90ff'); color1.addcolorstop(.25, '#ff7f50'); color1.addcolorstop(.5, '#8a2be2'); color1.addcolorstop(.75, '#4169e1'); color1.addcolorstop(1, '#00ffff'); color2.addcolorstop(0, '#1e90ff'); color2.addcolorstop(.25, '#ffd700'); color2.addcolorstop(.5, '#8a2be2'); color2.addcolorstop(.75, '#4169e1'); color2.addcolorstop(1, '#ff0000'); function draw() { drawvisual = requestanimationframe(draw); var barheight; // 自定义获取数组里边数据的频步 canvasctx.clearrect(0, 0, ow, oh); for (var i = 0; i < bufferlength; i++) { barheight = dataarray[i]; analyser.getbytefrequencydata(dataarray); // 绘制向上的线条 canvasctx.fillstyle = color1; /* context.fillrect(x,y,width,height) * x,y是坐标 * width,height线条的宽高 */ canvasctx.fillrect(ow / 2 + (i * 8), oh / 2, 2, -barheight); canvasctx.fillrect(ow / 2 - (i * 8), oh / 2, 2, -barheight); // 绘制向下的线条 canvasctx.fillstyle = color2; canvasctx.fillrect(ow / 2 + (i * 8), oh / 2, 2, barheight); canvasctx.fillrect(ow / 2 - (i * 8), oh / 2, 2, barheight); } }; draw(); }) } }) } </script> </body> </html>
总结
以上所述是小编给大家介绍的js实现可视化音频效果的实例代码,希望对大家有所帮助
如对本文有疑问, 点击进行留言回复!!
2020-07-21 html5如何监听veido的全屏 + css的字体间距 + JS的window.open() + 软技能svn与git
html+css+js适合前端小白的实战全解(超详细)——2048小游戏(二)
在使用@angular/cli创建的angular项目上添加postcss等一系列移动端自适应插件
网友评论