material-ui-player

React/Material-UI Audio and Video Components


Keywords
react, material-ui, mui, audio, video
License
MIT
Install
npm install material-ui-player@1.0.4

Documentation

Material UI Player

NPM version Types included install size minisize

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

  • 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