本文介绍了HTML5AudioAPI的主要框架和工作流程。由于音频处理模块较多，这里只简单介绍几个音频处理模块，并通过实例展示效果。后续会介绍使用HTML5音频API实现的项目，欢迎大家关注，敬请期待。HTML5音频API的主要框架和工作流程如下图所示。在AudioContext音频上下文中，将音频文件转换为缓冲格式，从音频源source开始，通过AuidoNode对音频进行处理，最终到达目的地输出音乐。这里形成了一个音频通道，各个模块通过connect方法链接起来传输音频。AudioContextAudioContext是一个音频上下文，就像一个大工厂，所有的音频都是在这个音频上下文中处理的。letaudioContext=new(window.AudioContext||window.webkitAudioContext)();AudioContext音频上下文提供了很多属性和方法用于创建各种音频源和音频处理模块等，这里只介绍一部分，更多的属性和方法文档可以在MDN上找到。属性AudioContext.destination返回一个AudioDestinationNode对象，代表当前AudioContext中所有节点的最终节点，一般代表一个音频渲染设备。AudioContext.createBufferSource()方法创建了一个AudioBufferSourceNode对象，可以通过AudioBuffer对象对包含的音频数据进行播放和处理。AudioContext.createGain()创建一个控制音频总音量的GainNode。AudioContext.createBiquadFilter()创建一个BiquadFilterNode，代表一个双二阶滤波器。可以设置几种不同和常见的滤波器类型：高通、低通、带通等。createOscillator()创建一个表示周期性波形的OscillatorNode，基本上创建一个音调。将音频转换为缓冲区格式使用decodeAudioData()方法将音频文件编译为缓冲区格式。functiondecodeAudioData(audioContext,url){returnnewPromise((resolve)=>{letrequest=newXMLHttpRequest();request.open('GET',url,true);request.responseType='arraybuffer';request.onload=()=>{audioContext.decodeAudioData(request.response,(buffer)=>{if(!buffer){alert('错误解码文件数据：'+url);return;}else{resolve(buffer);}})}request.onerror=function(){alert('BufferLoader:XHRerror');}request.send();})}letbuffer=decodeAudioData(audioContext,'./sounds/music.mp3');AudioNode音频节点接口是一个音频处理模块。包括音源、音频输出、中间处理模块。AudioNode.connect()方法链接两个AudioNode节点，将音频从一个AudioNode节点输出到另一个AudioNode节点，形成音频通道。AudioNode.disconnect()断开AudioNode节点与其他节点的连接。AudioBufferSourceNode的音频源有很多，这里只介绍buffer的音频源，buffer的音频源是通过AudioContext接口的createBufferSource方法创建的。音频源节点继承自AudioNode音频节点。让bufferSource=audioContext.createBufferSource();创建AudioBufferSourceNode对象后，将buffer格式的音频数据赋值给AudioBufferSourceNode对象的buffer属性。这时候音频已经传给了音频源，可以对音频进行处理或者输出了。bufferSource.buffer=缓冲区；方法AudioBufferSourceNode.start(when[,duration])开始播放。when：延迟播放时间，单位秒。offset：将音频定位到秒开始播放。duration：播放开始到结束的时长，当经过设定的秒数后，音频播放自动结束。AudioBufferSourceNode.stop([when])when：延迟停止时间，单位秒。停止播放。注意，调用该方法后，AudioBufferSourceNode.start不能再次调用播放。AudioDestinationNode音频目标通过AudioContext接口的目标属性访问。音频目的地继承AudioNode音频节点，AudioDestinationNode节点不能再传递音频信息到下一个音频节点，即不能再链接到其他音频节点，因为它已经是目的地，没有输出，并且也可以理解为输出本身。让audioDestinationNode=audioContext.destination;此时我们有了音频起点AudioBufferSourceNode和音频终点AudioDestinationNode，使用AudioNode.connect()方法连接起点和终点形成一个有输入输出的音频通道，就可以播放音频了直接地。bufferSource.connect(audioDestinationNode);戳我看栗子GainNode是用来做音量变化的。它是一个AudioNode类型的音频处理模块。让gainNode=audioContext.createGain();将音源、音频输出和音频处理模块连接在一起，形成可以控制音量的音频。bufferSource.connect(gainNode);gainNode.connect(audioDestinationNode);letcontrolVolume=value=>{gainNode.gain.value=value);}//双音量播放controlVolume(2);戳我看栗子BiquadFilterNode代表一个简单的低频滤波器来控制音调。它是一个AudioNode类型的音频处理模块。让filterNode=audioContext.createBiquadFilter();输出转置音频：bufferSource.connect(filterNode);filterNode.connect(audioDestinationNode);letcontrolFrequency=function(value){filterNode.frequency.value=value;}//音频为1000音换位controlFrequency(1000);多个音频源在一个音频上下文中可以有多个音频处理通道，即同时输出多个音频源。每个音频处理通道内的操作都是独立的，不会影响其他音频通道。戳我看栗子多个音频处理模块一个音源可以被多个音频处理模块处理，音频处理模块叠加效果输出。戳我看栗子欢迎关注：Leechikit
