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>;

Available classes

• root
• playIcon
• volumeIcon
• muteIcon
• mainSlider
• volumeSlider
• downloadsIcon
• pauseIcon
• loopIcon
• progressTime
• downloadsContainer
• downloadsItemLink
• downloadsItemText