webaudio ajax,Web Audio 入门之读取左右声道数据
说到音频,大家应该立刻会想到Audio,和Audio标签完全不同,Web Audio的功能更为强大。Audio 和 Web Audio的关系,就像img和canvas的关系一样。
Web Audio 和 Audio的关系
利用Web Audio,能做到的不是单纯的播放声音,可以制造声音,获取声音数据,修改声音数据。因此在应用上,可以用来在游戏中做声音模拟、声音的可视化、声音剪辑等等。
Web Audio的运行流程是这样的:最初的声音数据从源节点(sourceNode)出发,经过一个个声音处理器(audioNode),到达目标节点(destinationNode)
Web Audio运行流程
从上面的流程中,可以提取出最重要的三点:两个名词和一个动作。它们分别是:
AudioContext、AudioNode
connect
1 基础概念
1.1 AudioContext:音频上下文
绘图上下文,是从一个canvas元素中获取的。个人看法,音频播放是一个全局性的行为,所以是从window中获取的。
AudioContext = new window.AudioContext()
1.2 AudioNode:音频处理器
AudioNode由AudioContext生成,种类繁多,但可以被简单明确的分为三类:
sourceNode,声音的源头处理器,它可以读取声音数据流;
sourceNode = audioContext.createBufferSource();
destinationNode,声音的的终点处理器,它可以传递声音数据流到播放设备上;
destinationNode = audioContext.destination;
其它audioNode,语法一般如下
xxxNode = audioContext.createXxx
1.3 connect:连接音频处理器的方法
例如:
sourceNode.connect(xxxNode1)
xxxNode2.connect(xxxNode3)
xxxNode3.connect(destinationNode)
connect连接
2 实例
下面将以读取左右声道数据为例,介绍一下如何组合AudioNode来实现功能。
2.1 sourceNode读取声音数据
首先我们发出一个ajax请求,获取声音数据,这个过程有两点需要注意:
responseType必须为arraybuffer
利用audioContext.decodeAudioData将返回数据解码为sourceNode可以接收的buffer
/**
* 从一个url读取声音,并解码
* @param url 声音文件url
* @return buffer
*/
function getAudioBuffer(url) {
var request = new XMLHttpRequest();
return new Promise((resolve, reject) => {
request.open('GET', url, true);
request.responseType = 'arraybuffer';
request.onload = () => {
audioContext.decodeAudioData(request.response, buffer => buffer ? resolve(buffer) : reject('decoding error'));
};
request.onerror = error => reject(error);
request.send();
});
}
然后,将声音数据的buffer给予sourceNode的操作,这一步非常简单
sourceNode.buffer = buffer;
2.2 声道分离
上一步我们拿到了声音数据,并传递给了sourceNode,接下来我们将sourceNode连接到一个可以分离声道的AudioNode上。
介绍声道分离前,先大致理解下音频处理器的抽象结构:
音频处理器抽象结构
sourceNode只有一个输出接口,destinationNode只由一个输入接口,其它的音频处理器的输入接口、输出接口数量不定,但至少会有一个。
sourceNode、destinationNode和其它audioNode
用于声道分离的这个audioNode比较特殊,它的有一个输入接口,但是有不定数量的输出接口。
声道分离处理器
我们只需要取前两个声道,所以传入参数2,并将源处理器连接上它,将音频数据分离出左声道和右声道。
// 创建声道分离处理器
var splitterNode = audioContext.createChannelSplitter(2);
// 源处理器连接声道分离处理器
sourceNode.connect(splitterNode)
声道分离
2.3 读取声音数据
上一步我们分别拿到了左声道和右声道的数据,现在,我们将对两个声道进行单独处理,分别连接到具有数据分析功能的处理器上,学名叫做:频谱分析器。频谱分析器不会对声音数据进行任何修改。
但是,我们之前说的是将一个audioNode连接到另一个audioNode上。要怎么样获取audioNode的指定输出,去连接另一个audioNode呢?
答案是connect方法提供两个参数:
fromNode.connent(toNode, fromNodeInputIndex, toNodeInputIndex)
例如:fromNode.connent(toNode, 0, 1),将fromNode的第1个输出声道连接到toNode的第2个输入声道。
var leftAnalyserNode = audioContext.createAnalyser()
var rightAnalyserNode = audioContext.createAnalyser()
splitterNode.connect(leftAnalyserNode, 0)
splitterNode.connect(rightAnalyserNode, 1)
读取左右声道声音数据
2.4 从频谱分析器获取数据
我们已经“安装”好了频谱分析器,那么如何从它身上读取出数据来呢?这里面会涉及到一点有些复杂的概念了。简单起见,我只会告诉你,从频谱分析器能够获取声音的时域数据和频域数据。至于获取到这里数据以后,如何转换、对应成响度等数据,就不属于Web Audio的讨论范围了。
如下方法可以获取当前时刻声音的时域数据。
var leftFreqByteData = new Uint8Array(leftAnalyserNode.frequencyBinCount);
leftAnalyserNode.getByteTimeDomainData(leftFreqByteData)
2.5 合并声道
好了,我们已经拿到想要的数据了,下一站应该是destinationNode,不通过destinationNode进行声音播放,数据就无法流动起来,也就无法经过各个处理器,触发它们的处理功能。
声道合并处理器和声道分离处理器是一对好基友。声道处理器具有不定个输入,和一个输出,给它传入一个同样的参数2,将分离开来的声道再合并。
var mergerNode = audioContext.createChannelMerger(2);
leftAnalyserNode.connect(mergerNode, 0, 0)
rightAnalyserNode.connect(mergerNode, 0, 1)
合并声道
2.6 连接destinationNode
好了,现在我们把这条链路的最后一站装上
mergerNode.connect(destinationNode)
连接destinationNode
最后,别忘了通过souceNode.start(0)触发播放~
webaudio ajax,Web Audio 入门之读取左右声道数据相关推荐
- 【web】从数据库读取多条数据到前台
servlet 代码实现 : package com.zzxtit.order;import java.io.IOException; import java.sql.SQLException; im ...
- html5audio音频自动缓冲,HTML5网络音频卡住了(缓冲问题?)(HTML5 web audio getting stuck (buffering issue?))...
HTML5网络音频卡住了(缓冲问题?)(HTML5 web audio getting stuck (buffering issue?)) 我正在制作一个(每周广播节目)音频网站,我一直遇到同样的问题 ...
- Web Audio API 入门1
将吉他和效果器(effect pedal 比如失真效果器)链接,然后将效果器和放大器(amplifier)链接,最后将放大器和音响(speaker)连接,既:吉他-效果器–放大器-音响 Web Aud ...
- java web快速入门_Web安全快速入门
java web快速入门 Web开发人员针对CORS,CSP,HSTS和所有Web安全首字母缩写词的入门知识! (A web developer's primer on CORS, CSP, HSTS ...
- 视频教程-Ajax+jquery从入门到精通2017视频教程-JavaScript
Ajax+jquery从入门到精通2017视频教程 19年软件开发经验,设计开发40多个大型软件,10年从事高等教育,主要为java系列课程,带你轻松进入java生涯. 赖国荣 ¥39.00 立即订阅 ...
- Ajax+jquery从入门到精通2017视频教程-赖国荣-专题视频课程
Ajax+jquery从入门到精通2017视频教程-3583人已学习 课程介绍 ajax技术是从事WEB开发的课程,本课程是在js及jsp课程的基础上的提高课,从ajax初级开始讲解, ...
- Flask Web开发入门
Flask Web开发入门(八)之文件上传 https://blog.csdn.net/kangkanglou/article/details/79027425 前端:详情见上面的链接/也可以直接用f ...
- The Web Audio autoplay policy will be re-enabled in 音频无法播放
原因 1. https://developers.google.com/web/updates/2017/09/autoplay-policy-changes 2. The Web Audio aut ...
- java进阶 2018_Java Web基础入门2018版
步骤1: Java Web基础入门 本步骤带领大家进入Java Web的世界,除了介绍JSP和Servlet以外,还会介绍开发工具IntelliJ IDEA的使用,以及什么是XML.最后会学习MVC模 ...
最新文章
- 纵横公路造价软件学习_20年最新公路造价实战培训课程
- hdu 2544(最短路径)
- 汇编语言--通用寄存器
- python inspect模块
- 线上分享 | 产品架构搭建:从业务到体系
- 【已解决】Error: Module not specified (IntelliJ IDEA)
- winxp系统的驱动可用于win2k吗?_收藏!工业机器人伺服系统常见问题汇总
- electron打包exe文件
- JavaScript 代码收集
- Android StrictMode类使用实例
- git与idea结合,实现通过idea向远程仓库gitee发送代码和获取代码
- WIN11安装JDK8
- Visual Studio无法定位于动态链接库
- Rabbitmq取消预取机制配置,配置手动确认后仍然java.lang.IllegalStateException: Channel closed; cannot ack/nack的问题
- 怎么在字符串中加加号python_python加号连接字符串
- 【Alpha】事后诸葛亮
- 拼多多员工因匿名发贴被辞退,拼多多最新回应
- Equalize Prices
- ArcGIS地理要素数据获取及地图制作
- python中模型训练不收敛问题
热门文章
- 莺尾花数据集--kNN分类
- WEB应用防火墙(WAF启明设备)
- 网络保护第三层 WAF-网络应用防火墙
- scratch少儿编程第1课
- mysql函数 优化_Mysql函数求优化解决思路
- js 原生将元素插入到父元素首位,jquery和原生两种方式
- 如何用计算机弹白山茶,白山茶-陈雪凝-和弦谱-《弹吧》官网tan8.com-和弦谱大全,学吉他,秀吉他...
- 成都榆熙:拼多多商家都想要提高客单价,但是怎么去提高呢?
- java同花顺判定_笔试题:随机抽取五张牌 判断是否为同花顺
- 动态规划-不相邻数字之和的最大值