java web 播放音频_用webAudio和canvas实现音频可视化
前两天遇到了要显示音频波形图的需求,因为时间紧,就直接用了wavesufer.js,这两天有空,就研究了一下怎么用webAudio实现音频的可视化。
大致流程是对音源进行解析,解析得到的数据是个频谱数组,然后使用canvas将数组形象化显示出来。
随音乐的播放不断重复上述过程,就能得到一个随着音乐不断跳动的频谱动画,非常酷炫!
废话不多说,下面上代码。
1.准备工作
首先获取各个对象:
var AudioContext = AudioContext ||webkitAudioContext;var audio = document.getElementById("snd");var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");
加载音频源有很多种方式,可以用file加载本地音乐,可以用ajax,这里就简单点用audio标签。
2.创建音源和解析器
var atx = newAudioContext();var source =atx.createMediaElementSource(audio);var analyser = atx.createAnalyser();
3.连接
连接的顺序为:音源 ==> 解析器 ==> 最终输出
source.connect(analyser);
analyser.connect(atx.destination);
直接连接音源和最终输出(比如扬声器)就可以播放声音,中间连接各种效果节点可以实现音频的各种增益,这里要实现音频可视化,就需要一个解析器。
4.可视化
这里就不得不提到解析器的fftSize属性,它的值必须是从32到32768范围内的2的非零幂; 其默认值为2048。
这个值越大,图形就越详细。
analyser.fftSize = 2048;functiondraw(){var cWidth =canvas.width,
cHeight=canvas.height,//frequencyBinCount的值固定为fftSize的一半
audioArray = newUint8Array(analyser.frequencyBinCount);//解析频率数据,放入audioArray数组中
analyser.getByteFrequencyData(audioArray);//填充为柱状图
ctx.clearRect(0,0,cWidth,cHeight);for(var i = 0;i < audioArray.length;i ++){
ctx.fillRect(i*3,cHeight-audioArray[i],2,cHeight);
}//刷新
requestAnimationFrame(draw);
}
draw();
audio.play();
到这里音频的可视化就完成了,其实挺简单的。
ps:上面2到4步的内容最好放到一个按钮的点击事件里,这是由于谷歌浏览器最新的安全策略。
ps2:音频可视化需要放在http或https服务器上,不用说也是出于浏览器安全性考虑...
最后附上MDN关于音频可视化的一个讲解(比我这个好多啦):
题外话:
写完了感觉有点儿不对劲,我本来是要实现类似wavesufer默认的那种静态效果,结果变成随音乐播放刷新的动态效果,酷炫是酷炫了,可是偏离了本意,有空再补上静态的。
java web 播放音频_用webAudio和canvas实现音频可视化相关推荐
- Java web小项目_个人主页(2)—— 边缘加速原理与实现
摘自:Java web小项目_个人主页(2)-- 边缘加速原理与实现 作者:丶PURSUING 发布时间: 2021-03-27 14:44:40 网址:https://blog.csdn.net/w ...
- Java web小项目_个人主页(1)—— 云环境搭建与项目部署
摘自:Java web小项目_个人主页(1)-- 云环境搭建与项目部署 作者:丶PURSUING 发布时间: 2021-03-26 23:59:39 网址:https://blog.csdn.net/ ...
- java web应用程序_说说Java Web中的Web应用程序|乐字节
大家好,我是乐字节的小乐,今天接着上期文章<Javaweb的概念与C/S.B/S体系结构>继续往下介绍Java Web ,这次要说的是web应用程序. 1. Web 应用程序的工作原理 W ...
- java web程序示例_想要建立一些有趣的东西吗? 这是示例Web应用程序创意的列表。...
java web程序示例 Interested in learning JavaScript? Get my ebook at jshandbook.com 有兴趣学习JavaScript吗? 在js ...
- java web前后台交互_前后端交互(javaweb)
前段后台交互的学习(Java web) 标签 : 前后端交互 Javaweb 下面介绍了一些关于交互的细节: 请求数据 前端提供请求数据. 在开发中,后台在查询数据库时,需要借助查询条件才能查询到前端 ...
- java web 颜色灰色_网站动态变灰解决方案(java web项目网站)
每逢5.12和哀悼日,各大门户网站都会把自己网站变灰色,以此来表示对逝者的哀悼. 下面是一个java web项目网站变化的设计方案. 思路是这样的,首先由个页面来操作网站是变灰还是不变灰, 然后把选择 ...
- java web.xml 监听器_【JAVA 核心技术】java web 中的监听器
为什么要有监听器? 监听器是用来处理一系列事件的java类,可被配置在java web项目中. 既然如此,为什么不用代码直接调用监听器? 这可能是因为J2EE规范规定的项目工程标准,用web.xml指 ...
- java web数据库面试_数据库面试技巧,通过JDBC展示自己专业性,摘自java web轻量级开发面试教程...
importjava.sql.Connection;2 importjava.sql.DriverManager;3 importjava.sql.ResultSet;4 importjava.sql ...
- java web不用框架_初学javaweb,远离各自框架
OSCHINA 软件库有一个分类--Web框架,该分类中包含多种编程语言的将近500个项目. Web框架是开发者在使用某种语言编写Web应用服务端时关于架构的最佳实践.很多Web框架是从实际的Web项 ...
最新文章
- java算法题常用到的一些api,含面试题+答案
- Linux中如何杀掉僵尸进程
- [译] 12步轻松搞定python装饰器 - 简书
- 2016012090+小学四则运算练习软件项目报告
- Shell脚本编程----变量的使用
- 聊一聊C# 8.0中的await foreach
- Linux系统的各种安装方法与修复技巧
- SpringMVC_跟踪请求
- iframe在ios设备宽度不能100%
- 计算机开启网络共享,一键开启共享_局域网win7访问xp_打开默认共享命令
- 消息队列原理及activeMQ基本知识点
- mysql获取今天的最后一秒_Oracle取得当天0时0分0秒和23时59分59秒
- web打印模板神器reportbro—汉化及中文字体配置(上)
- 红米k30pro工程测试代码_红米手机如何进行硬件测试
- 平实给力的写作指导入门手册——leo鉴书57
- 【高等数学】矩阵与向量组的秩和等价
- ARM芯片上电启动流程
- git使用commit命令报错(please tell me who are you)
- 2018-2019 ACM-ICPC, Asia Shenyang Regional Contest 不完整题解与训练赛复盘
- 【Axure教程】多选和批量操作的表格模板