react-media-control

react-media-control

Media controller built using React and Material-UI libraries.

Installation

React-media-control is available as an npm package. You can install it using:

npm install react-media-control
 
#or 
yarn add react-media-control

Please note that depends on @material-ui/core which must also be installed.

Usage

Here is a quick example to get you started.

import React, { useState, useEffect, createRef } from 'react';
import {
  MediaControl,
  PlayPauseButton
  MuteUnmuteButton,
} from 'react-media-control';
 
const Example = () => {
  const [audio, setAudio] = useState();
  const audioRef = createRef();
 
  useEffect(() => {
    setAudio(audioRef.current);
  }, [audioRef]);
 
  return (
    <div>
      <audio
        ref={audioRef}
        src='/Jasmin.mp3'
      />
      <MediaControl media={audio}>
        <PlayPauseButton />
        <MuteUnmuteButton />
      </MediaControl>
    </div>
  );
}