React-native-imusic is a music player component similar to HTML5 Audio, based on react-native-sound.
react-native-imusic 是一个类似 HTML5 Audio 的音乐播放组件,其底层基于 react-native-sound。中文说明 -> 点这里
yarn add react-native-imusic
# or
npm install --save react-native-imusic
link:
react-native link react-native-sound
modify the code in android/build.gradle
:
allprojects {
repositories {
mavenLocal()
jcenter()
maven {
url 'https://maven.google.com'
}
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
}
}
import IMusic from 'react-native-imusic';
<IMusic
source={{ uri: song.url }}
play={play}
onProgress={d => {
// ...
}}
/>
Please check example code.
name | type | default | description |
---|---|---|---|
source | object | {} | music source, @required. |
play | bool | false | whether to play music, @required. |
loop | bool | false | whether to loop play music. |
autoPlay | bool | false | Whether to play automatically after loading is complete. |
preload | bool | false | Whether to preload. |
initSeek | number | 0 | Initialize playback position. |
progressUpdateInterval | number | 500 | Progress Update Interval. |
event:
name | type | default | description |
---|---|---|---|
onProgress | function | d => d | music playback progress event. |
onLoadStart | function | e => e | fires when the music is loadedstart. |
onLoad | function | d => d | fires when the music is loaded. |
onPlay | function | e => e | fires when the music plays. |
onPause | function | e => e | fires when the music is paused. |
onEnd | function | e => e | fires when the music ends. |
onError | function | e => e | fires when an error occurs in music playback/loading. |
onProgress callback param data:
{
currentTime: 22.40,
duration: 183.32,
volume: 1,
percent: 12.22,
}
onLoad callback param data:
{
currentTime: 0,
duration: 183.32,
volume: 1,
percent: 0,
}
name | type | description |
---|---|---|
isPlay | function | |
seek | function(time: number) | |
volume | function(num?: number) | |
reLoad | function |