項目希望可以把音頻可視化渔彰，有條隨聲音波動的曲線或者是像唱吧那種。開始是搜到了騰訊大腿（TGideas）寫的audio可視化組件飞傀，想著直接用葛圃，后來各種原因還是打算自己重新寫一個……雖然明顯寫得low了很多。
騰訊大腿的audio組件地址
http://www.3fwork.com/b403/001620MYM013253/
GitHub
https://github.com/tgideas/motion/blob/master/component/src/main/audio/audio.js

然后參照了官方api
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
還有一篇也是audio可視化的文章
http://www.mizuiren.com/330.html

注意audioContext.currentTime是從audioContext開始創(chuàng)建之后開始計算的

代碼：

var Visualizer = function(config) {
    this.audioContext = null;
    this.analyser = null;
    this.source = null; //the audio source
    this.config = config;
    this.frequency = [];
    this.playing = false;
    this.ready = false;
    this.loadFailed = false;
};
Visualizer.prototype = {
    init: function () {
        this._prepare();
        this.getData();
        this._analyser();
    },
    _prepare: function () {
        //實例化一個音頻上下文類型window.AudioContext此虑。目前Chrome和Firefox對其提供了支持甚纲，但需要相應前綴，Chrome中為window.webkitAudioContext朦前，F(xiàn)irefox中為mozAudioContext介杆。
        // 所以為了讓代碼更通用，能夠同時工作在兩種瀏覽器中韭寸，只需要一句代碼將前綴進行統(tǒng)一即可春哨。
        window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
        try {
            this.audioContext = new AudioContext();
 
        } catch (e) {
            console.log(e);
        }
    },
    _analyser: function () {
        var that = this;
        that.analyser = that.audioContext.createAnalyser();
        that.analyser.smoothingTimeConstant = 0.85;
        that.analyser.fftSize = 32;//傅里葉變換參數 簡化成16個元素數組
        //將source與分析器連接
        that.source.connect(that.analyser);
        //將分析器與destination連接，這樣才能形成到達揚聲器的通路
        that.analyser.connect(that.audioContext.destination);
        that.frequency = new Uint8Array(that.analyser.frequencyBinCount);

    },
    getData: function () {
        var that = this;
        //建立緩存源
        that.source = that.audioContext.createBufferSource();
        var request = new XMLHttpRequest();
        //請求資源
        request.open('GET', that.config.url, true);
        request.responseType = 'arraybuffer';
        request.onreadystatechange=function() {
            if (request.readyState === 4) {
                if (request.status === 200) {
                    that.ready = true;
                } else {
                    that.loadFailed = true;
                }
            }
        };
        request.onload = function() {
            var audioData = request.response;
            //解碼
            that.audioContext.decodeAudioData(audioData, function(buffer) {
                        that.source.buffer = buffer;
//                        console.log(buffer.duration);//資源長度
//                        that.source.connect(that.audioContext.destination);
                        //將audioBufferSouceNode連接到audioContext.destination恩伺，
                        // 這個AudioContext的destination也就相關于speaker（揚聲器）赴背。
                        that.source.loop = that.config.loop||false;

                    },
                    function(e){"Error with decoding audio data" + e.err});
        };
        request.send();
    },
    play: function () {
        var that = this;
        that.source.start(0);
        that.playing = true;
        var timer = setInterval(function () {
            that.analyser.getByteFrequencyData(that.frequency);
            if (that.source.buffer){
                if (that.audioContext.currentTime>that.source.buffer.duration){
                    that.source.stop(0);
                    that.playing = false;
                    clearInterval(timer);
                }
            }
        },100);
    },
    stop: function () {
        var that = this;
        that.source.stop(0);
        that.playing = false;
    }
};

調用方法：

var v=new Visualizer({
    url:"2.mp3",//audio地址 沒有寫兼容跨域的方法，所以不能跨域
    loop:false//是否循環(huán)
});
v.init();
v.play();
setInterval(function () {
    if(v.ready){
          console.log("ready!");
    } else if(v.loadFailed){
          console.log("加載失敗");
    }
    if (v.playing){ //playing判斷是否在播放
        console.log(v.frequency);//frequency是長度為16的頻率值數組
    }
},100);