JS实现可视化音频效果的实例代码


Posted in Javascript onJanuary 16, 2020

效果如图:

背景图片可以换成自己喜欢的或者不用,线条的颜色粗细也可以自己调整。

JS实现可视化音频效果的实例代码

代码如下(可直接复制使用):

<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实现可视化音频效果的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
基于jQuery的获得各种控件Value的方法
Nov 19 Javascript
Jquery Ajax请求代码(2)
Jan 07 Javascript
JS trim去空格的最佳实践
Oct 30 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
node.js中的fs.write方法使用说明
Dec 15 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
解决layui弹出层layer的area过大被遮挡的问题
Sep 21 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
js实现div色块碰撞
Jan 16 #Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 #Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 #Javascript
使用Karma做vue组件单元测试的实现
Jan 16 #Javascript
js实现div色块拖动录制
Jan 16 #Javascript
微信小程序实现二维码签到考勤系统
Jan 16 #Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 #Javascript
You might like
菜鸟学PHP之Smarty入门
2007/01/04 PHP
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
理解PHP5中static和const关键字的区别
2007/03/19 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
javascript globalStorage类代码
2009/06/04 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
JS中from 表单序列化提交的代码
2017/01/20 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python自动化测试之连接几组测试包实例
2014/09/28 Python
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
Python调用C++,通过Pybind11制作Python接口
2018/10/16 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
Python运行DLL文件的方法
2020/01/17 Python
python 实现&quot;神经衰弱&quot;翻牌游戏
2020/11/09 Python
python中scrapy处理项目数据的实例分析
2020/11/22 Python
Python 求向量的余弦值操作
2021/03/04 Python
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
Java工程师面试集锦之Spring框架
2013/06/16 面试题
餐饮总经理岗位职责
2014/03/07 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
运动会100米加油稿
2015/07/21 职场文书