《从案例中学习JavaScript》之酷炫音乐播放器（一）

剽悍一小兔

发布于 2018-05-17 14:27:44

1.8K0

发布于 2018-05-17 14:27:44

序

接触简书也有一段日子了，这中间的时光还是比较轻松加愉快的，那种可以和他人分享知识的欣喜和愉悦的确是非常棒。我一向都是觉得专心写自己的文就可以了，不会总是纠结有多少人在看，有多少点击等等。用心写好自己的文，体会那种分享的快乐，就可以了。

之前写的《js常用方法和一些封装》系列暂且告一段落，接下来，我会通过各种案例，来分享javascript的各种技巧，所以最终将这个系列的名称定为：《从案例中学习JavaScript》,回想到自己初学编程时候的各种艰辛，买了很多书，然而这些书大多为泛泛而谈，或者东拼西凑。市面上充斥着各种多少多少天从入门到精通的书籍，我曾经也花了好多大洋，满怀信心地买了类似的书，结果我就零基础从入门到蒙逼了。

经过几年的摸索，我最终发现，知识点还是必须在工作中去练习才能真正的理解，或者通过一个具体的案例来融汇贯通。当然，我指的案例不是那种很多线下培训机构为了讲知识点而弄出来的案例。

比如这样的：

for (var i = 0; i < 3 ; i ++) {
    alert(i);
}

这就是典型的为了讲而讲，案例非常枯燥不说，而且花费大量的时间来练习这种语法级别的东西，堆砌这种并没有什么意思的案例，真的很难引起初学者的兴趣。

很多线下的培训机构，包括大多数大学里的课程，就是这么做的。比如JAVA，一开始都会教着打印一个HelloWorld,然后中规中矩地讲解for循环，打印九九乘法表。

接着，一个必然会讲的东西就是冒泡排序，很多初学者在此卡壳，觉得JAVA怎么这么难啊！于是，他们开始自暴自弃，为了学而学，也不知道学了有什么用？

好不容易培训完了，工作了几年，突然发现，我好像从来没用到什么冒泡排序啊？

诚然，你不去当算法工程师，就算会了冒泡排序又怎样呢？算法这东西，需要时间的积累和技术的沉淀，我始终认为初学编程应该将重心放在方法的调用和兴趣的培养上面，最起码，必须得做点东西出来。基本的算法，时间长了自然会，初学者真没必要花太多的时间在算法上，逻辑思维清晰的话还好一些，如果不是呢，那么很可能就会在刚开始学编程的时候就产生烦躁的情绪，这实在是得不偿失。

好了，扯犊子结束了，下面开始愉快的编程之旅吧！

第一个案例，就做一个简单的音乐播放器吧。

目录结构

Paste_Image.png

如图，我已经在mp3文件夹内添加了两首歌，现在打开index.html，里面是一个简单的模板。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>音乐小站</title>
    </head>
    <body>
        
    </body>
    <script type="text/javascript">
        
    </script>
</html>

1. 利用audio标签渲染一个播放器

<audio src='mp3/1.mp3' controls=""></audio>

audio是h5的一个标签，以上代码表示创建了一个播放器，并且播放文件指向了1.mp3这首歌，controls代表使用浏览器自带的播放器界面。

Paste_Image.png

渲染效果如图，感觉还不错，点击左边的播放按钮就可以播放这首歌了哦。

2. 用js来控制音乐播放器

现在，我们不用浏览器自带的控制界面，单纯地用js来操作。因为自带的界面未必能满足我们的需要，比如上一首，下一首，歌词等等。

我们将这一行代码删除。

<audio src='mp3/1.mp3' controls=""></audio>

第一步. 用js来创建一个audio元素。

var musicDom = document.createElement('audio');

第二步. 加载一首音乐。

musicDom.src = 'mp3/2.mp3';

第三步. 播放音乐。

musicDom.play();

这样的话，当我们在此刷新页面，歌曲就会被自动播放。

第四步. 开始将基本的方法封装起来

一个音乐播放器，最基本的功能有： 1.初始化 2.添加歌曲 3.播放 4.暂停 5.下一首 6.上一首

var musicBox= {
    
    musicDom : null, //播放器对象
    songs : [],      //歌曲目录，用数组来存储
    
    //初始化音乐盒
    init : function(){
        this.musicDom = document.createElement('audio');
    },
    
    //添加一首音乐
    add : function(src){
        this.songs.push(src);
    },
    
    //根据数组下标决定播放哪一首歌
    play : function(index){
        this.musicDom.src = this.songs[index];
        this.musicDom.play();
    },
    
    //暂停音乐
    stop : function(){
        this.musicDom.pause();
    },
    
    //下一首（待编写）
    next : function(){
        
    },
    
    //上一首（待编写）
    prev : function(){
        
    }
}

我们将逻辑代码用一个json对象包裹了起来，对音乐播放器进行了简单的封装，这样看起来条理会比较清晰。其实，这已经是一个简单的js小插件了，不是吗？等以后做得比较完善的时候，我们完全可以将这个对象放到js文件里，作为一个js插件被其他页面来调用。

js基础我以后会专门开贴来总结，现在先就这么写下去吧。

封装插件也是学习js的一大乐趣呢！

好了，来测试一下吧:

musicBox.init(); //初始化
musicBox.add('mp3/1.mp3');
musicBox.add('mp3/2.mp3');
musicBox.play(0); //听第一首歌

刷新页面，虽然啥也没有，但是动听的音乐已然响起，我这边的第一首歌曲是火影忍者的主题曲，很带感哦。

第五步. 画一个样式吧！

这一步，我们来简单绘制一个播放器的样式，我尽可能写详细一点： css：

width: 200px;
height:300px;
background:#ccc;

html：

<div id='music' class='music'></div>

效果：

Paste_Image.png

接下来，让这个div盒子相对于body居中。

还记得上一节《js常用方法和一些封装》-- 时间相关（附案例详解）吗，里面就有一个现成的居中方法，还有获取元素的方法。现在我们拿过来直接用：

//让元素居中的方法
function _center(dom){
    dom.style.position = 'absolute';
    dom.style.top = '50%';
    dom.style.left = '50%';
    dom.style['margin-top'] = - dom.offsetHeight / 2 + 'px';
    dom.style['margin-left'] = - dom.offsetWidth / 2 + 'px';
}

//根据id获取元素
function dom(id){
    if(id.toString().indexOf('#') != -1) {
        id = id.replace('#','');
    }
    return document.getElementById(id);
};

调用

var musicDom = dom('#music');
_center(musicDom);

Paste_Image.png

成功居中了。

接下来，我们将颜色调深一点，然后加上一点圆角：

background:#333;
border-radius: 5px;

Paste_Image.png

再加上一点盒阴影：

box-shadow: 3px -3px 3px #666;

Paste_Image.png

这样就有一点阴影效果了。

下面，我们来绘制屏幕和按钮区：

css:

.music {
    width: 200px;
    height:300px;
    background:#333;
    border-radius: 5px;
    box-shadow: 3px -3px 3px #666;
    position: relative;
}
.music .screen {
    height:70%;
    width:96%;
    background: #ccc;
    margin-left:2%;
    margin-top: 2%;
}

.music .buttons {
    height:25%;
    width:96%;
    background: wheat;
    margin-left:2%;
    margin-top: 2%;
}

html：

<div id='music' class='music'>
    <div class='screen'></div>
    <div class='buttons'></div>
</div>

效果：

Paste_Image.png

我打算在屏幕区域加一个音乐的图标，顺便分享一下iconfont的使用吧。

番外：矢量图标icontont的使用

这是阿里巴巴的一个矢量图标库，打开官网：

http://www.iconfont.cn/

Paste_Image.png

点击所有公开库，搜索音乐，寻找我们需要的图标：：

Paste_Image.png

在搜索你喜欢的按钮：

Paste_Image.png

总之，你想要什么图标，直接搜索就可以了。

我随便挑了几个按钮，

Paste_Image.png

点击下载至本地，然后解压：

Paste_Image.png

Paste_Image.png

里面有一个demo.html页面，里面详细介绍了iconfont的使用方法。

Paste_Image.png

1.将如图框起来的文件拷贝到项目的css文件夹，引入css文件

  <link rel="stylesheet" type="text/css" href="css/iconfont.css"/>

2.现在我们引入这个图标

Paste_Image.png

<div id='music' class='music'>
    <div class='screen'>
        <i id='music-icon' class="iconfont"></i>
    </div>
    <div class='buttons'></div>
</div>

效果：

Paste_Image.png

](http://upload-images.jianshu.io/upload_images/1929342-3ea9916e3ae15311.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

成功了。

现在，我们还是要把这个小图标居中显示。

var musicIcon = dom('#music-icon');
_center(musicIcon);

Paste_Image.png

咦，好像不对哦，看样子是相对于最外面的music盒子居中定位了呢。

这是咋回事呢？通过这个小bug，可以引出一个定位的知识点。

原来，我们居中的原理是设置子元素的position为absolute，然后用top和left来实现的，如果父盒子没有设置position,那么子元素会一直往上找，直到碰上一个有position并且不是static的元素来做定位。

在这个案例中 ,<div id='music' class='music'></div>是有定位的，所以就相对于它居中了。

了解原因之后，我们来给屏幕区域加一个position吧！

问题来了，给它设置absolute还是relative呢？

先看看加absolute的效果吧：

position: absolute;

Paste_Image.png

靠，按钮去不见了，吓得我马上F12打开调试模式一探究竟。

Paste_Image.png

如图，原来是挤上去了呀。其实道理也很简单，当一个元素的position设置为absolute的时候，它就脱离文档流，也就是说不占位置了。所以下面的div元素就会挤上来。就这么简单。

而relative会保持之前的位置，不脱离文档流。

position: relative;

Paste_Image.png

成了，然后我们来调个色，把图标也弄得大一点。

.music {
    width: 200px;
    height:300px;
    background:#333;
    border-radius: 5px;
    box-shadow: 3px -3px 1px #666;
    position: relative;
}
.music .screen {
    height:70%;
    width:96%;
    background: linear-gradient(#403d3d,65%,#5f5b5b);
    margin-left:2%;
    margin-top: 2%;
    position: relative;
    
}

.music .screen i {
    color:#fff;
    font-size: 88px;
}

.music .buttons {
    height:25%;
    width:96%;
    margin-left:2%;
    margin-top: 2%;
}

Paste_Image.png

然后把按钮添加上去： css:

.music .screen i {
    color:#fff;
    font-size: 88px;
}

.music .buttons i {
    color:#fff;
    font-size: 24px;
        margin-left: 28px;
    position: relative;
    top:25px;
}

.music .buttons i:hover {
    cursor: pointer;
}

html:

<div id='music' class='music'>
    <div class='screen'>
        <i id='music-icon' class="iconfont"></i>
    </div>
    <div class='buttons'>
        <i id='prev' class="iconfont"></i>
        <i id='play' class="iconfont"></i>
        <i id='next' class="iconfont"></i>
    </div>
</div>

效果图：

Paste_Image.png

这是一套纯黑色系的皮肤，你也可以自己设置css样式来自定义喜欢的皮肤哦。

F12进入调试模式，像这样：

666.gif

你想要什么颜色都可以！

红色：

Paste_Image.png

蓝色：

Paste_Image.png

银色：

Paste_Image.png

土豪金：

Paste_Image.png

在下一节，我们尝试把各种皮肤封装到组件里。

时间不早了，今天只完成了一个模板，下次我们再聊吧！

勘误：

iconfont的图片编码没能正常显示，可能是markdown编辑器不支持吧。

Paste_Image.png

就是如图所示的编码，markdown编辑器没有正常显示出来，额，这个小细节就先忽略吧，嘿嘿。

本章结束 ...

剽悍一小兔，电气自动化毕业。参加工作后对计算机感兴趣，深知初学编程之艰辛。希望将自己所学记录下来，给初学者一点帮助。

免责声明：博客中所有的图片素材均来自百度搜索，仅供学习交流，如有问题请联系我，侵立删，谢谢。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2016.08.17 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度