[前端]利用WebAudioAPI獲取音訊頻譜(html5音訊視覺化)
阿新 • • 發佈:2018-11-25
專案希望可以把音訊視覺化,有條隨聲音波動的曲線或者是像唱吧那種。開始是搜到了騰訊大腿(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開始建立之後開始計算的
程式碼:
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
來源:簡書
簡書著作權歸作者所有,任何形式的轉載都請聯絡作者獲得授權並註明出處。