Naturaltts-ui-audio-player NPM

Naturaltts UI Audio Player

Audio player for naturaltts ui based on material ui design player. Requires Material UI 4 version.

Base

Just add your audio link to src and your ready to go.

import { createMuiTheme } from '@material-ui/core';
import { ThemeProvider } from '@material-ui/styles';
import AudioPlayer from 'naturaltts-ui-audio-player';

const muiTheme = createMuiTheme({});

<ThemeProvider theme={muiTheme}>
  <AudioPlayer src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" />
</ThemeProvider>;

Available props

A bunch of props will help to customize component.

import { createMuiTheme } from '@material-ui/core';
import { ThemeProvider } from '@material-ui/styles';
import AudioPlayer from 'naturaltts-ui-audio-player';

const muiTheme = createMuiTheme({});

const src = [
  'https://converter-audio-example-1.s3.eu-central-1.amazonaws.com/Russell%2C%2BMale%2B-%2BEnglish%2C%2BAustralian+(1)+(online-audio-converter.com).wav',
  'https://converter-audio-examples.s3.eu-central-1.amazonaws.com/Russell%2C+Male+-+English%2C+Australian.mp3'
];

<ThemeProvider theme={muiTheme}>
  <AudioPlayer
    elevation={1}
    width="100%"
    variation="default"
    spacing={3}
    download={true}
    autoplay={true}
    order="standart"
    preload="auto"
    loop={true}
    src={src}
  />
</ThemeProvider>;

`src`

Could accept audio link or array of audio links.

type: string | array
required

`image`

Path to image

type: string

`title`

Title for the player

type: string

`image`

Description for the player

type: string

`width`

Corresponds to style property width.

default: 100%
type: string

`variation`

Component view variation.

default: default
options: default, primary, secondary
type: string

`download`

Display download button (icon) with dropdown of available audio tracks for download.

default: false
type: boolean

`autoplay`

Corresponds to HTML audio autoplay attribute.

default: false
type: boolean

`elevation`

Shadow depth. Corresponds to elevation prop of Material Ui Paper component.

default: 1
type: number

`rounded`

Rounded corners of the container. Corresponds to square prop of Material Ui Paper component.

default: false
type: boolean

`spacing`

Spacing for root Grid container. Corresponds to spacing prop of Material Ui Grid component.

default: 3 (2 - mobile)
type: number

`order`

Order of Slider and controls buttons.

default: standart
options: standart, reverse
type: string

`loop`

Display loop button.

default: false
type: boolean

`preload`

Corresponds to HTML audio attribute preload.

default: auto
type: string

`useStyles`

The attribute for customizing component styles. Accept the result of makeStyles function.

type: func

Customize component styles

import { createMuiTheme } from '@material-ui/core';
import { ThemeProvider } from '@material-ui/styles';
import AudioPlayer from 'naturaltts-ui-audio-player';

const muiTheme = createMuiTheme({});

const useStyles = makeStyles(theme => {
  return {
    root: {
      [theme.breakpoints.down('sm')]: {
        width: '100%'
      }
    },
    loopIcon: {
      color: '#3f51b5',
      '&.selected': {
        color: '#0921a9'
      },
      '&:hover': {
        color: '#7986cb'
      },
      [theme.breakpoints.down('sm')]: {
        display: 'none'
      }
    },
    playIcon: {
      color: '#f50057',
      '&:hover': {
        color: '#ff4081'
      }
    },
    volumeIcon: {
      color: 'rgba(0, 0, 0, 0.54)'
    },
    volumeSlider: {
      color: 'black'
    },
    progressTime: {
      color: 'rgba(0, 0, 0, 0.54)'
    },
    mainSlider: {
      color: '#3f51b5',
      '& .MuiSlider-rail': {
        color: '#7986cb'
      },
      '& .MuiSlider-track': {
        color: '#3f51b5'
      },
      '& .MuiSlider-thumb': {
        color: '#303f9f'
      }
    }
  };
});

<ThemeProvider theme={muiTheme}>
  <AudioPlayer
    width="500px"
    useStyles={useStyles}
    src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
    loop={true}
  />
</ThemeProvider>;