Volume

This is an example using the onVolume. It receives a number as an argument and sets it as the new volume value.

import React from 'react';
import useRoover from 'roover';

const src =
  'https://storage.googleapis.com/media-session/elephants-dream/the-wires.mp3';

const App = () => {
  const {
    initial,
    loading,
    ready,
    playing,
    paused,
    volume,
    onPlay,
    onPause,
    onVolume,
  } = useRoover({
    src,
    autoplay: true,
  });

  return (
    <div>
      <p>Loading: {loading ? 'true' : 'false'}</p>
      <p>Ready: {ready ? 'true' : 'false'}</p>
      <button onClick={onPlay}>Play</button>
      <button onClick={onPause}>Pause</button>
      {/*
        The onVolume function receives a number as argument.
        Be careful when using with an element that returns a string,
        such as this following one.
      */}
      <input type="range" value={volume} onChange={onVolume} min={0} max={1.0}>
    </div>
  );
};