//音樂播放器模塊、 var cxMusic = {audioDom : null,// 初始化init : function(callback) {this.audioDom = document.getElementById("audioDom");this.time(callback);},// 播放play : function() {return this.audioDom.play();},// 暫停stop : function() {return this.audioDom.pause();},// 時間time : function(callback) {var $this = this;this.audioDom.addEventListener("canplaythrough", function() {var totaltime = $this.format(this.duration);// $(".time").html($this.format(this.duration));// 這種寫法耦合度較高，只適用于當前頁面，無法進行擴展，可以用回調函數，將得到的時間回調出去if (callback)callback.call(this, true, totaltime);});this.audioDom.addEventListener("timeupdate", function() {var current = $this.format(this.currentTime);var percent = this.currentTime / this.duration * 100;if (callback)callback.call(this, false, current, percent);});},// 格式化時間format : function(ftime) {var m = Math.floor(ftime / 60);var s = Math.floor(ftime % 60);if (m < 10)m = "0" + m;if (s < 10)s = "0" + s;return m + ":" + s;},// 進度percent : function() {} };var cxBar = {arr : [],// 定義一個存放span對象的數組mw : 5,// 每一個盒子寬度init : function() {var domBox = dom("wrapBox");var bwidth = domBox.clientWidth; // 相同情況下，clientWidth<offsetWidth// ,clientWidth不包括邊框。只包括內邊距var ms = Math.floor(bwidth / this.mw); // 盒子的數量// var html="";domBox.style.width = (ms + 1) * this.mw + "px";for (var i = 0; i <= ms; i++) {// html+="<span class='items'// style='left:"+(i*this.mw)+"px;background-color:"+randomColor(0.5)+"'></span>";var spanDom = document.createElement("span");spanDom["className"] = "items";// css(spanDom,{left:(i*this.mw)+"px",backgroundColor:randomColor(0.5)});css(spanDom, {left : (i * this.mw),width : this.mw - 1,//backgroundColor : randomColor(0.5)});domBox.appendChild(spanDom);cxBar.arr.push(spanDom);}// domBox.innerHTML=html;} };/* 音樂解析器 */ var KeKeMusic = {mark : false,init : function() {// ie11以上的瀏覽器才支持// 1:音頻上下文===html5+ajax+audioContext html5+audio+audioContextwindow.AudioContext = window.AudioContext || window.webkitAudioContext|| window.mozAudioContext || window.msAudioContext;/* 動畫執行的兼容寫法 */window.requestAnimationFrame = window.requestAnimationFrame|| window.webkitRequestAnimationFrame|| window.mozRequestAnimationFrame|| window.msRequestAnimationFrame;// 2:初始化音軌對象var audioContext = new window.AudioContext();return audioContext;},parse : function(audioContext, audioDom, callback) {try {// 拿到播放器去解析你音樂文件var audioBufferSouceNode = audioContext.createMediaElementSource(audioDom);// 創建解析對象var analyser = audioContext.createAnalyser();// 將source與分析器連接audioBufferSouceNode.connect(analyser);// 將分析器與destination連接，這樣才能形成到達揚聲器的通路analyser.connect(audioContext.destination);// 調用解析音頻的方法KeKeMusic.data(analyser, callback);} catch (e) {}},data : function(analyser, callback) {if (KeKeMusic.mark) {// 將音頻轉換一個數組var array = new Uint8Array(analyser.frequencyBinCount);analyser.getByteFrequencyData(array);// 通過回調函數返回if (callback)callback(array);requestAnimationFrame(function() {KeKeMusic.data(analyser, callback);});}} };window.onload = function() {cxBar.init();// 點擊音樂播放器var audioDom = dom("audioDom");var audioContext = KeKeMusic.init();this.audioDom.onplay = function() {KeKeMusic.mark = true;var len = cxBar.arr.length;KeKeMusic.parse(audioContext, audioDom, function(data) {for (var i = 0; i < len; i++) {cxBar.arr[i]["style"]["height"] = data[i] + "px";cxBar.arr[i].style.background = "linear-gradient("+randomColor(0.5)+"5%,rgba(255,255,0,0.5) 60%,#fff 100%)";}})}; // this.audioAutom.onpause=function(){ // kekeMusic.mark=false; // }};

總結

以上是生活随笔為你收集整理的可视化音轨的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。