Breaking News: Grepper is joining You.com. Read the official announcement!

play audio in react

Add Answer

Clever Programmer answered on January 23, 2020 Popularity 10/10 Helpfulness 4/10

answer play audio in react

related play sound onload react

related audio in react

related play audio in react

related play audio react

related play sound onload react

play audio in react

Comment

import ReactAudioPlayer from 'react-audio-player';
//...
<ReactAudioPlayer
  src="my_audio_file.ogg"
  autoPlay
  controls
/>

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: www.npmjs.com

Tags: audio javascript

Link to this answer
Share Copy Link

Contributed on Sep 29 2020

Clever Programmer

0 Answers Avg Quality 2/10

Closely Related Answers

play sound onload react

Comment

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;

Popularity 10/10 Helpfulness 7/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jan 23 2020

webdevjaz

0 Answers Avg Quality 2/10

audio in react

Comment

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;

Popularity 10/10 Helpfulness 6/10 Language javascript

Source: stackoverflow.com

Tags: audio audi

Link to this answer
Share Copy Link

Contributed on Jul 20 2021

Fantastic Falcon

0 Answers Avg Quality 2/10

play audio in react

Comment

-1

npm install --save react-audio-player

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: www.npmjs.com

Tags: audio audi

Link to this answer
Share Copy Link

Contributed on Sep 29 2020

Clever Programmer

0 Answers Avg Quality 2/10

If you want something as simple as playing a simple error tone (for non-visual feedback in a barcode scanner environment, for instance), and don't want to install dependencies, etc. - it can be pretty simple. Just link to your audio file:

import ErrorAudio from './error.mp3'

And in the code, reference it, and play it:

var AudioPlay = new Audio (ErrorAudio);

AudioPlay.play();

Only discovered this after messing around with more complicated options.

1


Simple error tone

If you want something as simple as playing a simple error tone (for non-visual feedback in a barcode scanner environment, for instance), and don't want to install dependencies, etc. - it can be pretty simple. Just link to your audio file:

import ErrorAudio from './error.mp3'
And in the code, reference it, and play it:

var AudioPlay = new Audio (ErrorAudio);
AudioPlay.play();
Only discovered this after messing around with more complicated options.

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: audio audi

Link to this answer
Share Copy Link

Contributed on Jan 25 2023

Dayana-san

0 Answers Avg Quality 2/10

play sound onload react

Comment

-1

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;

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jan 23 2020

webdevjaz

0 Answers Avg Quality 2/10

play audio in react

Contents

More Related Answers

play audio in react

Closely Related Answers

play sound onload react

audio in react

play audio in react

play audio react

play sound onload react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.