响应式网站建设推荐乐云践新,wordpress菜单美化插件,门户网站建设方案ppt 百度文库,国家城乡和住房建设部网站上篇文章《一步一步实战HTML音乐播放器》中#xff0c;我用HTMLJS CSS的方式一步步实现了一个音乐播放器#xff0c;因为最近接触了一下React#xff0c;感觉挺不错的#xff0c;在这里我用React的方式实现一个同样的音乐播放器。 播放器功能
自动显示 专辑图片、歌手名、…上篇文章《一步一步实战HTML音乐播放器》中我用HTMLJS 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 classNameplayer{/* 各类子组建…… */}/div);}});
子组建我们下面会一一创建这里先用做一下占位说明。 页面渲染
ReactDOM.render(Player /,document.getElementById(root)
); 容器内的各类组件
根据播放器结构创建如下组件
var Player React.createClass({render: function() { return (div classNameplayer{/* 播放器名称 */}div classNameheader音乐播放器.React版/div {/* 音乐信息 */}TrackInfo /{/* 播放进度条 */}Progress /{/* 播放控制 */}Controls /{/* 播放时间 */}Time /{/* 音频控件 */}audio idaudio/audio/div);}}); 初始化STATEPROPS
根据需求进行状态和属性的创建。
这里歌单就手动制作一个了把这个歌单写的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(divdiv classNamealbumPic style{{backgroundImage:url( this.props.track.album.picUrl )}}/divdiv classNametrackInfodiv classNamename{this.props.track.name}/divdiv classNameartist{this.props.track.artists[0].name}/divdiv classNamealbum{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 classNameprogress 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 classNamecontrolsdiv classNameplay onClick{this.props.onPlay}i className{className}/i/divdiv classNameprevious onClick{this.props.onPrevious}i classNameicon-previous/i/divdiv classNamenext onClick{this.props.onNext}i classNameicon-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 classNametimediv classNamecurrent{this.timeConvert(this.props.currentTime)}/divdiv classNametotal{this.timeConvert(this.props.currentTotalTime)}/div/div );}
});
timeConvert做为一个时间转换显示来用。
在Player容器中的标签修改为
{/* 播放时间 */}
Time currentTime{this.state.currentTime} currentTotalTime{this.state.currentTotalTime} /
audio标签
audio这里不需要在创建组件了修改一下在Player中的标记就行
{/* 音频控件 */}
audio idaudio 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 classNameplayer{/* 播放器名称 */}div classNameheader音乐播放器.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 idaudio src{this.props.tracks[this.state.currentTrackIndex].mp3Url}/audio/div);}
});var TrackInfo React.createClass({render: function() {return(divdiv classNamealbumPic style{{backgroundImage:url( this.props.track.album.picUrl )}}/divdiv classNametrackInfodiv classNamename{this.props.track.name}/divdiv classNameartist{this.props.track.artists[0].name}/divdiv classNamealbum{this.props.track.album.name}/div /div/div);}
});var Progress React.createClass({render: function(){return (div classNameprogress 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 classNamecontrolsdiv classNameplay onClick{this.props.onPlay}i className{className}/i/divdiv classNameprevious onClick{this.props.onPrevious}i classNameicon-previous/i/divdiv classNamenext onClick{this.props.onNext}i classNameicon-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 classNametimediv classNamecurrent{this.timeConvert(this.props.currentTime)}/divdiv classNametotal{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
