//音樂(lè)播放器模塊、 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();},// 時(shí)間time : function(callback) {var $this = this;this.audioDom.addEventListener("canplaythrough", function() {var totaltime = $this.format(this.duration);// $(".time").html($this.format(this.duration));// 這種寫(xiě)法耦合度較高，只適用于當(dāng)前頁(yè)面，無(wú)法進(jìn)行擴(kuò)展，可以用回調(diào)函數(shù)，將得到的時(shí)間回調(diào)出去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);});},// 格式化時(shí)間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;},// 進(jìn)度percent : function() {} };var cxBar = {arr : [],// 定義一個(gè)存放span對(duì)象的數(shù)組mw : 5,// 每一個(gè)盒子寬度init : function() {var domBox = dom("wrapBox");var bwidth = domBox.clientWidth; // 相同情況下，clientWidth<offsetWidth// ,clientWidth不包括邊框。只包括內(nèi)邊距var ms = Math.floor(bwidth / this.mw); // 盒子的數(shù)量// 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;} };/* 音樂(lè)解析器 */ var KeKeMusic = {mark : false,init : function() {// ie11以上的瀏覽器才支持// 1:音頻上下文===html5+ajax+audioContext html5+audio+audioContextwindow.AudioContext = window.AudioContext || window.webkitAudioContext|| window.mozAudioContext || window.msAudioContext;/* 動(dòng)畫(huà)執(zhí)行的兼容寫(xiě)法 */window.requestAnimationFrame = window.requestAnimationFrame|| window.webkitRequestAnimationFrame|| window.mozRequestAnimationFrame|| window.msRequestAnimationFrame;// 2:初始化音軌對(duì)象var audioContext = new window.AudioContext();return audioContext;},parse : function(audioContext, audioDom, callback) {try {// 拿到播放器去解析你音樂(lè)文件var audioBufferSouceNode = audioContext.createMediaElementSource(audioDom);// 創(chuàng)建解析對(duì)象var analyser = audioContext.createAnalyser();// 將source與分析器連接audioBufferSouceNode.connect(analyser);// 將分析器與destination連接，這樣才能形成到達(dá)揚(yáng)聲器的通路analyser.connect(audioContext.destination);// 調(diào)用解析音頻的方法KeKeMusic.data(analyser, callback);} catch (e) {}},data : function(analyser, callback) {if (KeKeMusic.mark) {// 將音頻轉(zhuǎn)換一個(gè)數(shù)組var array = new Uint8Array(analyser.frequencyBinCount);analyser.getByteFrequencyData(array);// 通過(guò)回調(diào)函數(shù)返回if (callback)callback(array);requestAnimationFrame(function() {KeKeMusic.data(analyser, callback);});}} };window.onload = function() {cxBar.init();// 點(diǎn)擊音樂(lè)播放器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; // }};

總結(jié)

以上是生活随笔為你收集整理的可视化音轨的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。