Material UI Player

Simple React components for playing audio and video, using material-ui

• AudioCard: Audio element with controls
• VideoCard: Video element with controls
• SoundButton: IconButton to only play audio files (ideal for short audios)

Contents

• Why use this package
• Usage
• Props
• Callback props
• Note
• License

Why use this package

• Allow customization on traditional <audio> and <video> HTML elements
• Easy play media files stored in Firebase Storage or anywhere need to retrieve the download URL
• Material-UI components like : theming, customizations and low level components
• Use modern React hook and coding conventions
• Documentation made with Storybook

Usage

npm install material-ui-player # or yarn add material-ui-player

import React from 'react'
import { AudioCard, VideoCard } from 'material-ui-player'

// Relative URL - play a media from same origin
<AudioCard src={'/audio.mp3'} />
<VideoCard src={'/video.mp4'} />
<SoundButton src={'/audio.mp3'} />

// Absolute URL - play a media from external source
<AudioCard src={'https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_1MG.mp3'} />
<VideoCard src={'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'} />
<SoundButton src={'https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_1MG.mp3'} />

// Promise retrieve URL
<AudioCard src={fetch('<my url>')} />
<VideoCard src={fetch('<my url>')} />
<SoundButton src={fetch('<my url>')} />

Props

Prop | Description | Default | Component ---- | ----------- | ------- | --------- src | string or Promise<string> or () => string or () => Promise<string> - The url of a media to play  ◦  Can be a relative or absolute url A Promise resolved into a string (the url) after Play button clicked. This case can be useful when you are using Firebase Storage, where you need to call an API to retrieve the download Url. | (mandatory) | all forward | Set to true or falsy to show forward button | undefined | AudioCard, VideoCard backward | Set to true or falsy to show backward button | undefined | AudioCard, VideoCard autoplay | Set to true or falsy to set autoplay on audio | undefined | AudioCard, VideoCard loop | Set to true or falsy to set loop on audio | undefined | AudioCard, VideoCard width | Set the width of the player | Audio: undefined (fit parent container) Video: undefined (video maintain original size, card fit parent container) | AudioCard, VideoCard speed | Set to true or falsy to show speed control | undefined | AudioCard, VideoCard mute | Set to true or falsy to show mute button | undefined | AudioCard, VideoCard fadeSettings | Object with fadeInTime and fadeOutTime (number, seconds) to fadein and fadeout video | undefined | VideoCard thickness | Set sliders line thickness (thin, medium or large) | medium | AudioCard, VideoCard background | Set container card background | inherit | all PlayProps | enable customization using Material UI IconButton props | undefined | all BackwardProps, StopProps, PauseProps, ForwardProps, MuteProps | enable customization using Material UI IconButton props | undefined | AudioCard, VideoCard

Callback props

Callback props take a function that gets fired on various player events:

Prop | Description | Component ---- | ----------- | --------- onForwardClick | Called when forward button is clicked | AudioCard, VideoCard onBackwardClick | Called when backward button is clicked | AudioCard, VideoCard onEnded | Called when media ended | AudioCard, VideoCard

Demo

Try it using the storyboard

Note

Please note:

• As required from Material UI you mast be sure to use this library's components inside a <ThemeProvider> wrapper, in order to use your custom theme.
• This module has following peerDependencies:

    "@mui/material": ">=5.0.0",
    "@mui/styles": ">=5.0.0",
    "react": ">=17.0.0",
    "react-dom": ">=17.0.0"

NB: Still need to use Material UI 4? Use version 0.2.6

License

Released under MIT License