Audio react

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 vote129 views1 answer
React router dom 6 go back
Javascript React
0 vote118 views1 answer
Displaying the date react
Javascript React
5 votes126 views1 answer
Switch was not found in 'react-router-dom'
Javascript React
1 vote136 views2 answers
Export 'Redirect' (imported as 'Redirect') was not found in 'react-router-dom'
Javascript React
0 vote121 views1 answer
React router native back button
Javascript React
0 vote119 views1 answer
Form.Control textarea react bootstrap
Javascript React
0 vote142 views1 answer
Websocket with Node and React
Javascript React
2 votes137 views2 answers
How to export multiple functions react from one file
Javascript React
126 votes189 views4 answers
Npm create react app
Javascript React
20 votes128 views6 answers
Build apk react native
Javascript React