HTML5 ——web audio API 音乐可视化(一)

使用Web Audio API能够对音频进行分析和操做，最终实现一个音频可视化程序。

最终效果请戳这里;

完整版代码请戳这里，若是还看得过眼，请给一个start⭐

1、API

1. AudioContext: 该接口表示由音频模块连接而成的一个音频上处理下文，相似于canvas里面getContext(2d)返回的对象，对音频的一切 操做都在这个环境里进行；它包含各个AudioNode对象以及他们相关联的对象，建立方法以下：

   ​ var ac = new window.AudioContect();

2. AudioNode:音频节点，是一个音频处理模块，它包括GainNode(音量控制器)、BiquadFilterNode(滤波器)等；

3. AudioContext的属性：

   • AudioContext.currentTime: AudioContext从建立开始到当前的时间，单位秒，是一个只读属性，不可对其进行操做；
   • AudioContext.destination:返回AudioDestinationNode对象，全部音频输出的汇集地，全部的AudioNode都直接或间接地连接到这里；
   • AudioContext.state:返回AudioContext的当前状态；

4. AudioContext的方法：

   • AudioContext.close():关闭音频环境，释放正在使用的音频资源；
   • AudioContext.createBuffer():建立一个空的AudioBuffer对象，并能经过AudioBufferSourceNode来进行数据填充和播放；AudioBuffer能够经过AudioContect.createBuffer方法建立或使用Audio
   • AudioContext.createBufferSource():建立一个空的AudioBufferSourceNode对象，并能经过AudioBuffer来进行数据填充和播放；
   • AudioCount.createAnalyser()：建立一个AnalyserNode,他能够用来显示音频时间和频率的数据。
   • AudioContext.decodeAudioData(arrayBuffer,succ(buffer),err):从ArrayBuffer对象中异步解码音频文件，这个ArrayBuffer对象一般是经过使用responseType为arraybuffer类型的XMLHttpRequest方法来获取.接受三个参数，第一个是AudioData数据，第二个是解码成功的回调函数，第三个是失败的回调函数。

   • createGain()/createGainNode():建立GainNode对象，经过改变其value的值能够改变音频音量，建立方法：

     ​ var gainNode = ac.createGain() || ac.createGainNode();

5. AudioBufferSourceNode:表示内存中的一段音频资源，其音频数据存储于AudioBuffer中(buffer属性中)，建立方式：

   ​ var buffersource = ac.createBufferSource();

   此对象有3个经常使用的属性：

   ​ 1).buffer:AudioBuffer对象，表示要播放的音频资源数据。他有一个子属性：duration，该音资源的时长，单位秒；

   ​ 2).loop:是否循环播放，默认是false；

   ​ 3).onended:绑定音频播放完毕时调用的实践处理程序；

   经常使用的方法：

   1. start/noteOn(when=ac.currentTime,offset=0,duration=buffer.duration-offset),开始播放音频。其中，when：什么时候开始播放；offset:从音频的第几秒开始播放；duration:播放几秒;
   2. stop/noteOff(when=ac.currentTime):结束播放；

2、播放一个音频

经过xhr 获取到arrayBuffer类型的音频资源，用audioContext对象的decodeAudioData方法将arrayBuffer类型解析为buffer类型，用audioContext对象的createBufferSource()方法建立一个bufferSource对象，将刚才解析的buffer 数据复制给bufferSource对象的buffer属性，bufferSource对象用contect()方法连接audioContext对象的 destination 属性，最后调用bufferSource对象的“start/noteOn”方法播放音频。

实例代码：

//获取到arrayBuffer类型的音频资源

   var xhr = new XMLHttpRequest();
   function getMusic(name){
    xhr.abort();
    xhr.open("get","media/"+name);   // 文件位于media文件夹下，要获取的音频文件名为 name
    xhr.responseType = "arraybuffer"; //返回类型设置为
    xhr.onload = function(){
        console.log(xhr.response);  //ArrayBuffer 类型的返回数据
    };
    xhr.send();
   }

//用decodeAudioData方法将arrayBuffer类型解析为buffer类型
   var ac = new window.AudioContext();

   //接上例
   xhr.onload = function(){
     ac.decodeAudioData(xhr.response,function(buffer){
         var bufferSource = ac.createBufferSource();
         bufferSource.buffer = buffer;
         bufferSource.connect(ac.destination);  
         bufferSource[bufferSource.start ? "start" : "noteOn"](0);  //播放
       },function(err){
         console.log(err)
       })
   };

实现对音量的控制：

改变音量要用到gainNode对象，用gainNode对象连接到destination对象，而后让bufferSource对象连接到gainNode对象，对音量的控制，是对gainNode对象的gain.value 对象的改变达到的效果。

//音量控制元素 
   <input type="range" id="volume" mix="0" max="100" value="50">

var gainNode = ac[ac.createGain ? "createGain" :"createGainNode"]();
   gainNode.connect(ac.destination);   

   function getMusic(name){
     //...代码同上，只有一处须要修改
     bufferSource.connect(gainNode);  //由于上面已经将gainNode链接到ac.destination了，因此这里只需连接到gainNode便可；
   }
   $("#volume").change(function(){
    changeVolume($(this).val()/$(this).attr("max"));
   })
   function changeVolume(num){
    gainNode.gain.value = num * num;
   }

以上代码就能够实现获取音频进行播放了，固然这只是一个开始，接下来一篇对音频进行分析。