音乐播放器Demo是作者的开源项目OneM中的一个功能，这里作者把播放器功能独立成项目，方便需要的同学参考学习。
- 支持播放 \ 暂停
- 支持三种播放模式，单曲循环、循序播放、随机播放
- 支持切换上一首、下一首
- 支持一首音频播放完成自动切换下一首
- 支持缓存播放及缓存进度
- 支持播放进度拖拽到指定位置播放
- 项目使用到
react-native-video媒体播放组件 - 项目中用到的图标都是IconFont字体
react-native-vector-icons，以及自定义的字体库 - 播放器背景使用了高斯模糊效果，使用到
react-native-blur组件
<Video source={{uri: "background"}} // Can be a URL or a local file.
ref={(ref) => {
this.player = ref
}} // Store reference
rate={1.0} // 0 is paused, 1 is normal.
volume={1.0} // 0 is muted, 1 is normal.
muted={false} // Mutes the audio entirely.
paused={false} // Pauses playback entirely.
resizeMode="cover" // Fill the whole screen at aspect ratio.*
repeat={true} // Repeat forever.
playInBackground={false} // Audio continues to play when app entering background.
playWhenInactive={false} // [iOS] Video continues to play when control or notification center are shown.
ignoreSilentSwitch={"ignore"} // [iOS] ignore | obey - When 'ignore', audio will still play with the iOS hard silent switch set to silent. When 'obey', audio will toggle with the switch. When not specified, will inherit audio settings as usual.
progressUpdateInterval={250.0} // [iOS] Interval to fire onProgress (default to ~250ms)
onLoadStart={this.loadStart} // Callback when video starts to load
onLoad={this.setDuration} // Callback when video loads
onProgress={this.setTime} // Callback every ~250ms with currentTime
onEnd={this.onEnd} // Callback when playback finishes
onError={this.videoError} // Callback when video cannot be loaded
onBuffer={this.onBuffer} // Callback when remote video is buffering
onTimedMetadata={this.onTimedMetadata} // Callback when the stream receive some metadata
style={styles.backgroundVideo} />
<Video source={{uri: "background", mainVer: 1, patchVer: 0}} // Looks for .mp4 file (background.mp4) in the given expansion version.
rate={1.0} // 0 is paused, 1 is normal.
volume={1.0} // 0 is muted, 1 is normal.
muted={false} // Mutes the audio entirely.
paused={false} // Pauses playback entirely.
resizeMode="cover" // Fill the whole screen at aspect ratio.
repeat={true} // Repeat forever.
onLoadStart={this.loadStart} // Callback when video starts to load
onLoad={this.setDuration} // Callback when video loads
onProgress={this.setTime} // Callback every ~250ms with currentTime
onEnd={this.onEnd} // Callback when playback finishes
onError={this.videoError} // Callback when video cannot be loaded
style={styles.backgroundVideo} />
详细的react-native-video使用方法请参照官方文档：https://github.com/react-native-community/react-native-video
npm install react-native-video --savereact-native link react-native-video --save
- 最好是网络请求到播放资源后再渲染
Video组件
render() {
const data = this.state.musicInfo || {}
return (
data.url ?
<View style={styles.container}>
<Image
ref={(img) => { this.backgroundImage = img}}
style={styles.bgContainer}
source={{uri: data.cover}}
resizeMode='cover'
onLoadEnd={() => this.imageLoaded()}
/>
<View style={styles.bgContainer}>
{
Platform.OS === 'ios' ?
<VibrancyView
blurType={'light'}
blurAmount={20}
style={styles.container}/> :
<BlurView
style={styles.absolute}
viewRef={this.state.viewRef}
blurType="light"
blurAmount={10}
/>
}
</View>
{this.renderPlayer()}
</View> : <View/>
)
}
- 播放CD胶盘旋转动画有bug，后续修复
- 切换音乐时，有白屏情况，后期修复
- 注意
this.setTime()函数的使用，因为此函数调用频率很高。 - 注意播放器的各种状态机，处理好状态机的更新时机
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent