調用酷狗搜索音樂播放API實例html頁面源碼

家好，今天給大家介紹一款，調用酷狗搜索音樂播放API實例html頁面源碼（圖1），實現搜索和音樂播放。送給大家哦，獲取方式在本文末尾，需要的朋友可以下載學習

圖1

搜索結構顯示后，點擊播放按鈕即可播放，同時會顯示歌詞，歌詞可以關閉，同時可以控制播放模式（圖2）

圖2

本模板編碼：10107，需要的朋友，點擊下面的鏈接后，搜索10107，即可獲取。

就愛UI - 分享UI設計的點點滴滴

接觸簡書也有一段日子了，這中間的時光還是比較輕松加愉快的，那種可以和他人分享知識的欣喜和愉悅的確是非常棒。我一向都是覺得專心寫自己的文就可以了，不會總是糾結有多少人在看，有多少點擊等等。用心寫好自己的文，體會那種分享的快樂，就可以了。

之前寫的《js常用方法和一些封裝》系列暫且告一段落，接下來，我會通過各種案例，來分享javascript的各種技巧，所以最終將這個系列的名稱定為：《從案例中學習JavaScript》,回想到自己初學編程時候的各種艱辛，買了很多書，然而這些書大多為泛泛而談，或者東拼西湊。市面上充斥著各種多少多少天從入門到精通的書籍，我曾經也花了好多大洋，滿懷信心地買了類似的書，結果我就零基礎從入門到蒙逼了。

經過幾年的摸索，我最終發現，知識點還是必須在工作中去練習才能真正的理解，或者通過一個具體的案例來融匯貫通。當然，我指的案例不是那種很多線下培訓機構為了講知識點而弄出來的案例。

比如這樣的：

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

這就是典型的為了講而講，案例非常枯燥不說，而且花費大量的時間來練習這種語法級別的東西，堆砌這種并沒有什么意思的案例，真的很難引起初學者的興趣。

很多線下的培訓機構，包括大多數大學里的課程，就是這么做的。比如JAVA，一開始都會教著打印一個HelloWorld,然后中規中矩地講解for循環，打印九九乘法表。

接著，一個必然會講的東西就是冒泡排序，很多初學者在此卡殼，覺得JAVA怎么這么難啊！于是，他們開始自暴自棄，為了學而學，也不知道學了有什么用？

好不容易培訓完了，工作了幾年，突然發現，我好像從來沒用到什么冒泡排序啊？

誠然，你不去當算法工程師，就算會了冒泡排序又怎樣呢？算法這東西，需要時間的積累和技術的沉淀，我始終認為初學編程應該將重心放在方法的調用和興趣的培養上面，最起碼，必須得做點東西出來?；镜乃惴ǎ瑫r間長了自然會，初學者真沒必要花太多的時間在算法上，邏輯思維清晰的話還好一些，如果不是呢，那么很可能就會在剛開始學編程的時候就產生煩躁的情緒，這實在是得不償失。

好了，扯犢子結束了，下面開始愉快的編程之旅吧！

第一個案例，就做一個簡單的音樂播放器吧。

目錄結構

如圖，我已經在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編輯器沒有正常顯示出來，額，這個小細節就先忽略吧，嘿嘿。

下音樂APP是一個非常好用的聽歌軟件，軟件的界面非常的清新，并且有著非常全面的曲庫，輸入要你聽的歌曲就可以下載無損格式，喜歡聽歌的用戶不要錯過。

軟件介紹

聽·下APP為大家準備了優質的音樂下載和搜索功能，可以讓你隨時欣賞最優美動聽的歌曲，可以根據自己的愛好來搜索音樂，聽下App可是當代年輕人最時尚的音樂平臺！

軟件特色

海量曲庫：千萬級正版高品質無損音樂，新歌熱歌天天更新

魔法調音：專業調音，完美修飾，讓你的作品更加完美

專屬歌房：線上轟趴KTV，足不出戶與好友歡聚互動零距離

直播秀場：海量網絡紅人與你面對面，和主播一起嗨翻天

私聊互動：聽怦然心動的聲音，私信結識完美聲音背后的TA

軟件功能

1.支持搜索，能根據歌名或者歌手為您搜索歌曲;

2.支持下載，可以快速解析選中的音樂;

3.支持歌詞顯示，可以提供歌曲的歌詞供您瀏覽;

4.支持自定義，主要是對下載進行的設置;

5.支持播放，直接播放選中的歌曲;

原文地址：http://www.3h3.com/az/181904.html

在線咨詢

上一篇：一文教你在華為云上部署Discuz論壇網站
下一篇：初識HTML，什么是HTML?

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。