play sound onload 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;

Posted by: Guest on January-23-2020

Source

class Music extends React.Component { state = { play: false } audio = new Audio(this.props.url) componentDidMount() { audio.addEventListener('ended', () => this.setState({ play: false })); } componentWillUnmount() { audio.removeEventListener('ended', () => this.setState({ play: false })); } togglePlay = () => { this.setState({ play: !this.state.play }, () => { this.state.play ? this.audio.play() : this.audio.pause(); }); } render() { return ( <div> <button onClick={this.togglePlay}>{this.state.play ? 'Pause' : 'Play'}</button> </div> ); } } export default Music;

Code answers related to "play sound onload react"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Answers for "play sound onload react"

Code answers related to "play sound onload react"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us