React Native封装音乐播放器组件

前言

音乐播放器Demo是作者的开源项目OneM中的一个功能，这里作者把播放器功能独立出来，方便需要的同学参考学习。

预览效果图

gif

Demo源码地址

https://github.com/guangqiang-liu/react-native-audio-demo

播放器支持功能

• 支持播放 \ 暂停
• 支持三种播放模式，单曲循环、循序播放、随机播放
• 支持切换上一首、下一首
• 支持一首音频播放完成自动切换下一首
• 支持缓存播放及缓存进度
• 支持播放进度拖拽到指定位置播放

使用到的技术点

• 项目使用到react-native-video媒体播放组件
• 项目中用到的图标都是IconFont字体react-native-vector-icons，以及自定义的字体库
• 播放器背景使用了高斯模糊效果，使用到react-native-blur组件

react-native-video 组件使用讲解

Android拓展用法

详细的react-native-video使用方法请参照官方文档：https://github.com/react-native-community/react-native-video

使用 react-native-video 组件操作步骤

• npm install react-native-video --save
• react-native link react-native-video --save

react-native-video 组件使用注意点

• 最好是网络请求到播放资源后在渲染 Video 组件

render() {
    const data = this.state.musicInfo || {}
    return (
      data.url ?
        
           { this.backgroundImage = img}}
            style={styles.bgContainer}
            source={{uri: data.cover}}
            resizeMode='cover'
            onLoadEnd={() => this.imageLoaded()}
          />
          
            {
              Platform.OS === 'ios' ?
                 :
                
            }
          
          {this.renderPlayer()}
         : 
    )
  }
  

• 播放CD胶盘旋转动画有bug，后续修复
• 切换音乐时，有白屏情况，后期修复
• 注意 this.setTime()函数的使用，因为此函数调用频率很高。
• 注意播放器的各种状态机，处理好状态机的更新时机

播放器Demo源码地址

https://github.com/guangqiang-liu/react-native-audio-demo

项目中使用到的高斯模糊和IconFont功能请参考下面的技术文档

• 高斯模糊
• 自定义IconFont库

总结

音乐播放器的功能实现还算是不太麻烦，很多功能 react-native-video 组价已经帮我们封装的很完善了，我们只需要调用即可。同学们在开发音频播放功能时，可能会遇到其他的问题，这时同学们好好查看官方文档。感觉文章对你有帮助，请 给个 star 给个 关注 谢谢。

福利时间

• 作者React Native开源项目OneM地址(按照企业开发标准搭建框架设计开发)：https://github.com/guangqiang-liu/OneM (欢迎小伙伴们 star)
• 作者主页：包含50多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 (欢迎小伙伴们：多多关注，多多点赞)
• 作者React Native QQ技术交流群：620792950 欢迎小伙伴进群交流学习
• 友情提示：在开发中有遇到RN相关的技术问题，欢迎小伙伴加入交流群（620792950），在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家，谢谢支持！