https://github.com/oovui/audio-player-react
just a simple audio player based React
https://github.com/oovui/audio-player-react
audio audioplayer player react react-audio-player wechat-audio-player
Last synced: about 1 year ago
JSON representation
just a simple audio player based React
- Host: GitHub
- URL: https://github.com/oovui/audio-player-react
- Owner: oovui
- License: mit
- Created: 2018-09-26T03:12:08.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T20:58:16.000Z (over 3 years ago)
- Last Synced: 2025-04-05T10:33:28.654Z (about 1 year ago)
- Topics: audio, audioplayer, player, react, react-audio-player, wechat-audio-player
- Language: JavaScript
- Homepage:
- Size: 12.2 MB
- Stars: 10
- Watchers: 2
- Forks: 2
- Open Issues: 39
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# audio-player-react
> just a simple audio player based React
[](https://www.npmjs.com/package/@oovui/audio-player-react)
[](https://standardjs.com)
## Install
```bash
npm i @oovui/audio-player-react
```
## Preview
## Simple Usage
> Just `url` props is Required
```jsx
import React, { Component } from 'react'
import OAudioPlayer from '@oovui/audio-player-react'
class App extends Component {
render () {
return (
)
}
}
```
## Advance Usage
```jsx
import React, { Component } from 'react'
import OAudioPlayer from '@oovui/audio-player-react'
const mediaUrl = require('./assets/nideyangzi.mp3');
const anthorMediaUrl = require('./assets/sound.mp3');
export default class App extends Component {
constructor(props){
super(props);
this.audioPlayerRef = React.createRef();
}
state = {
url: ''
}
componentDidMount() {
setTimeout(() => {
this.setState({
url: mediaUrl
})
}, 800);
}
onPlayingHandle() {
console.log("onPlayingHandle：audio start play")
}
onPauseHandle(){
console.log("onPauseHandle：audio pause")
}
doPlay=()=>{
this.audioPlayerRef.current.audioPlay();
}
doPause=()=>{
this.audioPlayerRef.current.audioPause();
}
doPlayAndPause=()=>{
this.audioPlayerRef.current.audioPlayPause();
}
togglePlay=()=>{
this.setState({
url: anthorMediaUrl
},function(){
this.doPlay();
})
}
render() {
const { url } = this.state;
return (
播放
暂停
播放和暂停
切歌
)
}
}
```
## Props
| Name | Type | Description |
| ---- | ---- | ----------- |
| **ref** | React.createRef() | get audio player Instance, can do Dom
| **url** | String | the audio player src(mp3), is `required`
| **title** | String | the audio player title
| **subtitle** | String | the audio player subtitle
| **pauseIcon** | String | the audio player pause icon
| **playingIcon** | String | the audio player playing icon
| **loop** | Boolean | default `false`, other value: `true`
| **preload** | String | default `metadata`, other value: `auto`、`none`
| **autoplay** | Boolean | default `false`, other value: `auto`、`none`
## Events
- playing
- pause
## Methods
- audioPlay()
- audioPause()
- audioPlayPause()
## Bootstrapped with create-react-library：
https://github.com/transitive-bullshit/create-react-library
## License
MIT © [https://github.com/oovui/audio-player-react](https://github.com/https://github.com/oovui/audio-player-react)