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

2,541 阅读2分钟

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

基本效果图如下:

初始状态


播放状态


播放结束状态


本人最近在做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中需要等,或者改写下样式,就可以直接使用哦