Yifans_Z's Blog.

React jPlayer 音乐播放器

字数统计: 630阅读时长: 7 min
2017/08/27 Share

介绍

这是 React 学习练习:IMOOC 使用 React 构建一款音乐播放器,项目构建、功能编写的笔记。

Thanks:

技术栈

  • 使用 YEOMAN 构建项目脚手架
  • ES6
  • react 15.0
  • react-router-dom 4.2 路由
  • pubsub-js 1.7 事件订阅
  • webpack 1.2
  • jPlayer 2.9 音乐播放器插件

项目构建

使用脚手架 generator-react-webpack Yeoman generator for ReactJS and Webpack:

# Make sure both is installed globally
npm install -g yo
npm install -g generator-react-webpack

# Create a new directory, and `cd` into it:
mkdir music-player-by-react && cd music-player-by-react

# Run the generator
yo react-webpack

其中使用 scss,启用 PostCSS

还需要安装 sass-loader:

npm install node-sass --save-dev
npm install sass-loader@4.1.1 --save-dev

修改 .eslintrc 支持 jQuery:

"jquery": true

功能开发

Header 组件

注意,同级目录的文件引用需要带上 ./

import Header from "./Header";

图片导入用 require():

<img src={require('../../images/logo.png')}  width={40} className="-col-auto"/>

jPlayer

jPlayer : HTML5 Audio & Video for jQuery

js cdn 导入:

<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"
></script>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.min.js"
></script>

componentDidMount() 中 bind 的方法在 componentWillUnmout() 要卸载:

componentWillUnmout() {
$("#player").unbind($.jPlayer.event.timeupdate);
}

获取当前音乐进度百分比,数值:

progress:e.jPlayer.status.currentPercentAbsolute

获取音乐总时间:

this.duration = e.jPlayer.status.duration;

进度条组件

<div className="progress" style={{
width: `${this.props.progress}%`
}}></div>
/* 模板写法 */
`${this.props.progress}%`

获取点击进度条的百分比:

let {progressBar} = this.refs;
let progress = (e.clientX - progressBar.getBoundingClientRect().left) / progressBar.clientWidth;

MusicList 组件

map 遍历:

render() {
let Items = this.props.musicList.map((item) => {
return (
<MusicListItem
key={item.id}
data={item}
focus={this.props.currentMusicItem === item}
></MusicListItem>
);
});
return (
<ul>
{Items}
</ul>
);
}

Router

ReactTraining/react-router - Declarative routing for React

安装:

npm install --save react-router-dom

想使用最新的 v4.2.2 待完善。

PubSubJS

mroderick/PubSubJS - Dependency free publish/subscribe for JavaScript

import PubSub from "pubsub-js";

事件发布:

PubSub.publish("PLAY_MUSIC", item);

事件订阅:

PubSub.subscribe("PLAY_MUSIC", (msg, currentMusicItem) => {
this.playMusic(currentMusicItem);
});

播放控制

前进后退,播放下一首歌算法:

let nextIndex = 0;
const musicListLength = this.musicList.length;
if (type === "next") {
nextIndex = (index + 1) % musicListLength;
} else {
nextIndex = (index - 1 + musicListLength) % musicListLength;
}

TODO

  • 音乐播放模式,单曲循环、随机播放。
  • react-router-dom 实践。
  • DOM diff 学习。
  • IMMUTABLE
  • Redux 组件通信。
CATALOG
  1. 1. 介绍
    1. 1.1. 技术栈
  2. 2. 项目构建
  3. 3. 功能开发
    1. 3.1. Header 组件
    2. 3.2. jPlayer
    3. 3.3. 进度条组件
    4. 3.4. MusicList 组件
    5. 3.5. Router
    6. 3.6. PubSubJS
    7. 3.7. 播放控制
  4. 4. TODO