Usage

npm install react-simple-audio-player --save

import React, { Component } from 'react'
import PlayAudio from 'react-simple-audio-player'

class App extends Component {
  render () {
    return <PlayAudio url={'http://www.noiseaddicts.com/samples_1w72b820/4186.mp3'} />
  }
}
export default App;

The component uses react-player package to play media and add simple design and controls to extend the package.

Props

Prop | Description | Default ---- | ----------- | ------- url | The url of an audio to play width | Set the width and height (height is equal to width) of the player | 60px simpleMode | Set to true disable seconds counter, automatically true with width less then 45px | false colorScale | Pass array of 5 colors for theme personalisation | scaled red shades (see demo)

Changing color theme example

import React, { Component } from 'react'
import PlayAudio from 'react-simple-audio-player'
import chroma from "chroma-js"

const colorScale = chroma
    .scale([
        '#0199CB',
        '#ffffff',
    ])
    .mode('lch')
    .colors(5)

class App extends Component {
    render () {
        return <PlayAudio url={'http://www.noiseaddicts.com/samples_1w72b820/4186.mp3'} colorScale={colorScale} />
    }
}
export default App

Result: