從案例中學習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，酷炫音樂播放器，先

目錄結構

您的項目需求