前言
音樂播放器Demo是作者的開源項目OneM中的一個功能趋观，這里作者把播放器功能獨立出來，方便需要的同學參考學習皱坛。
預覽效果圖
gif
Demo源碼地址
https://github.com/guangqiang-liu/react-native-audio-demo
播放器支持功能
- 支持播放 \ 暫停
- 支持三種播放模式豆巨，單曲循環(huán)、循序播放往扔、隨機播放
- 支持切換上一首、下一首
- 支持一首音頻播放完成自動切換下一首
- 支持緩存播放及緩存進度
- 支持播放進度拖拽到指定位置播放
使用到的技術點
- 項目使用到
react-native-video媒體播放組件 - 項目中用到的圖標都是IconFont字體
react-native-vector-icons萍膛，以及自定義的字體庫 - 播放器背景使用了高斯模糊效果，使用到
react-native-blur組件
react-native-video 組件使用講解
<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} />
Android拓展用法
<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
使用 react-native-video 組件操作步驟
npm install react-native-video --savereact-native link react-native-video --save
react-native-video 組件使用注意點
- 最好是網(wǎng)絡請求到播放資源后在渲染
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蝌戒，后續(xù)修復
- 切換音樂時，有白屏情況瓶颠，后期修復
- 注意
this.setTime()函數(shù)的使用刺桃，因為此函數(shù)調用頻率很高。 - 注意播放器的各種狀態(tài)機瑟慈，處理好狀態(tài)機的更新時機
播放器Demo源碼地址
https://github.com/guangqiang-liu/react-native-audio-demo
項目中使用到的高斯模糊和IconFont功能請參考下面的技術文檔
總結
音樂播放器的功能實現(xiàn)還算是不太麻煩，很多功能 react-native-video 組價已經(jīng)幫我們封裝的很完善了葛碧，我們只需要調用即可借杰。同學們在開發(fā)音頻播放功能時蔗衡，可能會遇到其他的問題，這時同學們好好查看官方文檔绞惦。感覺文章對你有幫助，請 給個 star 給個 關注 謝謝济蝉。
福利時間
- 作者React Native開源項目OneM地址(按照企業(yè)開發(fā)標準搭建框架設計開發(fā))：https://github.com/guangqiang-liu/OneM (歡迎小伙伴們 star)
- 作者簡書主頁：包含50多篇RN開發(fā)相關的技術文章http://www.reibang.com/u/023338566ca5 (歡迎小伙伴們：多多關注菠发，多多點贊)
- 作者React Native QQ技術交流群：620792950 歡迎小伙伴進群交流學習
- 友情提示：在開發(fā)中有遇到RN相關的技術問題王滤，歡迎小伙伴加入交流群（620792950）滓鸠，在群里提問、互相交流學習哥力。交流群也定期更新最新的RN學習資料給大家，謝謝支持寞射！
