中国领先的IT技术网站
|
|

HTML5音频API Web Audio

此文介绍HTML5音频API的主要框架和工作流程,因为音频处理模块很多,因此只简单介绍几种音频处理模块,并通过例子来展示效果。后续会介绍利用HTML5音频API实现的项目,欢迎大家关注,敬请期待。

作者:佚名来源:segmentfault|2017-08-09 15:57

沙龙活动 | 去哪儿、陌陌、ThoughtWorks在自动化运维中的实践!10.28不见不散!


此文介绍HTML5音频API的主要框架和工作流程,因为音频处理模块很多,因此只简单介绍几种音频处理模块,并通过例子来展示效果。后续会介绍利用HTML5音频API实现的项目,欢迎大家关注,敬请期待。

HTML5音频API的主要框架和工作流程如下图,在 AudioContext 音频上下文中,把音频文件转成 buffer 格式,从音频源 source 开始,经过 AuidoNode 处理音频,最后到达 destination 输出音乐。这里形成了一个音频通道,每个模块通过 connect 方法链接并传送音频。

AudioContext

AudioContext 是一个音频上下文,像一个大工厂,所有的音频在这个音频上下文中处理。

  1. let audioContext = new(window.AudioContext || window.webkitAudioContext)(); 

AudioContext 音频上下文提供了很多属性和方法,用于创建各种音频源和音频处理模块等,这里只介绍一部分,更多属性和方法可到MDN查阅文档。

属性

AudioContext.destination

返回 AudioDestinationNode 对象,表示当前 AudioContext 中所有节点的最终节点,一般表示音频渲染设备。

方法

AudioContext.createBufferSource()

创建一个 AudioBufferSourceNode 对象, 他可以通过 AudioBuffer 对象来播放和处理包含在内的音频数据。

AudioContext.createGain()

创建一个 GainNode,它可以控制音频的总音量。

AudioContext.createBiquadFilter()

创建一个 BiquadFilterNode,它代表代表一个双二阶滤波器,可以设置几种不同且常见滤波器类型:高通、低通、带通等。

createOscillator()

创建一个 OscillatorNode, 它表示一个周期性波形,基本上来说创造了一个音调。

音频转换成Buffer格式

使用decodeAudioData()方法把音频文件编译成buffer格式。

  1. function decodeAudioData(audioContext, url) { 
  2.     return new Promise((resolve) => { 
  3.         let request = new XMLHttpRequest(); 
  4.         request.open('GET', url, true); 
  5.         request.responseType = 'arraybuffer'
  6.         request.onload = () => { 
  7.             audioContext.decodeAudioData(request.response, (buffer) => { 
  8.                 if (!buffer) { 
  9.                     alert('error decoding file data: ' + url); 
  10.                     return
  11.                 } else { 
  12.                     resolve(buffer); 
  13.                 } 
  14.             }) 
  15.         } 
  16.         request.onerror = function() { 
  17.             alert('BufferLoader: XHR error'); 
  18.         } 
  19.         request.send(); 
  20.     }) 
  21.  
  22. let buffer = decodeAudioData(audioContext, './sounds/music.mp3'); 

AudioNode

音频节点接口是一个音频处理模块。包括音频源,音频输出,中间处理模块。

方法

AudioNode.connect()

链接两个 AudioNode 节点,把音频从一个 AudioNode 节点输出到另一个 AudioNode 节点,形成一个音频通道。

AudioNode.disconnect()

把 AudioNode 节点与其他节点断开链接。

AudioBufferSourceNode

音频源有多种,这里只介绍 buffer 的音频源,buffer 的音频源通过 AudioContext 接口的 createBufferSource 方法来创建。音频源节点继承 AudioNode 音频节点。

  1. let bufferSource = audioContext.createBufferSource(); 

创建了 AudioBufferSourceNode 对象后,把 buffer 格式的音频数据赋值给 AudioBufferSourceNode 对象的 buffer 属性,此时音频已经传递到音频源,可以对音频进行处理或输出。

bufferSource.buffer = buffer;

方法

AudioBufferSourceNode.start(when[, duration])

开始播放。

  • when:延迟播放时间,单位为秒。
  • offset:定位音频到第几秒开始播放。
  • duration:从开始播放结束时长,当经过设置秒数后自动结束音频播放。

AudioBufferSourceNode.stop([when])

  • when:延迟停止时间,单位为秒。

停止播放,注意调用该方法后,无法再次调用 AudioBufferSourceNode.start 播放。

AudioDestinationNode

音频终点是通过 AudioContext 接口的 destination 属性访问的。音频终点继承 AudioNode 音频节点,

AudioDestinationNode 节点无法再把音频信息传递给下一个音频节点,即无法再链接其他音频节点,因为他已经是终点,没有输出,也可以理解为他自己就是输出。

  1. let audioDestinationNode = audioContext.destination; 

此时我们有音频起点 AudioBufferSourceNode 和音频终点 AudioDestinationNode ,使用 AudioNode.connect() 方法把起点和终点链接起来,就形成了一条有输入输出的音频通道,可以把音频直接播放出来。

  1. bufferSource.connect(audioDestinationNode); 

GainNode

用于音量变化。它是一个 AudioNode 类型的音频处理模块。

  1. let gainNode = audioContext.createGain(); 

把音频源、音频输出和音频处理模块链接一起,形成可控制音量大小的音频。

  1. bufferSource.connect(gainNode); 
  2.  
  3. gainNode.connect(audioDestinationNode); 
  4.  
  5. let controlVolume = value => { 
  6.  
  7. gainNode.gain.value = value); 
  8.  
  9.  
  10. // 两倍音量播放 
  11.  
  12. controlVolume(2); 

BiquadFilterNode

表示一个简单的低频滤波器,可控制声调。它是一个 AudioNode 类型的音频处理模块。

  1. let filterNode = audioContext.createBiquadFilter(); 

输出一个变调的音频:

  1. bufferSource.connect(filterNode); 
  2.  
  3. filterNode.connect(audioDestinationNode); 
  4.  
  5. let controlFrequency = function(value) { 
  6.  
  7. filterNode.frequency.value = value; 
  8.  
  9.  
  10. // 音频为1000变调 
  11.  
  12. controlFrequency(1000); 

多个音频源

在一个音频上下文中,可以有多个音频处理通道,即多个音频源同时输出。各个音频处理通道内的操作是独立的,不影响其他音频通道。

多个音频处理模块

一个音频源可以经过多个音频处理模块处理,音频处理模块叠加效果后输出。

【编辑推荐】

  1. JavaScript语法树与代码转化实践
  2. 10个JavaScript难点
  3. 从指向看JavaScript中的难点
  4. 在Node.js中使用MySQL&MySQL JavaScript客户端
  5. JavaScript进阶之深入理解数据双向绑定
【责任编辑:枯木 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

C#2005编程进阶与参考手册

本书非常详细而全面地介绍了C#程序设计语言。本书不是“5分钟学习C#”式的手册,也不是那种教您“照猫画虎”地创建一些与您的实际工作需要...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊
× Python最火的编程语言