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.
;;; const muiTheme = ; <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.
;;; const muiTheme = ; 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
;;; const muiTheme = ; const useStyles = ; <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