随着浏览器越来越强大，使用浏览器自带的api来操作音频已经不是什么难事了。下面我们使用webaudioapi来简单的处理音频资源。简介在学习webaudioapi之前，先了解三个概念：音频源，即音频输入，可以是设备直接输入的音频，也可以是远程获取的音频文件。处理节点、分析器和处理器，例如音高控制节点、音量节点、声音处理节点。输出源是指音频渲染设备，通常是用户设备的扬声器，即context.destination。其实音频源和输出源也都可以看做是节点，三者的关系可以用这张图来表示：当然，在实际使用中，可能有n个处理节点，可以在转使用连接。音频文件播放如果想使用webaudioapi播放本地音乐文件，我们按照前面的流程来试试。文件上传由于音频文件来自本地，所以必须支持文件上传：我限制了显示首先是wav和mp3两种格式。文件读取向输入添加更改事件并处理所选文件：varcontext=new(window.AudioContext||window.webkitAudioContext)();document.getElementById('file').addEventListener('change',function(e){varread=newFileReader();read.onload=function(){//将arrayBuffer转换为audioBuffercontext.decodeAudioData(this.result,function(buffer){playSound(buffer);},function(){console.log('error');});};//使用filereader将文件转换为arraybuffer格式read.readAsArrayBuffer(this.files[0]);});丢了一段代码，我们来看一下，newAudioContext()，创建一个音频上下文环境，至于webkitAudioContext兼容低版本的chrome。你应该见过很多fileReader。这里使用它来读取相应文件对象中的文件数据。readAsArrayBuffer表示读取结果与arrayBuffer对象一起显示。由于该方法是异步读取的，所以只能放在onload回调处理中。但是我们得到的arrayBuffer是不能直接播放到webaudio的。我们需要使用decodeAudioData()方法将arrayBuffer转换为audioBuffer。那么转换后的audioBuffer就是音源。关于decodeAudioData的更多信息，请参考MDN：https://developer.mozilla.org...。注意：w3c文档声明decodeAudioData支持audio标签支持的所有音频格式。音频播放现在音频数据已经准备好了，下一步就是播放它了。文件上传后，我们获取音频缓冲区形式的数据，然后使用createBufferSource()方法播放音频数据，然后连接到目的地进行播放。//播放音频functionplaySound(buffer){varsource=context.createBufferSource();//设置数据source.buffer=buffer;//连接到扬声器source.connect(context.destination);source.start();}一个简单的音频文件播放器就完成了。如果从服务器获取文件，也是类似的，只是多了一个ajax处理。代码地址：webAudio播放本地音乐。音频可以去一些音乐网站下载。如果懒得下载，我直接提供音频下载：林俊杰_-_我还是很想念她.mp3小bug连续选择多个文件时，会发现多个音频文件是一起播放的，因此，当多个音频是输入，它们可以通过连接到context.destination一起播放。为此，这应该被视为一个错误。查看AudioBufferSourceNode文档，可以使用stop()方法来处理。大家想一想，处理一下。在前面的例子中，只出现了音频源和音频输出，没有出现处理节点。接下来，我们尝试使用音量处理节点自己创建音频。制作音频并播放创建音频源这里我们不使用外部音频文件，而是使用createOscillator()方法创建音频源。该方法返回OscillatorNode，它的振荡频率可以通过frequency属性设置，type属性可以用来指定要播放的波形。有关更多属性和方法，请参阅OscillatorNode文档。varcontext=new(window.AudioContext||window.webkitAudioContext)();varoscillator=context.createOscillator();//oscillator.type='sine';//oscillator.frequency.value=800;//frequency800Hz，默认440创建音量处理节点。使用createGain()方法修改返回值中的值，可以改变音量。vargainNode=context.createGain();gainNode.gain.value=0.8;//Volume0~1节点关联和播放连接这些“节点”进行播放。振荡器.connect(gainNode);//音频源关联音量gainNode.connect(context.destination);//音量与扬声器关联//Chrome73要求用户点击播放document.getElementById('start').addEventListener('click',function(){oscillator.start();});虽然播放后噪音很大，但是我们已经可以使用简单的webaudioapi了。代码地址：webAudio发出声音并播放。在其他尝试中，我在控制台中遇到了这个警告：TheAudioContextwasnotallowedtostart。它必须在页面上的用户手势后恢复（或创建）。这可能意味着AudioContext需要由用户手动触发，所以只需将newAudioContext()移动到事件内部即可。总结我们已经可以使用网络音频播放本地音乐并发出声音。接下来，我们可以试试其他的API。阅读原文。欢迎关注微信公众号【不懂前端】或扫描下方二维码！
