這是之前寫的用H5制作的音樂播放器，前三節其實已經做得差不多了，音軌的制作原理已經在上一節說明，不過一直還沒有和音樂對接。
本章作為該系列的一個完結篇，我會專門把動態音軌的實現代碼貼出來，demo地址會在文章最后給出。
為了盡可能保持條理清晰，我就重新開一個頁面來說明吧。你把本文的代碼拷過去，應該是可以直接運行的。（當然，音樂文件需要換成你本地的）
1. 畫一個demo頁
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>音軌和音樂對接</title>
</head>
<body>
</body>
</html>
在這個頁面的head部分添加一個style塊，我就不單獨整css文件了，把所有的樣式都寫在一個頁面吧。
給body添加一個線性背景
body {
background:-webkit-linear-gradient(top,skyblue 0%,#fff 100%) no-repeat;
background:linear-gradient(top,skyblue 0%,#fff 100%) no-repeat;
}
這個表示從上往下，上面是天藍色，漸變到下面的純白色。有一個過渡的效果。
界面：
從圖中可以看到，頁面上只有頂部有一條藍色的線，這是因為目前的頁面還沒有任何東西。這個屬性需要你body區域里有實實在在的東西，才能把高度給撐開。
當然，如果你用純色，不使用 linear-gradient ，就沒關系。
比如你直接寫：
body {
background:lightskyblue;
}
效果：
這樣就沒關系。
OK，繼續，我們給body區域添加一個div，作為我們的音軌盒子。
<div class='box'></div>
設置一下他的css樣式
.box {
width: 500px;
height: 275px;
background: #666;
position: relative;
margin: 100px auto;
}
效果：
這樣是不是就有了。
2. 音軌制作
我們還是采用span來制作音軌，具體原理和繪制方法已經在上一節中說明，這里不再贅述，我直接上代碼了。
在body下方添加一個script塊，里面就寫我們的js代碼：
<script>
</script>
我們設置每一條音軌的寬度為10px。
var box = document.getElementsByTagName('div')[0]; //獲取承載音軌的父盒子
var allWidth = box.clientWidth;//獲取承載音軌盒子的寬度
var len = (allWidth / 10 ); //計算一共出現多少條音軌
var html = ''; //動態拼接音軌
for(var i = 0;i < len ; i ++){
html+="<span class='item' style='left:"+(i*10)+"px;background:#fff;'></span>";
}
box.innerHTML = html; //添加音軌
我們先給每一個span添加一個高度，看看效果
css：
.item {
position:absolute;
width:10px;
height:222px;
left:0px;
bottom:0px;
opacity: 0.96;
}
然后，把span的高度設置為0。
好的，音軌盒子差不多就這樣了。
3. 用audio標簽播放音樂
生成默認的audio對象，然后添加到body區域
var audio = document.createElement('audio');
audio.src = 'mp3/01.mp3'
audio.controls = 'controls';
document.body.appendChild(audio);
css:
audio {
display: block;
margin: -100px auto;
width: 500px;
border-top: 1px solid;
border-top-color: #d9dee6;
}
我引入了一首音樂，現在點擊播放按鈕，就已經可以播放音樂了。
4. 音軌盒子與音樂對接
這部分涉及到很多H5的屬性，主要就是一個解析的過程，我就直接貼代碼了。
//1:音頻上下文
window.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();
var flag = null; //控制是否解析的開關變量
//拿到播放器去解析音樂文件
var audioBufferSouceNode = audioContext.createMediaElementSource(audio);
audio.onplay = function(){
flag = true;
//創建解析對象
var analyser = audioContext.createAnalyser();
parse(analyser,function(array){
console.log(array); //打印解析出來的音軌節點
for(var i = 0;i < len ; i ++){
document.getElementsByClassName('item')[i].style.height = array[i] + 'px';
}
});
}
audio.onpause = function(){
for(var i = 0;i < len ; i ++){
document.getElementsByClassName('item')[i].style.height = 1 + 'px';
}
flag = false;
}
function parse(analyser,callback){
if(!flag){
return;
}
audioBufferSouceNode.connect(analyser);
analyser.connect(audioContext.destination);
var array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(array);
if(callback) callback(array);
requestAnimationFrame(function(){
parse(analyser,callback);
});
}
效果：
OK，對接完成了。
我把背景色改了一下，不用漸變色了，還是用純色吧。
這樣就完成了，這算是一個簡單版本的。
不過原理都是一樣的，我已經把這個音軌對接的代碼整合到之前的版本了。
演示站點
http://jacksky.d113.163ns.cn/music/index.html
嗯，音樂播放器系列到此為止就算是結束了，感謝各位的捧場。