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常用技巧及常用方法列表集合
Apr 06 Javascript
网页防止tab键的使用快速解决方法
Nov 07 Javascript
深入理解Javascript中this的作用域
Aug 12 Javascript
Jquery全选与反选点击执行一次的解决方案
Aug 14 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 Javascript
jQuery实现div跟随鼠标移动
Aug 20 jQuery
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
js实现图片上传并预览功能
Aug 06 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
详解离线安装npm包的几种方法
Nov 25 Javascript
JS实现的A*寻路算法详解
Dec 14 Javascript
js通过循环多张图片实现动画效果
Dec 19 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
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
Python字符转换
2008/09/06 Python
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
详解Python中的正则表达式
2018/07/08 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
销售代理协议书
2014/09/30 职场文书
档案工作个人总结
2015/03/03 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
高温慰问简报
2015/07/21 职场文书
初中班主任工作随笔
2015/08/15 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript