ClippPlayer

The audio player widget used on Clip.ps

• Demo: https://dschoon.github.io/clipp-player
• Base Repo: https://www.npmjs.com/package/@dschoon/react-waves

Install

yarn add clipp-player

Usage

import React from 'react'
 
import ClippPlayer from 'clipp-player'
import mySong from './audio/mySong.mp3';
 
class App extends React.Component {
  render () {
    return (
      <ClippPlayer
        className={'clipp-player'}
        src="{mySong}"
        btnStyle={{
          color: '#FFF',
          background: '#49368B',
          borderRadius: '30px',
        }}
        counterStyle={{
          color: '#49368B',
        }}
        volume={1}
        zoom={1}
        options={{
          audioRate: 1,
          autoCenter: false,
          barGap: 1,
          cursorColor: '#FFF',
          cursorWidth: 1,
          fillParent: true,
          height: 50,
          hideScrollbar: true,
          normalize: true,
          partialRender: true,
          progressColor: '#49368B',
          responsive: true,
          waveColor: '#e1e5ea',
        }}
      />
    )
  }
}

License

MIT © Dan Schoonmaker (github)