【大结局】《从案例中学习JavaScript》之酷炫音乐播放器(四)

这是之前写的用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;
}

这个表示从上往下,上面是天蓝色,渐变到下面的纯白色。有一个过渡的效果。

界面:

【大结局】《从案例中学习JavaScript》之酷炫音乐播放器(四)

从图中可以看到,页面上只有顶部有一条蓝色的线,这是因为目前的页面还没有任何东西。这个属性需要你body区域里有实实在在的东西,才能把高度给撑开。

当然,如果你用纯色,不使用 linear-gradient ,就没关系。

比如你直接写:

body {
background:lightskyblue;
}

效果:

【大结局】《从案例中学习JavaScript》之酷炫音乐播放器(四)

这样就没关系。

OK,继续,我们给body区域添加一个div,作为我们的音轨盒子。

<div class='box'></div>

设置一下他的css样式

.box {
width: 500px;
height: 275px;
background: #666;
position: relative;
margin: 100px auto;
}

效果:

【大结局】《从案例中学习JavaScript》之酷炫音乐播放器(四)

这样是不是就有了。

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;
}

【大结局】《从案例中学习JavaScript》之酷炫音乐播放器(四)

然后,把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;
}

【大结局】《从案例中学习JavaScript》之酷炫音乐播放器(四)

我引入了一首音乐,现在点击播放按钮,就已经可以播放音乐了。

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);
});
}

效果:

【大结局】《从案例中学习JavaScript》之酷炫音乐播放器(四)

OK,对接完成了。

我把背景色改了一下,不用渐变色了,还是用纯色吧。

这样就完成了,这算是一个简单版本的。

不过原理都是一样的,我已经把这个音轨对接的代码整合到之前的版本了。

演示站点

http://jacksky.d113.163ns.cn/music/index.html

嗯,音乐播放器系列到此为止就算是结束了,感谢各位的捧场。

上一篇:java中final 关键字的作用


下一篇:Python challenge 3 - urllib & re