webAudio学习

webAudio
学习文章
1.AudioContext: 音频上下文，音频上下文可以共用

this.audioContext = new AudioContext();
this.audioContext = new (globalThis.AudioContext || globalThis.webkitAudioContext || globalThis.mozAudioContext)();

2.音频节点 AudioNode是一个基类，作为音频路由图中的基本单位，依赖于AudioContext
音频节点分为三种:
1.Source Node：能产生音频的节点，只有输出，没有输入。
2.Process Node：对音频进行处理的节点，有输入（可能有多个）和输出。
3.Destination Node：通常为音频播放设备，如扬声器。(audioContext.destination)
AudioContext的destination属性返回一个AudioDestinationNode表示 context 中所有音频（节点）的最终目标节点，一般是音频渲染设备，比如扬声器。

decodeAudioData()：产生音频的AudioBuffer
decodeAudioData()方法可用于异步解码音频文件中的 ArrayBuffer

 public async loadAudioBuffer(audioName: string): Promise<AudioBuffer> {let path = this.audioRootPath + audioName;let audioBuffer = this.audioAssets.get(path);if (audioBuffer != null) return audioBuffer;let loadPromise = new Promise<AudioBuffer>((resolve, reject) => {resources.load(path, AudioClip, (error, asset) => {if (error) return reject('load audio failed:' + audioName + error);this.decodeAudioData(asset._nativeAsset as any).then((audioBuffer) => {if (audioBuffer == null) return reject('decoding error:' + path);this.audioAssets.set(path, audioBuffer);resolve(audioBuffer);});});});this.audioAssets.set(path, loadPromise);return loadPromise;}public decodeAudioData(audioData: ArrayBuffer): Promise<AudioBuffer> {return new Promise((resolve) => {const promise = this.audioContext.decodeAudioData(audioData, resolve, (err) => {console.warn('failed to load Web Audio', err);})promise?.catch((reason) => console.warn('failed to load Web Audio', reason, audioData));});}

createBufferSource（）：音频源节点，创建一个新的AudioBufferSourceNode接口
createBufferSource() 该接口可以通过AudioBuffer 对象来播放音频数据。AudioBuffer对象可以通过AudioContext.createBuffer 来创建或者通过 AudioContext.decodeAudioData成功解码音轨后获取。

const source = this.audioContext.createBufferSource();
source.buffer = audioBuffer;
source.connect(this.musicGain);// 音频源节点连接到声音节点
this.musicGain.connect(this.audioContext.destination);// 声音节点连接到destination进行播放
source.loop = true;
source.start(0, startOffset);
this._music = source;

createGain（）：声音节点

this.musicGain = this.audioContext.createGain();
this.musicGain.connect(this.audioContext.destination);

createAnalyser（）：可以对音频信号进行实时的快速傅立叶变换（FFT）得到音频的时域/频域数据，拿到时域/频域的数据后，可以实现时域分析、频域分析、音频可视化动效等。

1  const analyser = audioContext.createAnalyser();
2  analyser.fftSize = 2048; // 指定要进行FFT的采样数据的窗口大小，2的整数倍
3  const dataArray = new Uint8Array(analyser.frequencyBinCount);
4  analyser.getByteTimeDomainData(dataArray);
5  //analyser.getByteFrequencyData(dataArray);
//analyser.frequencyBinCount是时域/频域数据的长度，它是fftSize的一半（因为实时音频信号的傅立叶变换具有对称性，只需要获取一半数据即可），通过analyser.getByteTimeDomainData(dataArray)或者getByteFrequencyData方法将数据填充到8位无符号整型数组中

webAudio学习相关推荐

学习下 BlackHat Asia 2021 大会议题
BlackHat Asia 2021会议已经结束,相关议题资料也放出,刚好这两天周末抽空学习下,共39个议题,覆盖范围还是比较广的,虽然议题质量不如USA主会场,但多少还是有一些值得学习的内容,我只挑 ...
java入门慕路径,Java入门基础知识总结学习教程大全【必看经典】
类型的表达式,是循环条件,表达式3是党执行了一遍循环之后,修改控制循环的变量值. ??? for语句的执行过程是这样的:首先计算表达式1,完成必要的初始化工作:然后判断表达式2的值,如果表达式的值为t ...
Java EE学习心得
–Java EE学习心得 1. 称为编程专家的秘诀是: 思考-----编程--------思考------编程--.. 编程不能一步到位,不能一上来就编,必须先思考如何写,怎样写?然后再编程 ...
FastAI 2019课程学习笔记 lesson 2：自行获取数据并创建分类器
文章目录数据获取 google_images_download 的安装和使用挂载google 个人硬盘到Google colab中删除不能打开文件创建ImageDataBunch 训练模型解 ...
FastAI 课程学习笔记 lesson 1：宠物图片分类
文章目录代码解析神奇的"%" 导入fastAI 库下载解压数据集 untar_data 获取帮助文档 help() ? ?? doc 设置路径 get_image_files ...
深度学习学习指南-工具篇
colab Colab是由Google提供的云计算服务,通过它可以让开发者很方便的使用google的免费资源(CPU.GPU.TPU)来训练自己的模型. 学习经验总结如何使用命令行? 通过!+cmd ...
Redis学习之路(一)--下载安装redis
redis学习之路--下载安装redis windows安装redis 1.下载redis 2.安装 3.查看是否安装成功 windows安装redis 1.下载redis 网址:https://gi ...
python内置库之学习configparser库(一)
python内置库之学习configparser库(一) 1.引言 ini文件简介 [节] 键=值注:节不能重复出现 2.自己封装了一个增删改查的类,可以参考一下 import configpars ...
前端Vue学习之路(二)-Vue-router路由
Vue学习之路 (二) Vue-router(基础版) 一.增加静态路由二.动态路由+路由嵌套+404页面三. 编程式导航四.命名路由五.命名视图六.重定向和起别名 1.重定向 2.起别名 ...

webAudio学习

webAudio学习相关推荐

最新文章

热门文章