从案例中学习JavaScript，酷炫音乐播放器，先

从案例中学习JavaScript，酷炫音乐播放器，先完成了一个模板

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

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

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

比如这样的：

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

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

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

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

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

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

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

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

目录结构

如图，我已经在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代表使用浏览器自带的播放器界面。

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

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>

效果：

接下来，让这个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);

成功居中了。

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

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

再加上一点盒阴影：

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的使用

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

点击所有公开库，

搜索音乐，寻找我们需要的图标：：

在搜索你喜欢的按钮：

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

我随便挑了几个按钮，

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

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

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

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

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

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

效果：

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

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

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

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

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

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

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

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

先看看加absolute的效果吧：

position: absolute;

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

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

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

position: relative;

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

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

然后把按钮添加上去：

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>

效果图：

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

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

你想要什么颜色都可以！

红色：

蓝色：

银色：

土豪金：

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

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

勘误：

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

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

avaScript 使 HTML 页面具有更强的动态和交互性。

在线实例

插入一段脚本

如何将脚本插入 HTML 文档。

使用 <noscript> 标签

如何应对不支持脚本或禁用脚本的浏览器。

HTML <script> 标签

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

下面的脚本会向浏览器输出"Hello World!"：

实例

Tip: 学习更多关于Javascript教程，请查看JavaScript 教程!

HTML<noscript> 标签

只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：

实例

JavaScript体验(来自本站javascript教程)

JavaScript实例代码:

JavaScript可以直接在HTML输出:

document.write("<p>这是一个段落。</p>");

JavaScript事件响应:

<buttontype="button"onclick="myFunction()">点我！</button>

JavaScript处理 HTML 样式:

document.getElementById("demo").style.color="#ff0000";

HTML 脚本标签

标签	描述
<script>	定义了客户端脚本
<noscript>	定义了不支持脚本浏览器输出的文本

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

HTML DOM (文档对象模型)

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树：

HTML DOM 树

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素

通过 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

本例查找 id="intro" 元素：

实例

var x=document.getElementById("intro");

如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。

如果未找到该元素，则 x 将包含 null。

通过标签名查找 HTML 元素

本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素：

实例

var x=document.getElementById("main");

var y=x.getElementsByTagName("p");

通过类名找到 HTML 元素

本例通过 getElementsByClassName 函数来查找 class="intro" 的元素：

实例

var x=document.getElementsByClassName("intro");

HTML DOM 后篇

我会接着介绍：

如何改变 HTML 元素的内容 (innerHTML)
如何改变 HTML 元素的样式 (CSS)
如何对 HTML DOM 事件对出反应
如何添加或删除 HTML 元素

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

在线咨询

上一篇：对微前端的11个错误认识
下一篇：JavaScript正则获取字符串括号内的内容

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

从案例中学习JavaScript，酷炫音乐播放器，先

目录结构

您的项目需求