一个音乐播放器的简单实现
基本效果图如下:
初始状态
播放状态
播放结束状态
本人最近在做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 音频结束播放的事件 如需求有重置播放器进度,播放按钮状态等,可以在此操作
用到几个重要属性
currentTime(获取当前播放时间,如快进,可以动态给该属性赋值)
duration (音频总时长)
重要:componentWillUnmount时候记得将事件解绑哦