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 相关文章推荐
JQuery中关于jquery.js与jquery.min.js的比较探讨
May 15 Javascript
利用javascript数组长度循环数组内所有元素
Dec 27 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 Javascript
JavaScript面试开发常用的知识点总结
Aug 08 Javascript
bootstrap滚动监控器使用方法解析
Jan 13 Javascript
微信小程序左右滑动切换页面详解及实例代码
Feb 28 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
Angular angular-file-upload文件上传的示例代码
Aug 23 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 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
下载文件的点击数回填
2006/10/09 PHP
php 特殊字符处理函数
2008/09/05 PHP
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
2014/06/23 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
js简单实现图片延迟加载的方法
2016/07/19 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
详解Axios统一错误处理与后置
2018/09/26 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
利用python画一颗心的方法示例
2017/01/31 Python
Python中字典和集合学习小结
2017/07/07 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
python实现根据文件关键字进行切分为多个文件的示例
2018/12/10 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
中间件的定义
2016/08/09 面试题
毕业生自荐书
2014/02/02 职场文书
城管大队整治方案
2014/05/06 职场文书
班级标语大全
2014/06/21 职场文书
pytorch Dropout过拟合的操作
2021/05/27 Python
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL