整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
家好，今天給大家介紹一款，調(diào)用酷狗搜索音樂播放API實例html頁面源碼（圖1），實現(xiàn)搜索和音樂播放。送給大家哦，獲取方式在本文末尾，需要的朋友可以下載學習
圖1
搜索結(jié)構(gòu)顯示后，點擊播放按鈕即可播放，同時會顯示歌詞，歌詞可以關(guān)閉，同時可以控制播放模式（圖2）
圖2
本模板編碼：10107，需要的朋友，點擊下面的鏈接后，搜索10107，即可獲取。
就愛UI - 分享UI設(shè)計的點點滴滴
接觸簡書也有一段日子了，這中間的時光還是比較輕松加愉快的，那種可以和他人分享知識的欣喜和愉悅的確是非常棒。我一向都是覺得專心寫自己的文就可以了，不會總是糾結(jié)有多少人在看，有多少點擊等等。用心寫好自己的文，體會那種分享的快樂，就可以了。
之前寫的《js常用方法和一些封裝》系列暫且告一段落，接下來，我會通過各種案例，來分享javascript的各種技巧，所以最終將這個系列的名稱定為：《從案例中學習JavaScript》,回想到自己初學編程時候的各種艱辛，買了很多書，然而這些書大多為泛泛而談，或者東拼西湊。市面上充斥著各種多少多少天從入門到精通的書籍，我曾經(jīng)也花了好多大洋，滿懷信心地買了類似的書，結(jié)果我就零基礎(chǔ)從入門到蒙逼了。
經(jīng)過幾年的摸索，我最終發(fā)現(xiàn)，知識點還是必須在工作中去練習才能真正的理解，或者通過一個具體的案例來融匯貫通。當然，我指的案例不是那種很多線下培訓機構(gòu)為了講知識點而弄出來的案例。
比如這樣的：
for (var i = 0; i < 3 ; i ++) {
alert(i);
}
這就是典型的為了講而講，案例非常枯燥不說，而且花費大量的時間來練習這種語法級別的東西，堆砌這種并沒有什么意思的案例，真的很難引起初學者的興趣。
很多線下的培訓機構(gòu)，包括大多數(shù)大學里的課程，就是這么做的。比如JAVA，一開始都會教著打印一個HelloWorld,然后中規(guī)中矩地講解for循環(huán)，打印九九乘法表。
接著，一個必然會講的東西就是冒泡排序，很多初學者在此卡殼，覺得JAVA怎么這么難啊！于是，他們開始自暴自棄，為了學而學，也不知道學了有什么用？
好不容易培訓完了，工作了幾年，突然發(fā)現(xiàn)，我好像從來沒用到什么冒泡排序啊？
誠然，你不去當算法工程師，就算會了冒泡排序又怎樣呢？算法這東西，需要時間的積累和技術(shù)的沉淀，我始終認為初學編程應(yīng)該將重心放在方法的調(diào)用和興趣的培養(yǎng)上面，最起碼，必須得做點東西出來。基本的算法，時間長了自然會，初學者真沒必要花太多的時間在算法上，邏輯思維清晰的話還好一些，如果不是呢，那么很可能就會在剛開始學編程的時候就產(chǎn)生煩躁的情緒，這實在是得不償失。
好了，扯犢子結(jié)束了，下面開始愉快的編程之旅吧！
第一個案例，就做一個簡單的音樂播放器吧。
如圖，我已經(jīng)在mp3文件夾內(nèi)添加了兩首歌，現(xiàn)在打開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的一個標簽，以上代碼表示創(chuàng)建了一個播放器，并且播放文件指向了1.mp3這首歌，controls代表使用瀏覽器自帶的播放器界面。
渲染效果如圖，感覺還不錯，點擊左邊的播放按鈕就可以播放這首歌了哦。
2. 用js來控制音樂播放器
現(xiàn)在，我們不用瀏覽器自帶的控制界面，單純地用js來操作。因為自帶的界面未必能滿足我們的需要，比如上一首，下一首，歌詞等等。
我們將這一行代碼刪除。
<audio src='mp3/1.mp3' controls=""></audio>
第一步. 用js來創(chuàng)建一個audio元素。
var musicDom = document.createElement('audio');
第二步. 加載一首音樂。
musicDom.src = 'mp3/2.mp3';
第三步. 播放音樂。
musicDom.play();
這樣的話，當我們在此刷新頁面，歌曲就會被自動播放。
第四步. 開始將基本的方法封裝起來
一個音樂播放器，最基本的功能有：
1.初始化
2.添加歌曲
3.播放
4.暫停
5.下一首
6.上一首
var musicBox= {
musicDom : null, //播放器對象
songs : [], //歌曲目錄，用數(shù)組來存儲
//初始化音樂盒
init : function(){
this.musicDom = document.createElement('audio');
},
//添加一首音樂
add : function(src){
this.songs.push(src);
},
//根據(jù)數(shù)組下標決定播放哪一首歌
play : function(index){
this.musicDom.src = this.songs[index];
this.musicDom.play();
},
//暫停音樂
stop : function(){
this.musicDom.pause();
},
//下一首（待編寫）
next : function(){
},
//上一首（待編寫）
prev : function(){
}
}
我們將邏輯代碼用一個json對象包裹了起來，對音樂播放器進行了簡單的封裝，這樣看起來條理會比較清晰。其實，這已經(jīng)是一個簡單的js小插件了，不是嗎？等以后做得比較完善的時候，我們完全可以將這個對象放到j(luò)s文件里，作為一個js插件被其他頁面來調(diào)用。
js基礎(chǔ)我以后會專門開貼來總結(jié)，現(xiàn)在先就這么寫下去吧。
封裝插件也是學習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居中。
還記得上一節(jié)《js常用方法和一些封裝》-- 時間相關(guān)（附案例詳解）嗎，里面就有一個現(xiàn)成的居中方法，還有獲取元素的方法。現(xiàn)在我們拿過來直接用：
//讓元素居中的方法
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';
}
//根據(jù)id獲取元素
function dom(id){
if(id.toString().indexOf('#') != -1) {
id = id.replace('#','');
}
return document.getElementById(id);
};
調(diào)用
var musicDom = dom('#music');
_center(musicDom);
成功居中了。
接下來，我們將顏色調(diào)深一點，然后加上一點圓角：
background:#333; border-radius: 5px;
再加上一點盒陰影 ：
box-shadow: 3px -3px 3px #666;
Paste_Image.png
這樣就有一點陰影效果了。
下面，我們來繪制屏幕和按鈕區(qū)：
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
我打算在屏幕區(qū)域加一個音樂的圖標，順便分享一下iconfont的使用吧。
番外：矢量圖標icontont的使用
這是阿里巴巴的一個矢量圖標庫，打開官網(wǎng)：
點擊所有公開庫，
搜索音樂，尋找我們需要的圖標：：
在搜索你喜歡的按鈕：
總之，你想要什么圖標，直接搜索就可以了。
我隨便挑了幾個按鈕，
點擊下載至本地，然后解壓：
里面有一個demo.html頁面，里面詳細介紹了iconfont的使用方法。
1.將如圖框起來的文件拷貝到項目的css文件夾，引入css文件
<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
2.現(xiàn)在我們引入這個圖標
<div id='music' class='music'> <div class='screen'> <i id='music-icon' class="iconfont"></i> </div> <div class='buttons'></div> </div>
效果：
現(xiàn)在，我們還是要把這個小圖標居中顯示。
var musicIcon = dom('#music-icon');
_center(musicIcon);
咦，好像不對哦，看樣子是相對于最外面的music盒子居中定位了呢。
這是咋回事呢？通過這個小bug，可以引出一個定位的知識點。
原來，我們居中的原理是設(shè)置子元素的position為absolute，然后用top和left來實現(xiàn)的，如果父盒子沒有設(shè)置position,那么子元素會一直往上找，直到碰上一個有position并且不是static的元素來做定位。
在這個案例中 ,<div id='music' class='music'></div>是有定位的，所以就相對于它居中了。
了解原因之后，我們來給屏幕區(qū)域加一個position吧！
問題來了，給它設(shè)置absolute還是relative呢？
先看看加absolute的效果吧：
position: absolute;
靠，按鈕去不見了，嚇得我馬上F12打開調(diào)試模式一探究竟。
如圖，原來是擠上去了呀。其實道理也很簡單，當一個元素的position設(shè)置為absolute的時候，它就脫離文檔流，也就是說不占位置了。所以下面的div元素就會擠上來。就這么簡單。
而relative會保持之前的位置，不脫離文檔流。
position: relative;
成了，然后我們來調(diào)個色，把圖標也弄得大一點。
.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>
效果圖：
這是一套純黑色系的皮膚，你也可以自己設(shè)置css樣式來自定義喜歡的皮膚哦。
F12進入調(diào)試模式，像這樣：
你想要什么顏色都可以！
紅色：
藍色：
銀色：
土豪金：
在下一節(jié)，我們嘗試把各種皮膚封裝到組件里。
時間不早了，今天只完成了一個模板，下次我們再聊吧！
勘誤：
iconfont的圖片編碼沒能正常顯示，可能是markdown編輯器不支持吧。
就是如圖所示的編碼，markdown編輯器沒有正常顯示出來，額，這個小細節(jié)就先忽略吧，嘿嘿。
下音樂APP是一個非常好用的聽歌軟件，軟件的界面非常的清新，并且有著非常全面的曲庫，輸入要你聽的歌曲就可以下載無損格式，喜歡聽歌的用戶不要錯過。
聽·下APP為大家準備了優(yōu)質(zhì)的音樂下載和搜索功能，可以讓你隨時欣賞最優(yōu)美動聽的歌曲，可以根據(jù)自己的愛好來搜索音樂，聽下App可是當代年輕人最時尚的音樂平臺！
海量曲庫：千萬級正版高品質(zhì)無損音樂，新歌熱歌天天更新
魔法調(diào)音：專業(yè)調(diào)音，完美修飾，讓你的作品更加完美
專屬歌房：線上轟趴KTV，足不出戶與好友歡聚互動零距離
直播秀場：海量網(wǎng)絡(luò)紅人與你面對面，和主播一起嗨翻天
私聊互動：聽怦然心動的聲音，私信結(jié)識完美聲音背后的TA
1.支持搜索，能根據(jù)歌名或者歌手為您搜索歌曲;
2.支持下載，可以快速解析選中的音樂;
3.支持歌詞顯示，可以提供歌曲的歌詞供您瀏覽;
4.支持自定義，主要是對下載進行的設(shè)置;
5.支持播放，直接播放選中的歌曲;
原文地址：http://www.3h3.com/az/181904.html
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
