專案希望可以把音訊視覺化，有條隨聲音波動的曲線或者是像唱吧那種。開始是搜到了騰訊大腿（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視覺化的文章

注意audioContext.currentTime是從audioContext開始建立之後開始計算的

程式碼：

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，Firefox中為mozAudioContext。
        // 所以為了讓程式碼更通用，能夠同時工作在兩種瀏覽器中，只需要一句程式碼將字首進行統一即可。
        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//是否迴圈
});
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);
 

作者：Tuzei
連結：https://www.jianshu.com/p/f6bb7be793bc
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。