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 EasyUI 使用介绍
Apr 01 Javascript
jQuery中 noConflict() 方法使用
Apr 25 Javascript
javascript使用isNaN()函数判断变量是否为数字
Sep 21 Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 Javascript
jquery实现无限分级横向导航菜单的方法
Mar 12 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
基于vue实现分页/翻页组件paginator示例
Mar 09 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
Mar 08 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
详解JavaScript 为什么要有 Symbol 类型?
Apr 03 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 Javascript
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面向对象的方法重载两种版本比较
2008/09/08 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
Gambit vs CL BO3 第三场 2.13
2021/03/10 DOTA
插件:检测javascript的内存泄漏
2007/03/04 Javascript
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
vue中nextTick用法实例
2019/09/11 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
python中abs&amp;map&amp;reduce简介
2018/02/20 Python
python+pygame实现坦克大战
2019/09/10 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
python下载的库包存放路径
2020/07/27 Python
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
本科毕业生自我鉴定
2013/11/02 职场文书
大学生优秀团员事迹材料
2014/01/30 职场文书
楼面部长岗位职责范本
2014/02/14 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
关爱空巢老人感想
2015/08/11 职场文书
无故旷工检讨书
2015/08/15 职场文书
2016年国培研修日志
2015/11/13 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
Python基于百度API识别并提取图片中文字
2021/06/27 Python
python中redis包操作数据库的教程
2022/04/19 Python
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android