實戰React音樂播放器

阿新 • • 發佈：2018-12-30

上篇文章《一步一步實戰HTML音樂播放器》中，我用HTML+JS + CSS的方式一步步實現了一個音樂播放器，因為最近接觸了一下React，感覺挺不錯的，在這裡我用React的方式實現一個同樣的音樂播放器。

播放器功能

自動顯示專輯圖片、歌手名、歌曲名、專輯名
顯示播放器進度條
音樂播放暫停、上一曲、下一曲
實時顯示播放時間、播放總長度
歌曲播放完後，自動切換下一曲

播放器效果

React 環境準備

在這個小專案中，不再使用傳統的構建React的方式來搭建環境了，這裡用一種很方便的小工具來實現環境的搭建。

在Node.js環境下執行如下命令，安裝一下create-react-app，並建立musicPlayer專案：

npm install -g create-react-app
create-react-app musicPlayer
cd musicPlayer
npm start

執行完後後，工具會自動開啟瀏覽器來顯示這個專案的內容，效果如下：

這裡我用到的是src目錄，首先把src目錄的內容全部刪除，我們一點一點的來編寫專案程式碼。

引入必要檔案

因為系統預設將index.js作為入口檔案，所以我們要先在src下建立index.js檔案，所有程式碼也是在這個檔案中編寫。

先在index.js中引入一些必要的檔案：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.min.css';

index.min.css是播放器的樣式檔案，這裡主要說React，這個樣式檔案的詳細說明可以參考《一步一步實戰HTML音樂播放器》

建立播放器容器元件

var Player = React.createClass({

    render: function() {        
        return (
            <div 
 className="player">
                {/* 各類子組建……  */}
            </div>
        );
    }

});

子組建我們下面會一一建立，這裡先用做一下佔位說明。

頁面渲染

ReactDOM.render(
    <Player />,
    document.getElementById('root')
);

容器內的各類元件

根據播放器結構，建立如下元件：

var Player = React.createClass({

    render: function() {        
        return (
            <div className="player">
                {/* 播放器名稱  */}
                <div className="header">音樂播放器.React版</div>              

                {/* 音樂資訊  */}
                <TrackInfo />

                {/* 播放進度條   */}
                <Progress />

                {/* 播放控制  */}
                <Controls />

                {/* 播放時間   */}
                <Time />

                {/* 音訊控制元件  */}
                <audio id="audio"></audio>
            </div>
        );
    }

});

初始化STATE，PROPS

根據需求，進行狀態和屬性的建立。

這裡歌單就手動製作一個了，把這個歌單寫的props中，用於系統的呼叫：

    getDefaultProps: function() {
        //歌單列表
        return{
            "tracks": [
            {
                "name": "元日",
                "artists": [
                    {
                        "name": "於文華",
                    }
                ],
                "album": {
                    "name": "國學唱歌集",
                    "picUrl": "http://p3.music.126.net/SR9eFEjRB0NsscxN7-fHMw==/3344714372906000.jpg",                    
                },
                "duration": 136829,
                "mp3Url": "http://m2.music.126.net/rUcfqqZbq7TIfJeAHfTrkw==/3376600210116829.mp3"
            },
            {
                "name": "元日 ",
                "artists": [
                    {
                        "name": "清弄",
                    }
                ],
                "album": {
                    "name": "熱門華語261",
                    "picUrl": "http://p4.music.126.net/ly2FJHh5-lYMdC3NZxvavQ==/7714173580661848.jpg",
                },
                "duration": 109000,
                "mp3Url": "http://m2.music.126.net/jwwZVlWJ78HEarft42uKUQ==/7906588115920636.mp3"
            },
            {
                "name": "青龍·花木蒼蒼",
                "artists": [
                    {
                        "name": "五色石南葉",
                    }
                ],
                "album": {
                    "name": "熱門華語234",
                    "picUrl": "http://p4.music.126.net/tHAfnugCElS93EDp5cHLIw==/8909342719897560.jpg",
                },
                "duration": 295575,
                "mp3Url": "http://m2.music.126.net/rnq_W32zFX_utQbBhE0xkg==/8934631487358481.mp3"
            }]
        }   
    },

接著初始化一下播放器的狀態：

    //初始化狀態
    getInitialState: function() {
        return{
            currentTrackLen: this.props.tracks.length, //歌單歌曲數
            currentTrackIndex: 0, //當前播放的歌曲索引，預設載入第一首歌
            currentTime: 0, //當前歌曲播放的時間
            currentTotalTime: 0, //當前歌曲的總時間
            playStatus: true, //true為播放狀態，false為暫停狀態        
        }
    },

建立子元件

TrackInfo元件

var TrackInfo = React.createClass({
    render: function() {
        return(
        <div>
        <div className="albumPic" style={{'backgroundImage':'url('+ this.props.track.album.picUrl +')'}}></div>
        <div className='trackInfo'>
            <div className="name">{this.props.track.name}</div>
            <div className="artist">{this.props.track.artists[0].name}</div>
            <div className="album">{this.props.track.album.name}</div>          
        </div>
        </div>
        );
    }
});

在Player容器中的標籤修改為：

{/* 音樂專輯  */}
<TrackInfo track={this.props.tracks[this.state.currentTrackIndex]} />

Progress元件

var Progress = React.createClass({
    render: function(){
        return  (
            <div className="progress" style={{'width':this.props.progress}}></div>
        )
    }
});

在Player容器中的標籤修改為：

{/* 播放進度條   */}
<Progress progress={this.state.currentTime / this.state.currentTotalTime * 100 + '%'} />

通過當前時間和總時間來計算播放百分百。

Controls元件

var Controls = React.createClass({
    render: function(){
        let className;
        if(this.props.isPlay == true){
            className = 'icon-pause';
        }else{
            className = 'icon-play';
        }
        return (
        <div className="controls">
            <div className="play" onClick={this.props.onPlay}>
                <i className={className}></i>
            </div>
            <div className="previous" onClick={this.props.onPrevious}>
                <i className="icon-previous"></i>
            </div>
            <div className="next" onClick={this.props.onNext}>
                <i className="icon-next"></i>
            </div>
        </div>              
        )
    }
});

通過isPlay來控制播放按鈕圖示的顯示。

在Player容器中的標籤修改為：

{/* 播放控制  */}
<Controls isPlay={this.state.playStatus} onPlay={this.play} onPrevious={this.previous} onNext={this.next} />

Time元件

var Time = React.createClass({
    timeConvert: function(timestamp){
        var minutes = Math.floor(timestamp / 60);
        var seconds = Math.floor(timestamp - (minutes * 60));

        if(seconds < 10) {
          seconds = '0' + seconds;
        }

        timestamp = minutes + ':' + seconds;
        return timestamp;
    },  
    render:function() {
        return(
        <div className="time">
            <div className="current">{this.timeConvert(this.props.currentTime)}</div>
            <div className="total">{this.timeConvert(this.props.currentTotalTime)}</div>
        </div>          
        );
    }
});

timeConvert做為一個時間轉換顯示來用。

在Player容器中的標籤修改為：

{/* 播放時間   */}
<Time currentTime={this.state.currentTime} currentTotalTime={this.state.currentTotalTime} />

audio標籤

audio這裡不需要在建立元件了，修改一下在Player中的標記就行：

{/* 音訊控制元件  */}
<audio id="audio" src={this.props.tracks[this.state.currentTrackIndex].mp3Url}></audio>

事件處理方法

建立updatePlayStatus方法用於更新播放器的狀態：

    //更新播放狀態
    updatePlayStatus: function(){
        let audio = document.getElementById('audio');
        if(this.state.playStatus){
            audio.play();
        }else{
            audio.pause();
        }

        //更新當前歌曲總時間
        this.setState({currentTotalTime: this.props.tracks[this.state.currentTrackIndex].duration / 1000});
    },

建立三個播放控制按鈕的事件方法：

    //播放事件處理
    play:function(){
        //這裡有setState是非同步的，需要在回撥中執行
        this.setState({playStatus:!this.state.playStatus}, ()=>{
            this.updatePlayStatus();
        });
    },

    //上一曲事件處理
    previous:function(){
        if(this.state.currentTrackIndex - 1 < 0){
            alert('已經沒有上一首了');
        }else{
            this.setState({currentTrackIndex:--this.state.currentTrackIndex},()=>{
                this.updatePlayStatus();
            });
        }        
    },

    //下一曲事件處理
    next:function(){
        if(this.state.currentTrackIndex + 1 >=  this.state.currentTrackLen){
            alert('已經沒有下一首了');
        }else{
            this.setState({currentTrackIndex:++this.state.currentTrackIndex},()=>{
                this.updatePlayStatus();
            });            
        }
    },

在頁面渲染完成後需要執行一下updatePlayStatus方法，根據React生命週期，我們在DOM載入完成後執行一下這個方法：

    componentDidMount: function(){      
        this.updatePlayStatus();
    },

好了，各類事件的方法基本完成，這裡還需要一個監測的方法，用來實時更新播放時間和自動下一曲：

    componentDidMount: function(){      
        this.updatePlayStatus();
        setInterval(()=>{
            let audio = document.getElementById('audio');
            this.setState({currentTime:audio.currentTime},()=>{
                if(~~this.state.currentTime >= ~~this.state.currentTotalTime){
                    this.next();
                }
            });
        }, 300);
    },

完整程式碼

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.min.css';

var Player = React.createClass({
    getDefaultProps: function() {
        //歌單列表
        return{
            "tracks": [
            {
                "name": "元日",
                "artists": [
                    {
                        "name": "於文華",
                    }
                ],
                "album": {
                    "name": "國學唱歌集",
                    "picUrl": "http://p3.music.126.net/SR9eFEjRB0NsscxN7-fHMw==/3344714372906000.jpg",                    
                },
                "duration": 136829,
                "mp3Url": "http://m2.music.126.net/rUcfqqZbq7TIfJeAHfTrkw==/3376600210116829.mp3"
            },
            {
                "name": "元日 ",
                "artists": [
                    {
                        "name": "清弄",
                    }
                ],
                "album": {
                    "name": "熱門華語261",
                    "picUrl": "http://p4.music.126.net/ly2FJHh5-lYMdC3NZxvavQ==/7714173580661848.jpg",
                },
                "duration": 109000,
                "mp3Url": "http://m2.music.126.net/jwwZVlWJ78HEarft42uKUQ==/7906588115920636.mp3"
            },
            {
                "name": "青龍·花木蒼蒼",
                "artists": [
                    {
                        "name": "五色石南葉",
                    }
                ],
                "album": {
                    "name": "熱門華語234",
                    "picUrl": "http://p4.music.126.net/tHAfnugCElS93EDp5cHLIw==/8909342719897560.jpg",
                },
                "duration": 295575,
                "mp3Url": "http://m2.music.126.net/rnq_W32zFX_utQbBhE0xkg==/8934631487358481.mp3"
            }]
        }   
    },

    //初始化狀態
    getInitialState: function() {
        return{
            currentTrackLen: this.props.tracks.length, //歌單歌曲數
            currentTrackIndex: 0, //當前播放的歌曲索引，預設載入第一首歌
            currentTime: 0, //當前歌曲播放的時間
            currentTotalTime: 0, //當前歌曲的總時間
            playStatus: true, //true為播放狀態，false為暫停狀態        
        }
    },

    //更新播放狀態
    updatePlayStatus: function(){
        let audio = document.getElementById('audio');
        if(this.state.playStatus){
            audio.play();
        }else{
            audio.pause();
        }

        //更新當前歌曲總時間
        this.setState({currentTotalTime: this.props.tracks[this.state.currentTrackIndex].duration / 1000});
    },

    //播放事件處理
    play:function(){
        //這裡有setState是非同步的，需要在回撥中執行
        this.setState({playStatus:!this.state.playStatus}, ()=>{
            this.updatePlayStatus();
        });
    },

    //上一曲事件處理
    previous:function(){
        if(this.state.currentTrackIndex - 1 < 0){
            alert('已經沒有上一首了');
        }else{
            this.setState({currentTrackIndex:--this.state.currentTrackIndex},()=>{
                this.updatePlayStatus();
            });
        }        
    },

    //下一曲事件處理
    next:function(){
        if(this.state.currentTrackIndex + 1 >=  this.state.currentTrackLen){
            alert('已經沒有下一首了');
        }else{
            this.setState({currentTrackIndex:++this.state.currentTrackIndex},()=>{
                this.updatePlayStatus();
            });            
        }
    },

    //DOM載入完
    componentDidMount: function(){      
        this.updatePlayStatus();
        setInterval(()=>{
            let audio = document.getElementById('audio');
            this.setState({currentTime:audio.currentTime},()=>{
                if(~~this.state.currentTime >= ~~this.state.currentTotalTime){
                    this.next();
                }
            });
        }, 300);
    },
    render: function() {        
        return (
            <div className="player">
                {/* 播放器名稱  */}
                <div className="header">音樂播放器.React版</div>              

                {/* 音樂資訊  */}
                <TrackInfo track={this.props.tracks[this.state.currentTrackIndex]} />

                {/* 播放進度條   */}
                <Progress progress={this.state.currentTime / this.state.currentTotalTime * 100 + '%'} />

                {/* 播放控制  */}
                <Controls isPlay={this.state.playStatus} onPlay={this.play} onPrevious={this.previous} onNext={this.next} />

                {/* 播放時間   */}
                <Time currentTime={this.state.currentTime} currentTotalTime={this.state.currentTotalTime} />

                {/* 音訊控制元件  */}
                <audio id="audio" src={this.props.tracks[this.state.currentTrackIndex].mp3Url}></audio>
            </div>
        );
    }
});

var TrackInfo = React.createClass({
    render: function() {
        return(
        <div>
        <div className="albumPic" style={{'backgroundImage':'url('+ this.props.track.album.picUrl +')'}}></div>
        <div className='trackInfo'>
            <div className="name">{this.props.track.name}</div>
            <div className="artist">{this.props.track.artists[0].name}</div>
            <div className="album">{this.props.track.album.name}</div>          
        </div>
        </div>
        );
    }
});

var Progress = React.createClass({
    render: function(){
        return  (
            <div className="progress" style={{'width':this.props.progress}}></div>
        )
    }
});

var Controls = React.createClass({
    render: function(){
        let className;
        if(this.props.isPlay == true){
            className = 'icon-pause';
        }else{
            className = 'icon-play';
        }
        return (
        <div className="controls">
            <div className="play" onClick={this.props.onPlay}>
                <i className={className}></i>
            </div>
            <div className="previous" onClick={this.props.onPrevious}>
                <i className="icon-previous"></i>
            </div>
            <div className="next" onClick={this.props.onNext}>
                <i className="icon-next"></i>
            </div>
        </div>              
        )
    }
});

var Time = React.createClass({
    timeConvert: function(timestamp){
        var minutes = Math.floor(timestamp / 60);
        var seconds = Math.floor(timestamp - (minutes * 60));

        if(seconds < 10) {
          seconds = '0' + seconds;
        }

        timestamp = minutes + ':' + seconds;
        return timestamp;
    },  
    render:function() {
        return(
        <div className="time">
            <div className="current">{this.timeConvert(this.props.currentTime)}</div>
            <div className="total">{this.timeConvert(this.props.currentTotalTime)}</div>
        </div>          
        );
    }
});

ReactDOM.render(
    <Player />,
    document.getElementById('root')
);

釋出專案

在Node.js環境下執行：

npm run build

進行程式碼打包處理，打包檔案生成了專案目錄下的build中，執行如下命令，可直接檢視build打包後的內容：

npm install -g pushstate-server
pushstate-server build

瀏覽器中輸入如下地址：http://localhost:9000

好了，用React來實現音樂播放器徹底完成，因為React我也是剛接觸不久，程式碼中可能存在著缺點，我這裡就拋磚引玉了。

總體來說，用React的思想來做東西，確實挺好的，邏輯上也變得比較清晰。

React 音樂播放器程式碼下載：程式碼下載

部落格名稱：王樂平部落格

部落格地址：http://blog.lepingde.com

CSDN部落格地址：http://blog.csdn.net/lecepin

實戰React音樂播放器

上篇文章《一步一步實戰HTML音樂播放器》中，我用HTML+JS + CSS的方式一步步實現了一個音樂播放器，因為最近接觸了一下React，感覺挺不錯的，在這裡我用React的方式實現一個同樣的音樂播放器。播放器功能自動顯示專輯圖片、歌手名、歌曲名、專輯名

Audio 標籤的使用和自己封裝一個強大的React音樂播放器

原文地址：https://www.dodoblog.cn/blog?id=5be84d5c70b2b617f27a4610 這篇文章主要介紹一下部落格裡的這個音樂播放器是怎麼寫的為了更好的表達高深的東西，還是需要先強調點簡單的東西 Audio元素的屬性

個人搭建的React專案之React音樂播放器

該專案是本人自使用react框架以來製作的較大的專案，目前該專案放在github上，感興趣的朋友可以去看看一下，覺得還行的話可以給個star，哈哈地址：https://github.com/cocoxiaoyue/react-music-player 專案環境執行　　1、該專案是基於node環境，

一步一步實戰HTML音樂播放器

在這裡我用HTML5從頭開始一步一步來製作一個簡約的音樂播放器，大家可以參考一下，接下來正式開始。音樂播放器效果播放器分析這裡將播放器分兩塊來做：檢視層（html + css）邏輯層 ( js ) 檢視

Android AIDL技術實戰專案-音樂播放器（一）

實現功能使用AIDL服務實現：音樂播放、暫停、上一曲、下一曲、歌詞功能音樂播放模式：順序播放、隨機播放、單曲播放多個頁面呼叫AIDL服務主頁面底部音樂迷你控制器音樂詳情頁面程式

Android AIDL技術實戰專案-音樂播放器（二）-使用retrofit完成音樂API的封裝

使用retrofit完成音樂API的封裝程式碼結構 1、匯入retrofit相關庫 compile 'com.squareup.retrofit2:retrofit:2.2.0' 2、編寫介面API public interfac

React音樂播放器(react+redux+react-router+webpack)

技術：React16，Redux，React-Router，WebPack 專案演示會點ps,所以自己設計了頁面和互動。現在的資料都是是自己mock的，開發後臺的時候會對接真實資料，由於搜尋、收藏歌單、新建歌單、刪除歌單、收藏單曲、

[嵌入式Linux專案實戰開發]基於QT4.7.4的音樂播放器實現與設計【2018年給力專案】

[嵌入式Linux專案實戰開發]基於QT4.7.4的音樂播放器實現與設計【2018年給力專案】是【創科之龍】團隊aiku嵌入式視訊教程系列製作的現有的音樂播放器。主要功能實現： 1.新建工程，基類選擇Qwidget。雙擊開啟介面檔案，在介面檔案中建立label顯示時間、若干個tool

非常漂亮的HTML5音樂播放器

tps min 播放 gre 頁面 row 簡單 div tle APlayer是一個非常漂亮的HTML5音頻播放器，它將audio標簽封裝，並結合CSS制作出漂亮的播放器UI，它支持設置歌名、歌手和歌詞，可以設置是否自動播放，支持縮略圖，支持播放進度以及設置播放源。

10個免費開源的JS音樂播放器插件

一個很好 tle ef7 制作 obi tex ios開發者選擇音樂播放器在網頁設計中有時候會用到，比如一些時尚類、音樂或影視類等項目，但這些網頁播放器插件比較少見，所以這裏為大家整理一個集合，也許會有用到的時候。下面整理的播放器有些是支持自適應的，如果需要

關於仿酷狗音樂播放器開源：尋求一套音樂播放器素材，讓仿酷狗開源

替換 log 設有 ext 軟件水平 iss 開源可靠轉載請說明原出處，謝謝~~ 距離公布測試版的仿酷狗音樂播放器。已經幾個月過去了。期間非常多網友加我QQ來問我開源的問題，我也早有開源意向。但我也一直沒有得到可靠的信息，保證開

Qt音樂播放器制作（二）Easy Player

滾動支持是個 blog 音樂音樂播放器 div iss size 兩天沒有公布新的動態。主要原因還是個人的生活和工作時間限制，如今趕晚貼出第二版。先放個圖：自上次公布第一個版本號以來，又進行了多次改動，主要變化在於: （1）依照上次的計劃又一次設計了界面

Android實現音樂播放器（一）

simple ani call ket 打開文件界面方式 .cn 點擊 Graphical User Interface 本篇文章記錄了我實現Android簡單音樂播放器的過程，（一）中介紹了怎麽構建音樂播放器的前端頁面。首先大家看一下，界面最後是這樣的（界面有

android音樂播放器開發 SweetMusicPlayer 載入歌曲列表

路徑本地 exc tao near import 設置優先特殊上一篇寫了播放器的總體實現思路，http://blog.csdn.net/huweigoodboy/article/details/39855653，如今來總結下載入歌曲列表。代碼地址

基於我們3組的網易雲APP制作，找的APlayer H5音樂播放器

styles html5音頻 min link app制作自動 .com 網易雲 ans APlayer是一個非常漂亮的HTML5音頻播放器，UI參考自網易雲音樂外鏈播放器。它將audio標簽封裝，並結合CSS制作出漂亮的播放器UI，它支持設置歌名、歌手和歌詞，可以設置是

4個小時實現一個HTML5音樂播放器

同時 status parseint [0 ads 發布大致了解 mps 技術點：ES6+Webpack+HTML5 Audio+Sass 這裏，我們將一步步的學到如何從零去實現一個H5音樂播放器。首先來看一下最終的實現效果：Demo鏈接接下來就步入正題：要

Raspberry 音樂播放器omxplayer安裝

setup tps 使用 asp color code cnblogs gui 依賴首先需要安裝的是omxplayer播放器的依賴的庫文件： wget http://pexpect.sourceforge.net/pexpect-2.3.tar.gz tar xzf p

Simple2D-16（音樂播放器）ImGui 庫介紹

函數 src blank cnblogs microsoft imm pen 運行音樂播放器什麽是 ImGui 　　IMGUI （Immediate Mode Graphical User interface），下載地址。　　ImGui 是一種比較新穎的 GUI

Simple2D-19（音樂播放器）播放器的源碼實現

psi 計算 pan 顯示中文 sign mic 偏移結束 save 　　使用 BASS 和 ImGui 實現音樂播放器 MusicPlayer。　　將播放器和一個文件夾關聯起來，程序剛開始運行的時候就從該文件夾加載所有音頻文件。而文件夾的路徑則保存在配置文件中，所以程

實戰React音樂播放器

播放器功能

播放器效果

React 環境準備

引入必要檔案

建立播放器容器元件

頁面渲染

容器內的各類元件

初始化STATE，PROPS

建立子元件

TrackInfo元件

Progress元件

Controls元件

Time元件

audio標籤

事件處理方法

完整程式碼

釋出專案

相關推薦