AudioContext 实现音频可视化(web技术分享)


Posted in Javascript onFebruary 24, 2022

要实现音频可视化,实现一些炫酷的效果需要借助 Web Audio API提供的一些方法 AudioContext:

  • AudioContext接口表示由链接在一起的音频模块构建的音频处理图,每个模块由一个AudioNode表示。音频上下文控制它包含的节点的创建和音频处理或解码的执行。
  • 在做任何其他操作之前,您需要创建一个AudioContext对象,因为所有事情都是在上下文中发生的。建议创建一个AudioContext对象并复用它,而不是每次初始化一个新的AudioContext对象,并且可以对多个不同的音频源和管道同时使用一个AudioContext对象。

一、准备 audio 和 canvas 标签

<audio class="audio" ref='audio' :src='tune' @ended='ended'></audio>

<canvas ref='canvas' width='300px' height='300px'></canvas>

二、创建并返回一个新的AudioContext对象。

const ctx = new AudioContext();

三、创建一个新的MediaElementAudioSourceNode对象

  • AudioContext 接口的 createMediaElementSource() 方法用于创建一个新的 MediaElementAudioSourceNode对象,输入某个存在的 HTML<audio>or<video>` 元素, 对应的音频即可被播放或者修改.
const audioSrc = ctx.createMediaElementSource(this.audioElement);

四、创建AnalyserNode对象

AudioContext createAnalyser()方法能创建一个AnalyserNode,可以用来获取音频时间和频率数据,以及实现数据可视化。

const analyser = ctx.createAnalyser();

五、设置 fftSize 属性

  • AnalyserNode 接口的 fftSize 属性的值是一个无符号长整型的值, 表示(信号)样本的窗口大小。当执行快速傅里叶变换(Fast Fourier Transfor (FFT))时,这些(信号)样本被用来获取频域数据。
  • fftSize 属性的值必须是从32到32768范围内的2的非零幂; 其默认值为2048。
analyser.fftSize = 512;

六、audioSrc 和 analyser 进行链接

AudioNode 接口的 connect() 方法使你能将一个节点的输出连接到一个指定目标,这个指定的目标可能是另一个 AudioNode(从而将音频数据引导到下一个指定节点)或一个AudioParam, 以便上一个节点的输出数据随着时间流逝能自动地对下一个参数值进行改变。

audioSrc.connect(analyser);

七、analyser 和 ctx.destination 进行链接

AudioContext destination 属性返回一个 AudioDestinationNode 表示context中所有音频(节点)的最终目标节点,一般是音频渲染设备,比如扬声器。

analyser.connect(ctx.destination)

八、歌曲播放进行中

Uint8Array 数组类型表示一个8位无符号整型数组,创建时内容被初始化为0。创建完后,可以以对象的方式或使用数组下标索引的方式引用数组中的元素。

AnalyserNode接口的 getByteFrequencyData() 方法将当前频率数据复制到传入的Uint8Array(无符号字节数组)中。

如果数组的长度小于 AnalyserNode.frequencyBinCount, 那么Analyser多出的元素会被删除. 如果是大于, 那么数组多余的元素会被忽略.

visualization() {

    const arr = new Uint8Array(this.analyser.frequencyBinCount);

    this.analyser.getByteFrequencyData(arr);

    this.draw(arr);

},

九、使用canvas绘制音频图谱

  • HTMLCanvasElement.getContext() 方法返回 canvas 的上下文,如果上下文没有定义则返回  null .
  • 2d建立一个 CanvasRenderingContext2D 二维渲染上下文。
this.canvas = this.$refs.canvas.getContext('2d');draw(arr) {    canvas.clearRect(0, 0, document.body.clientWidth, this.canvasHeight);    const start = ((document.body.clientWidth / 2) - ((arr.length / 2) * 3));    arr.forEach((item, index) => {        this.canvas.beginPath();        this.canvas.strokeStyle = '#B2AFF4';        this.canvas.lineWidth = 3;        this.canvas.moveTo(start + (index * 4), this.canvasHeight);        this.canvas.lineTo(start + (index * 4), this.canvasHeight - item / 2);        this.canvas.stroke();    });}

效果展示:

 AudioContext 实现音频可视化(web技术分享)

到此这篇关于 AudioContext 实现音频可视化(web技术分享)的文章就介绍到这了,更多相关 AudioContext 实现音频可视化内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
Javascript 相关文章推荐
js函数般调用正则
Apr 08 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
node.js中的http.response.writeHead方法使用说明
Dec 14 Javascript
js生成验证码并直接在前端判断
May 15 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
深入理解JavaScript中的浮点数
May 18 Javascript
JS高仿抛物线加入购物车特效实现代码
Feb 20 Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
Jul 03 Javascript
iview中Select 选择器多选校验方法
Mar 15 Javascript
简单了解JavaScript sort方法
Nov 25 Javascript
WebRTC记录音视频流(web技术分享)
Feb 24 #Javascript
Vue3如何理解ref toRef和toRefs的区别
Feb 18 #Vue.js
JavaScript实现酷炫的鼠标拖尾特效
Vue h函数的使用详解
Feb 18 #Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 #Vue.js
详解JSON.parse和JSON.stringify用法
Feb 18 #Javascript
前端vue+express实现文件的上传下载示例
You might like
php获取远程图片体积大小的实例
2013/11/12 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
jQuery select的操作实现代码
2009/05/06 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
python实现八大排序算法(2)
2017/09/14 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
基于python实现学生管理系统
2018/10/17 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
深入了解NumPy 高级索引
2020/07/24 Python
人事专员岗位职责范本
2014/03/04 职场文书
党校毕业个人总结
2015/02/28 职场文书
领导新年致辞2016
2015/07/29 职场文书