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执行顺序
Nov 09 Javascript
Extjs中常用表单介绍与应用
Jun 07 Javascript
JavaScript AJAX之惰性载入函数
Aug 27 Javascript
Javascript中的方法链(Method Chaining)介绍
Mar 15 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
Dec 08 Javascript
JS实现上下左右对称的九九乘法表
Feb 22 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
jQuery实现大图轮播
Feb 13 Javascript
windows下vue.js开发环境搭建教程
Mar 20 Javascript
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
如何使用pm2快速将项目部署到远程服务器
Mar 12 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
15个小时----从修改程序到自己些程序
2006/10/09 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
JS按字节截取字符长度实例
2013/11/20 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
2015/10/28 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
一个基于flask的web应用诞生 bootstrap框架美化(3)
2017/04/11 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
学生信息管理系统python版
2018/10/17 Python
python字典一键多值实例代码分享
2019/06/14 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
旅游管理实习自我鉴定
2013/09/29 职场文书
小组合作学习反思
2014/02/18 职场文书
运动会闭幕式解说词
2014/02/21 职场文书
《莫高窟》教学反思
2014/02/25 职场文书
毕业生工作求职信
2014/06/30 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
甘南现象心得体会
2014/09/11 职场文书
辞职信的写法
2015/02/27 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
话题作文之诚信
2019/11/28 职场文书
vue3如何优雅的实现移动端登录注册模块
2021/03/29 Vue.js
python blinker 信号库
2022/05/04 Python