手把手带你作一个基于react的音乐播放器

一个音乐播放器的简单实现

基本效果图以下：

初始状态

播放状态

播放结束状态

本人最近在作admin系统，有一个需求，播放音频，并能够暂停，快进...，公司以前选用的是audiojs.js，一款原生的音频播放插件，产品在ui上也选用这款的ui，固然功能也同样咯。

因而，直接copy老项目audiojs，直接用，可是途中遇到一些问题，一是咱们新项目选用的是react,并且又配合eslint，原插件不支持es6引入，并且一堆代码，因而开始代码改写成es6,并遵循eslint,代码是改好了，能用了，可是，个人项目是表格里动态渲染audio,并且随着分页，表格等操做，这些action会触发表格update，可是，知道该插件等就知道，他是不断建立audio，及相关dom结构，因为这些没有使用react的虚拟dom,性能低，且一些bug，后来，只能本身改写成react组件类型的。

改写audiojs插件，支持es6模块引入的详见github地址，未react组件化。

将audiojs组件化的详见github地址，简单逻辑以下。也是实现一个播放器，基本思路也以下

基本在componentDidMount周期时候，绑定音频的事件，音频经常使用事件有

loadedmetadata 加载音频时候监听的事件，会有个按钮有加载中的状态

canplaythrough 音频能够播放时候的事件，这时候能够得到音频的总时长等

timeupdate 音频播放中的事件，能够获取当前播放时间，用于显示一些进度条等

ended  音频结束播放的事件 如需求有重置播放器进度，播放按钮状态等，能够在此操做

音频播放器经常使用两个方法 播放play() 暂停pause()

用到几个重要属性

currentTime（获取当前播放时间，如快进，能够动态给该属性赋值）

duration （音频总时长）

重要：componentWillUnmount时候记得将事件解绑哦 

结束，有admin中须要等，或者改写下样式，就能够直接使用哦