2. 程式人生 > >實現簡單的自定義音樂播放器

實現簡單的自定義音樂播放器

阿新 • • 發佈：2019-02-03
這篇部落格只是記錄自己寫的js外掛，著重點在於js，而不是css或者html。所以在js方面會比較詳細，而其他的就只是簡單提提。

剛學前端js那會，只是應付式的把書看完了，demo也沒寫幾個。碰巧這學期的網頁設計課程接近期末，老師要求要完成一個期末設計。好吧，就拿它來練練手了。just do it，搞起。這段時間對音樂和MV比較感興趣，於是就打算做一個分享音樂、MV的分享網站。要想做這樣一個網站有樣東西是必須要完成的，沒錯，就是一個有特色的播放器。

一：首先看看別人家（QQ音樂）的播放器：


分析：（1）：先提取出別人家播放器的幾個功能。

1、播放/暫停 

2、左右切換歌曲 

3、調節音量

4、迴圈方式

5、彈出歌曲列表

6、顯示音樂資訊（專輯圖片、歌手、歌名）

7、彈出/收起 播放器

8、顯示播放進度條

（2）：再看佈局

這只是我自己簡單的分析，並沒有根據它的原始碼來分析（好像有點不負責任），所以佈局可能與它程式碼實現的佈局會有點出入。但最後的效果是一樣的就沒多大關係。

二：分析自己的簡單播放器

既然是簡單的，那麼就不需要把別人家播放器的所有功能完成，當然，如果想做的話還是可以的。

（1）簡單版本的播放器的功能。

1、彈出/收起 播放器

2、左右切換歌曲 

3、播放/暫停 

4、顯示音樂資訊（專輯圖片、歌手、歌名）

（2）佈局。功能的減少，意味著按鈕的減少，所以佈局相比會比較簡單。畢竟是簡單版本的嘛。。呵呵

不知道看懂了沒有，畢竟每個程式猿都是靈魂畫師...還是上最後的效果圖，和設計圖作對比吧。

三：程式碼實現

根據上面的設計圖，用程式碼實現佈局

html程式碼：

<!--開始設定播放器-->
<div class="playutil">
    <audio id="aud" src="source/MyLove.mp3"></audio>
    <div class="playtouming"></div>
    <!--開始設定佈局-->
    <!-- 專輯圖片-->
    <div class="songimgdiv"><img src="img/songimg.jpg"/></div>
    <!--播放按鈕-->
    <div class="control">
        <p id="musicinfo">My Love - mylover</p>
        <div class="buttons">
            <a id="nextleftbtn" onMouseOver="overchangleft()" onMouseOut="outchangleft()" onclick="nextleft()">
		<img id="leftbutton" src="img/pleft.png"/>
	    </a>
            <a id="playbtn" onMouseOver="overchangplay()" onMouseOut="outchangplay()" onclick="musicplay()">
		<img id="playbutton" src="img/pplay.png"/>
	    </a>
            <a id="nextrightbtn" onMouseOver="overchangright()" onMouseOut="outchangright()" onclick="nextright()">
		<img id="rightbutton" src="img/pright.png"/>
	    </a>
        </div>
    </div>
    <!--右邊開關按鈕-->
    <div class="playdivbtn">
        <a id="on" onclick="onutil()"><img src="img/right.png"/></a>
        <a id="off" onclick="offutil()"><img src="img/left.png"/></a>
    </div>
</div>


這裡說明一下，這個自定義播放器是基於html5的一個<audio>標籤完成的，所以這個標籤是必須的。而且我想做一個透明的效果，所以在裡面放置了一個class=playtouming的<div>。目前只有這種方案實現透明效果。具體的可以查詢其他資料。

css程式碼

.onutil {  
    transition: left ease .5s;  
    left: 0px;  
}  
.offutil{
    transition:left ease .5s;
    left: -462px;
}
.playutil {  
    z-index: 100;  
    position: fixed;  
    bottom: 125px;  
    left: -462px;  
    width: 485px;  
    height: 115px;  
    border: 1px solid #433B38;  
    border-radius: 0px 4px 4px 0px;  
    box-shadow: 3px 3px 5px 3px rgba(0, 0, 0, 0.5);  
}  
.playutil .playtouming {  
    width: 485px;  
    height: 115px;  
    opacity: 0.85;  
    filter: alpha(opacity=85);  
    background-color: #433B38;  
}  
  
.songimgdiv {  
    position: absolute;  
    top: 0px;  
    margin: 8px;  
    margin-left: 20px;  
    border: 1px solid #433B38;  
    border-radius: 4px;  
    box-shadow: 1px 1px 2px 2px rgba(255, 255, 255, 0.3);  
}  
.control {  
    position: absolute;  
    top: 0px;  
    left: 130px;  
    width: 330px;  
}  
.control>p {  
    width: 330px;  
    text-align: center;  
    margin: 15px auto;  
    color: #FFFFFF;  
    size: 5px;  
}  
.buttons {  
    text-align: center;  
}  
.buttons a {  
    margin: 0px 15px;  
}  
.playdivbtn {  
    width: 23px;  
    position: absolute;  
    top: 0px;  
    right: 0px;  
}

這裡首先根據每一個功能來分析一下實現的思路。

前提，為了實現彈出/收起 播放器功能，添加了兩個按鈕。但這樣子網頁一載入完就會出現兩個按鈕（有一個在它下面），所以添加了一個方法，當網頁載入完時讓收起按鈕隱藏，這時播放器是收起狀態。

1、彈出/收起 播放器

給最右側的播放器開關按鈕點選事件，當播放器是收起的狀態時點選，給它新增一個onutil樣式(具體是什麼可以看上面的css)，然後替換按鈕圖片為收起按鈕。當播放器是開啟狀態時，先把onutil樣式去掉，再給它新增offutil樣式，再替換掉開關按鈕圖片。

2、左右切換歌曲&& 顯示音樂資訊（專輯圖片、歌手、歌名）

因為這是純前端的外掛，所以歌曲本身不是從後臺獲取的。為了模擬這樣的情況就先把歌曲路徑放到一個數組裡，歌曲存放在source的資料夾下。當切換歌曲時，有三樣東西是需要改變的。一是歌曲，二是歌曲專輯圖片（我這裡沒做..），三是歌曲資訊。所以點選切換歌曲按鈕時，首先判斷下標是否越界，越界的話置0，讓它從第一首歌曲開始播放。從數組裡獲取路徑後，改變<audio>獲取歌曲的路徑，然後改變歌曲資訊。當然，如果要改變專輯圖片的話還要改變圖片路徑。

3、播放/暫停 

這個功能比較簡單實現，就是給播放/暫停按鈕點選事件，這個方法裡面要做的就是改變<audio>的播放狀態，然後替換按鈕圖片。

這裡還實現了一個效果，就是滑鼠經過按鈕時都會發亮。其實就是替換了圖片，給所有按鈕新增滑鼠經過事件，再換圖片OK了。以上都是簡單地說一下實現的思路，具體的實現方法還是主要看氣質，不不不，錯了。主要看程式碼！

js程式碼：

    <script type="text/javascript">
        $(document).ready(function(){
            $("#off").hide();
            $("#stopbtn").hide();
        });
    </script>
	var musicarray=new Array();
    var musicIndex=0;
    musicarray[0]="source/MyLove.mp3;-mylover";
    musicarray[1]="source/Clean.mp3;-Taylor";
    musicarray[2]="source/Gentleman.mp3;-unknown"
    //播放器div
    function onutil() {
        $(".playutil").removeClass("offutil");
        $(".playutil").addClass("onutil");
        $("#on").hide();
        $("#off").show();
    }
    function offutil() {
        $(".playutil").removeClass("onutil");
        $(".playutil").addClass("offutil");
        $("#off").hide();
        $("#on").show();
    }
    //播放器控制元件
    function musicplay() {
        var audio=document.getElementById('aud');
        if(audio.paused){
            audio.play();
            document.getElementById("playbutton").src="img/pstop.png";
        }else{
            audio.pause();
            document.getElementById("playbutton").src="img/pplay.png";
        }
    }

    //改變滑鼠經過時圖片
    function overchangleft() {
        document.getElementById("leftbutton").src="img/pleft_hover.png";
    }
    function overchangplay() {
        var audio=document.getElementById('aud');
        if(audio.paused) {
            document.getElementById("playbutton").src = "img/pplay_hover.png";
        }else{
            document.getElementById("playbutton").src = "img/ppstop_hover.png";
        }
    }
    function overchangright() {
        document.getElementById("rightbutton").src="img/pright_hover.png";
    }
    function outchangleft() {
        document.getElementById("leftbutton").src="img/pleft.png";
    }
    function outchangplay() {
        var audio=document.getElementById('aud');
        if(audio.paused) {
            document.getElementById("playbutton").src = "img/pplay.png";
        }else{
            document.getElementById("playbutton").src = "img/pstop.png";
        }
    }
    function outchangright() {
        document.getElementById("rightbutton").src="img/pright.png";
    }
    //上一首
    function nextleft() {
        if(musicIndex-1<0){
            var audio=document.getElementById('aud');
            audio.src=musicarray[musicarray.length-1].split(";")[0];
            audio.play();
            musicIndex=musicarray.length-1;
            $("#musicinfo").text(musicarray[musicIndex].split(";")[0].split("/")[1].split(".")[0]+musicarray[musicIndex].split(";")[1]);
            document.getElementById("playbutton").src="img/pstop.png";
        }else{
            var audio=document.getElementById('aud');
            audio.src=musicarray[musicIndex-1].split(";")[0];
            audio.play();
            musicIndex-=1;
            $("#musicinfo").text(musicarray[musicIndex].split(";")[0].split("/")[1].split(".")[0]+musicarray[musicIndex].split(";")[1]);
            document.getElementById("playbutton").src="img/pstop.png";
        }
    }
    //下一首
    function nextright(){
        if(musicIndex+1>=musicarray.length){
            var audio=document.getElementById('aud');
            audio.src=musicarray[0].split(";")[0];
            audio.play();
            musicIndex=0;
            $("#musicinfo").text(musicarray[musicIndex].split(";")[0].split("/")[1].split(".")[0]+musicarray[musicIndex].split(";")[1]);
            document.getElementById("playbutton").src="img/pstop.png";
        }else{
            var audio=document.getElementById('aud');
            audio.src=musicarray[musicIndex+1].split(";")[0];
            audio.play();
            musicIndex+=1;
            $("#musicinfo").text(musicarray[musicIndex].split(";")[0].split("/")[1].split(".")[0]+musicarray[musicIndex].split(";")[1]);
            document.getElementById("playbutton").src="img/pstop.png";
        }
    }

四：結尾

這個自定義的播放器功能還是比較簡單的，實現起來也不算複雜。所以有興趣的可以繼續完善。最後希望一起努力，不忘初心。

相關推薦

實現簡單的自定義音樂播放器

這篇部落格只是記錄自己寫的js外掛，著重點在於js，而不是css或者html。所以在js方面會比較詳細，而其他的就只是簡單提提。 剛學前端js那會，只是應付式的把書看完了，demo也沒寫幾個。碰巧這學期的網頁設計課程接近期末，老師要求要完成一個期末設計。好吧，就拿它來練

Android 自定義音樂播放器實現

Android自定義音樂播放器一：首先介紹用了哪些Android的知識點：1 MediaPlayer工具來播放音樂2 Handle。因為存在定時任務(歌詞切換，動畫，歌詞進度條變換等)需要由Handle來處理Ui相關內容3 動態許可權申請(該應用程式讀取本地歌曲，並且設定音質

從零實現一個自定義html5播放器

寫在最前 本次的分享是一個基於HTML5<vedio>標籤實現的一個自定義視訊播放器。其中實現了播放暫停、進度拖拽、音量控制及全屏等功能。 歡迎關注我的部落格，不定期更新中—— 效果預覽 點我檢視原始碼倉庫。 核心思路 我相信一定會有些沒有接觸過製作自定義播放器的童鞋對於<vedio&

jquery實現--自定義視訊播放器

html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid

QT5:C++實現基於Multimedia的音樂播放器（序）

播放列表 nbsp eight 自帶 讀取 set 技術 strong ati 前段時間C++課設，決定做個播放器，於是參考了網上的代碼後，做了個很簡陋的音樂播放器（只寫了MP3格式）出來，雖然功能甚少，但還是決定把過程記錄一下。 成品如下圖： 播放器功能： 上、下一首

QT5:C++實現基於multimedia的音樂播放器（二）

彈框 rem tooltip loop dialog ets posit list sch 今天接著上一篇來實現播放器的槽函數。 先來實現播放模式，槽函數如下： 1 //播放模式 2 void Music::musicPlayPattern() 3 { 4

零基礎實現網易雲音樂播放器

循環 case phone width shadow rec pda user res H5增加了很多的標簽，面試的時候，如果面試官問你H5都有哪些新標簽，你回答header、footer、nav。這麽回答幾乎是無效的，因為這些標簽在H5裏面的角色，相當於雞骨頭、魚刺、蘑菇

使用VBA代碼實現簡單自定義函數（1）

分享圖片 excel表格 style 實現 圖片 ima 我們 text inf 自定義函數VBA代碼1 有一份數據如下，要添加季度信息，我們用VBA實現自定義季度函數： 打開VBE編輯器，插入一個函數 代碼如下： 此時返回excel表格出現了我們自定義的函數如下：

Android使用Vitamio框架自定義視訊播放器

        做過Android視訊播放器的碼農們都或多或少知道自帶的VideoView用著沒有那麼順心。需要處理很多東西。於是就各種度娘、Google。終於皇天不負苦心人。找到了一個卻又不大符合。無奈，想自己動手寫吧！又浪

Android自定義視訊播放器(網路/本地)

最近因公司專案要求需要寫一個播放器，自帶的又不太好用，也不太好看。自能自定義啦。查看了很多資料，都沒有完善的，還好得以為前輩的指點得以完成，感謝Yang。本篇裡面我有可能有些地方寫得不好(都附上了註釋)。希望各路大神指點，虛心受教。 先來個圖(原始碼在後面附上) 視訊列表裡面

JVM:如何實現一個自定義類載入器？

為什麼要自定義載入器 原因： 1、存放在自定義路徑上的類，需要通過自定義類載入器去載入。【注意：AppClassLoader載入classpath下的類】 2、類不一定從檔案中載入，也可能從網路中的流中載入，這就需要自定義載入器去實現加密解密。 3、可以定義類的實現機制，實現類的熱部署,

HTML5+CSS3+JQuery打造自定義視訊播放器

簡介 HTML5的<video>標籤已經被目前大多數主流瀏覽器所支援，包括還未正式釋出的IE9也宣告將支援<video>標籤，利用瀏覽器原生特性嵌入視訊有很多好處，所以很多開發者想盡快用上，但是真正使用前還有些問題要考慮，尤其是 Opera/Fir

Android自定義視訊播放器（三）

一、引言 在上文中，我們通過自定義控制面板的佈局，來實現自定義的播放控制，下面來對裡面的各個元件進行事件繫結。 @Override public void onClick(View v) { if ( v == btnVoice ) {

基於HTML5自定義媒體播放器

簡要說明 顯示播放時間、可操控進度條，播放視訊是通過拖拽媒體檔案到播放器中即可播放。 注：上一曲、下一曲未實現。 素材 效果圖 style.css檔案 .mediaplayer { height

android surfaceView+mediaPlayer 自定義視訊播放器

Android 視訊播放一般分為兩種（其實3種，還一種是調Android自帶播放器）： 1.使用Android自帶View VideoView ,其中一些功能，已經都給實現好了(此view一般不滿足自己的需求，比如：介面啊，控制啊，以及可能還有手勢控制音量，手勢控制亮度等等

Android自定義視訊播放器（六）

一、引言 現在已經差不多完成了一個自定義的視訊播放器，還有一個讓視訊全屏播放的按鈕事件沒有繫結，下面會介紹。此外還要一個非常重要的功能就是，已經寫好了自定義的播放器，那麼就應該能被其他應用調起，來播放視訊，下面來完善這兩個功能。 二、全屏按鈕事件

Android自定義視訊播放器（一）

一、引言 我們在開發Android多媒體應用時，有兩種方式來播放多媒體資源。第一種是使用隱式的Intent，來使用系統或者手機已經安裝的第三方播放器應用來播放音視訊，第二種是使用Android自帶的、我們自定義的播放器來播放，這種主要是採用Android提供的

Swift 實現簡單自定義TableViewCell

自定義cell其實還是比較簡單的，個人理解，直接把自己需要的控制元件新增為子檢視就行了。 下面直接給出簡單程式碼塊： TableViewCell.swift程式碼塊如下： class TableViewCell: UITableViewCell { var t

[HTML5]簡單網頁本地音樂播放器

     既然HTML5提出與本地互動方便，就想寫個HTML5的本地音樂播放器。一開始問題主要集中在怎麼讀取本地檔案路徑，我想肯定可以用JS實現去操作本地檔案（因為node.js很容易實現讀取本地檔案，但是原生JS怎麼寫不太清楚），不過簡單一點就用<input typ

一步步自定義視訊播放器——使用SurfaceView播放視訊

Surface Surface與SurfaceView這篇文章對Surface和SurfaceView做了很詳細的解釋。 簡單的說Surface對應了一塊螢幕緩衝區，每個window對應一個Surface，任何View都要畫在Surface的Canvas上。