上一篇我们完成了音乐相册里面的播放图片的功能,这一篇主要完成的是音乐相册里面的音乐播放器功能。最终让我们基于 React 的音乐相册图文并茂、有声有色。
我们主要从以下几个部分来展开:
数据准备
进度条功能
创建播放器组件
最终效果
数据准备
在src/data
目录添加音乐数据文件:musicDatas.js
代码如下:
export const MUSIC_LIST = [
{
id: 1,
title: \'童话镇\',
artist: \'陈一发儿\',
file: \'https://raw.githubusercontent.com/nnngu/SharedResource/master/music/%E7%AB%A5%E8%AF%9D%E9%95%87.mp3\',
cover: \'https://raw.githubusercontent.com/nnngu/FigureBed/master/2018/2/6/tong_hua_zhen.jpg\'
}, {
id: 2,
title: \'天使中的魔鬼\',
artist: \'田馥甄\',
file: \'http://oj4t8z2d5.bkt.clouddn.com/%E9%AD%94%E9%AC%BC%E4%B8%AD%E7%9A%84%E5%A4%A9%E4%BD%BF.mp3\',
cover: \'http://oj4t8z2d5.bkt.clouddn.com/%E9%AD%94%E9%AC%BC%E4%B8%AD%E7%9A%84%E5%A4%A9%E4%BD%BF.jpg\'
}, {
id: 3,
title: \'风继续吹\',
artist: \'张国荣\',
file: \'http://oj4t8z2d5.bkt.clouddn.com/%E9%A3%8E%E7%BB%A7%E7%BB%AD%E5%90%B9.mp3\',
cover: \'http://oj4t8z2d5.bkt.clouddn.com/%E9%A3%8E%E7%BB%A7%E7%BB%AD%E5%90%B9.jpg\'
}, {
id: 4,
title: \'恋恋风尘\',
artist: \'老狼\',
file: \'http://oj4t8z2d5.bkt.clouddn.com/%E6%81%8B%E6%81%8B%E9%A3%8E%E5%B0%98.mp3\',
cover: \'http://oj4t8z2d5.bkt.clouddn.com/%E6%81%8B%E6%81%8B%E9%A3%8E%E5%B0%98.jpg\'
}, {
id: 5,
title: \'我要你\',
artist: \'任素汐\',
file: \'http://oj4t8z2d5.bkt.clouddn.com/%E6%88%91%E8%A6%81%E4%BD%A0.mp3\',
cover: \'http://oj4t8z2d5.bkt.clouddn.com/%E6%88%91%E8%A6%81%E4%BD%A0.jpg\'
}, {
id: 6,
title: \'成都\',
artist: \'赵雷\',
file: \'http://oj4t8z2d5.bkt.clouddn.com/%E6%88%90%E9%83%BD.mp3\',
cover: \'http://oj4t8z2d5.bkt.clouddn.com/%E6%88%90%E9%83%BD.jpg\'
}, {
id: 7,
title: \'sound of silence\',
artist: \'Simon & Garfunkel\',
file: \'http://oj4t8z2d5.bkt.clouddn.com/sound-of-silence.mp3\',
cover: \'http://oj4t8z2d5.bkt.clouddn.com/sound-of-silence.jpg\'
}
];
进度条功能
1、在src/index.html
文件中添加一个div,作为jPlayer(音乐播放插件)的容器。如下图红色框里面的就是新添加的代码:
2、继续在src/index.html
文件中应用 jQuery 和 jPlayer 。
3、添加进度条组件:在src/components/music
目录添加 progress.js
,如下图:
progress.js
的代码如下:
import React from \'react\';
require(\'./progress.less\');
let Progress = React.createClass({
getDefaultProps() {
return {
barColor: \'#2f9842\'
}
},
changeProgress(e) {
let progressBar = this.refs.progressBar;
let progress = (e.clientX - progressBar.getBoundingClientRect().left) / progressBar.clientWidth;
this.props.onProgressChange && this.props.onProgressChange(progress);
},
// ......
// 省略了一部分代码
// 完整的代码请参照项目的源代码
});
export default Progress;
在同一个目录下创建Progress 的样式文件 progress.less
,代码如下:
.components-progress {
display: inline-block;
width: 100%;
height: 3px;
position: relative;
background: #aaa;
cursor: pointer;
.progress {
width: 0%;
height: 3px;
left: 0;
top: 0;
}
}
创建播放器组件
播放器组件分别对应player.js
和 player.less
两个文件。如下图:
player.js
的代码如下:
import React from \'react\';
import Progress from \'./progress\';
import {MUSIC_LIST} from \'../../data/musicDatas\';
let PubSub = require(\'pubsub-js\');
require(\'./player.less\');
let duration = null;
let Player = React.createClass({
/**
* 生命周期方法 componentDidMount
*/
componentDidMount() {
$(\'#player\').bind($.jPlayer.event.timeupdate, (e) => {
duration = e.jPlayer.status.duration;
this.setState({
progress: e.jPlayer.status.currentPercentAbsolute,
volume: e.jPlayer.options.volume * 100,
leftTime: this.formatTime(duration * (1 - e.jPlayer.status.currentPercentAbsolute / 100))
});
});
$(\'#player\').bind($.jPlayer.event.ended, (e) => {
this.playNext();
});
},
/**
* 生命周期方法 componentWillUnmount
*/
componentWillUnmount() {
$(\'#player\').unbind($.jPlayer.event.timeupdate);
},
formatTime(time) {
time = Math.floor(time);
let miniute = Math.floor(time / 60);
let seconds = Math.floor(time % 60);
return miniute + \':\' + (seconds < 10 ? \'0\' + seconds : seconds);
},
/**
* 进度条被拖动的处理方法
* @param progress
*/
changeProgressHandler(progress) {
$(\'#player\').jPlayer(\'play\', duration * progress);
this.setState({
isPlay: true
});
// 获取转圈的封面图片
let imgAnimation = this.refs.imgAnimation;
imgAnimation.style = \'animation-play-state: running\';
},
/**
* 音量条被拖动的处理方法
* @param progress
*/
changeVolumeHandler(progress) {
$(\'#player\').jPlayer(\'volume\', progress);
},
/**
* 播放或者暂停方法
**/
play() {
this.setState({
isPlay: !this.state.isPlay
});
// 获取转圈的封面图片
var imgAnimation = this.refs.imgAnimation;
if (this.state.isPlay) {
$(\'#player\').jPlayer(\'pause\');
imgAnimation.style = \'animation-play-state: paused\';
} else {
$(\'#player\').jPlayer(\'play\');
imgAnimation.style = \'animation-play-state: running\';
}
},
/**
* 下一首
**/
next() {
PubSub.publish(\'PLAY_NEXT\');
this.setState({
isPlay: true
});
// 开始播放下一首
this.playNext();
// 获取转圈的封面图片
let imgAnimation = this.refs.imgAnimation;
imgAnimation.style = \'animation-play-state: running\';
},
/**
* 上一首
**/
prev() {
PubSub.publish(\'PLAY_PREV\');
this.setState({
isPlay: true
});
// 开始播放上一首
this.playNext(\'prev\');
// 获取转圈的封面图片
let imgAnimation = this.refs.imgAnimation;
imgAnimation.style = \'animation-play-state: running\';
},
playNext(type = \'next\') {
let index = this.findMusicIndex(this.state.currentMusitItem);
if (type === \'next\') {
index = (index + 1) % this.state.musicList.length;
} else {
index = (index + this.state.musicList.length - 1) % this.state.musicList.length;
}
let musicItem = this.state.musicList[index];
this.setState({
currentMusitItem: musicItem
});
this.playMusic(musicItem);
},
playMusic(item) {
$(\'#player\').jPlayer(\'setMedia\', {
mp3: item.file
}).jPlayer(\'play\');
this.setState({
currentMusitItem: item
});
},
findMusicIndex(music) {
let index = this.state.musicList.indexOf(music);
return Math.max(0, index);
},
changeRepeat() {
PubSub.publish(\'CHANAGE_REPEAT\');
},
// constructor() {
// return {
// progress: 0,
// volume: 0,
// isPlay: true,
// leftTime: \'\'
// }
// },
componentWillMount() {
this.getInitialState();
},
getInitialState() {
return {
musicList: MUSIC_LIST,
currentMusitItem: MUSIC_LIST[0],
repeatType: \'cycle\',
progress: 0,
volume: 0,
isPlay: true,
leftTime: \'\'
}
},
/**
* render 渲染方法
* @returns {*}
*/
render() {
return (
<div className="player-page">
<div className=" row">
<div className="controll-wrapper">
<h2 className="music-title">{this.state.currentMusitItem.title}</h2>
<h3 className="music-artist mt10">{this.state.currentMusitItem.artist}</h3>
<div className="row mt10">
<div className="left-time -col-auto">-{this.state.leftTime}</div>
<div className="volume-container">
<i className="icon-volume rt" style={{top: 5, left: -5}}></i>
<div className="volume-wrapper">
{/* 音量条 */}
<Progress
progress={this.state.volume}
onProgressChange={this.changeVolumeHandler}
// barColor=\'#aaa\'
>
</Progress>
</div>
</div>
</div>
<div style={{height: 10, lineHeight: \'10px\'}}>
{/* 播放进度条 */}
<Progress
progress={this.state.progress}
onProgressChange={this.changeProgressHandler}
>
</Progress>
</div>
<div className="mt35 row">
<div>
<i className="icon prev" onClick={this.prev}></i>
<i className={`icon ml20 ${this.state.isPlay ? \'pause\' : \'play\'}`} onClick={this.play}></i>
<i className="icon next ml20" onClick={this.next}></i>
</div>
<div className="-col-auto">
{/* 播放模式按钮:单曲、循环、随机 */}
<i className={`repeat-${this.state.repeatType}`} onClick={this.changeRepeat}></i>
</div>
</div>
</div>
<div className="-col-auto cover">
<img ref="imgAnimation" src={this.state.currentMusitItem.cover} alt={this.state.currentMusitItem.title}/>
</div>
</div>
</div>
);
}
});
export default Player;
player.less
的代码如下:
.player-page {
width: 550px;
height: 210px;
//margin: auto;
//margin-top: 0px;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
bottom: 20px;
z-index: 101;
//width: 100%;
//.caption {
// font-size: 16px;
// color: rgb(47, 152, 66);
//}
.cover {
width: 180px;
height: 180px;
margin-left: 20px;
img {
width: 180px;
height: 180px;
border-radius: 50%;
animation: roate 20s infinite linear; // 旋转专辑封面
border:2px solid #808080b8;
}
}
.volume-container {
position: relative;
left: 20px;
top: -3px;
}
.volume-container .volume-wrapper {
opacity: 0;
transition: opacity .5s linear;
}
.volume-container:hover .volume-wrapper {
opacity: 1;
}
.music-title {
font-size: 25px;
font-weight: 400;
color: rgb(3, 3, 3);
height: 6px;
line-height: 6px;
}
.music-artist {
font-size: 15px;
font-weight: 400;
color: rgb(74, 74, 74);
}
.left-time {
font-size: 14px;
color: #999;
font-weight: 400;
width: 40px;
}
.icon {
cursor: pointer;
}
.ml20 {
margin-left: 20px;
}
.mt35 {
margin-top: 35px;
}
.volume-wrapper {
width: 60px;
display: inline-block;
}
}
@keyframes roate {
0% {
transform: rotateZ(0)
}
100% {
transform: rotateZ(360deg)
}
}
然后在src/components/Main.js
中添加音乐播放器组件 Player
,完整的代码请参照我发布到 Github 上的源代码。
最终效果
到此,基于 React 的音乐相册的全部功能已经完成了。最终的运行效果如下: