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

0 vote353 views1 answer
Drawer navigation set width react native
Javascript React
3 votes340 views2 answers
React router hooks
Javascript React
2 votes366 views1 answer
Combining two styles react native
Javascript React
0 vote413 views3 answers
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
Javascript React
13 votes391 views1 answer
React js vs jsx
Javascript React
0 vote412 views1 answer
Update an object key value in state react
Javascript React
0 vote381 views1 answer
Input type disappear side scroll react
Javascript React
2 votes393 views1 answer
React native responsive font
Javascript React
8 votes335 views2 answers
Useref in react typescrpt
Javascript React
0 vote440 views1 answer
Modal in react
Javascript React