@oovui/audio-player-react

audio-player-react

just a simple audio player based React

Install

npm i @oovui/audio-player-react

Preview

Simple Usage

Just url props is Required

import React, { Component } from 'react'

import OAudioPlayer from '@oovui/audio-player-react'

class App extends Component {
  render () {
    return (
      <OAudioPlayer 
        url = 'example.mp3'
        title = "你的样子"
        author = "罗大佑" />
    )
  }
}

Advance Usage

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 (
      <div style={{ marginTop: '50px' }}>
        <OAudioPlayer
          ref={ this.audioPlayerRef }
          url={url}
          title="你的样子"
          subtitle="罗大佑"
          onPlaying={this.onPlayingHandle.bind(this)}
          onPause={this.onPauseHandle.bind(this)}
          />
          <button onClick={this.doPlay}> 播放 </button>
          <button onClick={this.doPause}> 暂停 </button>
          <button onClick={this.doPlayAndPause}> 播放和暂停 </button>
          <button onClick={this.togglePlay }> 切歌 </button>
      </div>
    )
  }
}

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