Audio in react

import React, { useState, useEffect } from "react";

const useAudio = url => {
  const [audio] = useState(new Audio(url));
  const [playing, setPlaying] = useState(false);

  const toggle = () => setPlaying(!playing);

  useEffect(() => {
      playing ? audio.play() : audio.pause();
    },
    [playing]
  );

  useEffect(() => {
    audio.addEventListener('ended', () => setPlaying(false));
    return () => {
      audio.removeEventListener('ended', () => setPlaying(false));
    };
  }, []);

  return [playing, toggle];
};

const Player = ({ url }) => {
  const [playing, toggle] = useAudio(url);

  return (
    <div>
      <button onClick={toggle}>{playing ? "Pause" : "Play"}</button>
    </div>
  );
};

export default Player;

Source: stackoverflow.com

Similar codes

1 vote107 views1 answer
Z index react native
Javascript React
8 votes143 views2 answers
Useref in react typescrpt
Javascript React
0 vote165 views1 answer
Try catch in react native
Javascript React
0 vote134 views1 answer
React router dom return undefined
Javascript React
4 votes150 views1 answer
Error Invalid regular expression: /(.*\\__fixtures__\\.*|node_modules[\\\]react[\\\]dist[\\\].*|website\\node_modules\\.*|heapCapture\\bundle\.js|.*\\__tests__\\.*)$/: Unterminated character class.
Javascript React
0 vote160 views1 answer
React native generate app hash without play console
Javascript React
23 votes151 views4 answers
Click to copy react
Javascript React
18 votes145 views3 answers
How To Hide React Navigation Header in React Native
Javascript React
0 vote168 views1 answer
Navigation.openDrawer is not a function react native
Javascript React
0 vote147 views1 answer
React throttle render
Javascript React