【大结局】《从案例中学习JavaScript》之酷炫音乐播放器（四）
【大结局】《从案例中学习JavaScript》之酷炫音乐播放器（四）
Paste_Image.png
这是之前写的用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;
}这个表示从上往下，上面是天蓝色，渐变到下面的纯白色。有一个过渡的效果。
界面：
Paste_Image.png
从图中可以看到，页面上只有顶部有一条蓝色的线，这是因为目前的页面还没有任何东西。这个属性需要你body区域里有实实在在的东西，才能把高度给撑开。
当然，如果你用纯色，不使用 linear-gradient ，就没关系。
比如你直接写：
body {
background:lightskyblue;
}效果：
Paste_Image.png
这样就没关系。
OK，继续，我们给body区域添加一个div，作为我们的音轨盒子。
<div class='box'></div>设置一下他的css样式
.box {
width: 500px;
height: 275px;
background: #666;
position: relative;
margin: 100px auto;
}效果：
Paste_Image.png
这样是不是就有了。
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;
}
Paste_Image.png
然后，把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;
}
Paste_Image.png
我引入了一首音乐，现在点击播放按钮，就已经可以播放音乐了。
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);
});
}效果：
Paste_Image.png
OK，对接完成了。
我把背景色改了一下，不用渐变色了，还是用纯色吧。
这样就完成了，这算是一个简单版本的。
不过原理都是一样的，我已经把这个音轨对接的代码整合到之前的版本了。
演示站点
您的支持是我写作的最大动力：
嗯，音乐播放器系列到此为止就算是结束了，感谢各位的捧场。
腾讯云开发者
