HTML5音频API Web Audio

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

成都创新互联公司是一家专业从事网站制作、成都网站建设、网页设计的品牌网络公司。如今是成都地区具影响力的网站设计公司,作为专业的成都网站建设公司,成都创新互联公司依托强大的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、营销型网站建设及网站设计开发服务！

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

AudioContext

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

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

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

AudioNode

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

方法

AudioNode.connect()

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

AudioNode.disconnect()

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

AudioBufferSourceNode

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

 
 
 
 
      
  
  
  
  1. let bufferSource = audioContext.createBufferSource(); 
    2.

创建了 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; 
    2.

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

 
 
 
 
      
  
  
  
  1. bufferSource.connect(audioDestinationNode); 
    2.

GainNode

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

 
 
 
 
      
  
  
  
  1. let gainNode = audioContext.createGain(); 
    2.

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

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

BiquadFilterNode

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

 
 
 
 
      
  
  
  
  1. let filterNode = audioContext.createBiquadFilter(); 
    2.

输出一个变调的音频：

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

多个音频源

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

多个音频处理模块

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

网站名称：HTML5音频API Web Audio
当前网址：http://www.mswzjz.com/qtweb/news12/180462.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

域名注册知识

同城分类信息

小程序开发　　 　成都网站改版　　 　盐亭做网站　　 　重庆服务器托管　　 　微信开发　　 　重庆网站建设公司　　 　蓬溪网站建设　　 　眉山联通机房　　 　中建建业环保　　 　成都小程序开发公司　　 　宜宾网站建设　　 　绵阳服务器托管　　 　高防服务器租用　　 　眉山托管服务器　　 　香港空间腾讯云　　 　成都服务器租赁　　 　成都移动主机托管　　 　德阳机房　　 　服务器托管　　 　专业网站建设