showing results for - "audio in react"
Rebeca
22 Oct 2019
1import React, { useState, useEffect } from "react";
2
3const useAudio = url => {
4  const [audio] = useState(new Audio(url));
5  const [playing, setPlaying] = useState(false);
6
7  const toggle = () => setPlaying(!playing);
8
9  useEffect(() => {
10      playing ? audio.play() : audio.pause();
11    },
12    [playing]
13  );
14
15  useEffect(() => {
16    audio.addEventListener('ended', () => setPlaying(false));
17    return () => {
18      audio.removeEventListener('ended', () => setPlaying(false));
19    };
20  }, []);
21
22  return [playing, toggle];
23};
24
25const Player = ({ url }) => {
26  const [playing, toggle] = useAudio(url);
27
28  return (
29    <div>
30      <button onClick={toggle}>{playing ? "Pause" : "Play"}</button>
31    </div>
32  );
33};
34
35export default Player;
36
Badis
01 Jan 2017
1import ReactAudioPlayer from 'react-audio-player';
2//...
3<ReactAudioPlayer
4  src="my_audio_file.ogg"
5  autoPlay
6  controls
7/>
8
Hazel
12 Mar 2019
1class Music extends React.Component {
2  state = {
3    play: false
4  }
5  audio = new Audio(this.props.url)
6
7  componentDidMount() {
8    audio.addEventListener('ended', () => this.setState({ play: false }));
9  }
10
11  componentWillUnmount() {
12    audio.removeEventListener('ended', () => this.setState({ play: false }));  
13  }
14
15  togglePlay = () => {
16    this.setState({ play: !this.state.play }, () => {
17      this.state.play ? this.audio.play() : this.audio.pause();
18    });
19  }
20
21  render() {
22    return (
23      <div>
24        <button onClick={this.togglePlay}>{this.state.play ? 'Pause' : 'Play'}</button>
25      </div>
26    );
27  }
28}
29
30export default Music;
Valentina
29 Jul 2019
1import React from 'react';
2import ReactDOM from 'react-dom';
3import ReactTestUtils from 'react-dom/test-utils';
4import ReactAudioPlayer from '../src/index.tsx';
5describe('ReactAudioPlayer', function() {
6  const song = './fixtures/turkish_march.ogg';
7  test('renders an audio element', function() {
8    const instance = ReactTestUtils.renderIntoDocument(
9      <ReactAudioPlayer />
10    );
11    const instanceEl = ReactDOM.findDOMNode(instance);
12    expect(instanceEl.tagName).toBe('AUDIO');
13  });
14  test('sets the loop attribute if provided', function() {
15    const instance = ReactTestUtils.renderIntoDocument(
16      <ReactAudioPlayer
17        src={song}
18        loop
19      />
20    );
21    const instanceEl = ReactDOM.findDOMNode(instance);
22    expect(instanceEl.getAttribute('loop')).not.toBe(null);
23  })
24  test('sets title', function() {
25    const instance = ReactTestUtils.renderIntoDocument(
26      <ReactAudioPlayer
27        src={song}
28        title="Turkish march"
29      />
30    );
31    const instanceEl = ReactDOM.findDOMNode(instance);
32    expect(instanceEl.getAttribute("title")).toBe("Turkish march");
33  })
34  test('receives all custom props', function() {
35    const instance = ReactTestUtils.renderIntoDocument(
36      <ReactAudioPlayer
37        src={song}
38        name="custom-name"
39        data-id="custom-data"
40        controlsList="nodownload"
41      />
42    );
43    const props = Object.keys(instance.props);
44    expect(props).toContain('name');
45    expect(props).toContain('data-id');
46    expect(props).toContain('controlsList');
47  });
48});
queries leading to this page
audio on load reactvolume audio reactjsplayer react audioreact new sound object audio player in react js mediumaudio player in reactjsreact play audioreact audio jukeboxreact on play audioimport audio in reactjsx audio controlshow to play object audio raectaudio player using reactaudio methods reactreact play sounds locallyhow to play a sound in javascript reactreact audio play buttonssimple react audio playerreact audio htmlplay sounds react appimplement audio player in reactreact sound player work on click but not automaticallyaudio tag in reactplay audio reactjsaudio javascript in react componentplay audio in jsxreact audio player demoplay audio from url reacthow to input audio into react pagemusic player in reactreact button play soundjsx audio buttonplay sound when component mount in react jsplay song reactreact audioreact audio player styleplay audio in react jsreact play sounddupload audio and play reactcreate audio player in react jsauto play audio in html react jsreact 2cjs audio player apireact player mp3how to play audio on computer reacthow to play audio reactjsmake a react audio seekbaraudio in react jsaudio play reactusing audio in reactaudio players in react jsplayer audio reactplay javascript audio in reactreact player audio examplereact play sound on mounthow to add a reactjs audio player to websitehow to create audio player in reacthow to play audio on page load reactreact audio playterplayer audio reactjsreact audio player carduse audios in reactausio in reactreact js audio controlsreact how to play audioadd audioplay to my music in reactreact audio player libraryreact audio player onclick playget playing audio signal from reacthow to make button play song reacthow to use an audio player package in reactjsaudio in jsxautoplay audio reactjshow play audio files on reactreact make soundhow to play a sound on an event reactreact audio player html cssplay sound javascript reactreact js audioexample of react audio playerreactjs sound effectsaudio html reactplay audio button reactusesound hookreact audio player with playback play audio in html5 from request reactcreating a audio player in reactreact sound effectsreact audio stream playerhow to play audio in react js 3caudio 3e reactjsreact play audio on mobileadding audio to reactaudio play 28 29 in reactget song to play in modal reactreact playeraudio player npm reactauto play audio in reactreact js import mp3 in audio streamplay audio onclick reacthow to play sound file in reactaudio player react jsaudio element in reactreact play audio on loadplay audi reactaudio onclick pause music not working react typescripthow to play sound in react jsplay music with react nativehow to make audio player in reactplaysoundoncapture react taivereact audio player from linkhow to put sound on react appnew audio react classreact player sound filehow to use html audio in react jsreact sound play on clickplay sound with reactplay a sound in react jsminimal react audio playerreact how to run audioplay sound in reactjsplay a sound reactget noise to play when button is pressed in reactreact use audio player from apireact play sound on component renderreact play sound in backgroundreact onload audioplay sound in react eventreact music playeraudio player react libraryhow to use a react audio player packagereact audio playbackplay sound in react jsaudio 28 reacthtml audio in reacthow to use audio file in reactreact audio player uihtml play sound reactract audio playerreact audio stateplay sound onload reactreactjs audio playerplay sound on react appaudio player wave reactaudio component reactjsaudio react playerhow to implement audio player in reactreact play sound actionreact hooks audio pauseaudio onclick not working react typescriptplaying audio via reactjsreact press buton to play audiosound in react jsplay music onload reacthow to play audio on button click in reactreact audio player playlistreact audio player exaplesreact audio playerreact js play soundreact audioplayeraudio play reactreact 3caudioplayerhow to give sound access to a website in reactjsplaying audio in reactplaying sound in react jsaudio autoplay reacthow to play sound in reactreact player for audiomusic player with reactaudio events javascript reactaudioplayer in reactreact voice playerhow to click a button then play music in reactaudio element reactplay audio sound in react jsreact mp3 playerplay a sound in reactadding audio to react site 3astackoverflow comreact play mp3 audiohtml audio player react jshow to play sound on reactreact audio player from apiwhen order come start playing sound in react jsreact sound player player buttonhow put sound on react buttonreproduce audio reacton clicking button play welcome sound in react click play sound reacthow to play a sound reactreact play sound on eventreact play sound on clickplaying audio on reactreact switch by controlling soundhow to add audio on reacthow to add audio to reactjsthis audio reacthow to play audio in reactjsplay audio in raectplay sound api reactadd audio sound reactjsauido playing in reactsound on click reactplay audio in recat jsreact js live audio playerreact audio playaudio element player reactbuild an audio play with reactaudio play 28 29 reactreact web audio playerhow to play audio from event listener reactreactjs play audio filehow to trigger 3caudio 3e in reacthow to upload music to use with react audio playerreact play audio from urlhtml audio player code for reactaudio react propsplay auto audio in react 3fhow to play audios in reactplay sound when click image reactimporting fcmusic to reactreact drag and drop audio player npmreactaudioplayer npmreact audio player html csusing react audio playeruse audio reactreact audio playerreact audio player tutorialreact audio pusing audio in reactjsreact js listen to audio player how to give sound access to a website in react jsreact beep soundshow to play audio on reactadd audio to reactreactjs audioplay audio javascript reactplay audio in reacct jshow to play sound in jsxplaying audio file in reactreact play audio from filereactjs play audioplay a song in reactpause audio from page reactjs functionnew audio react jsaudio player mdn reactjsmusic player reactreact wave audio playerreact audio seekbarnew audio in reactplay audio for react jsreactaudioplayer npm react nativeaudio player reactreact audio in reactjs play sounds in reacthtml5 audio in reactreact audio video playerconditionally play audio reactjsthis audio play 28 29 in react componentreact play soundsreact audio player npmreact player audionew audio reacthow to use audio player in reactreact library for audio playreact auudiio pllayeraudio player components reactreact audi playerhow to play audio and controls in reactrecorder audio reactjsaudio player react looks goodreact play audio programatticallyhtml audio player in react js load audio reacthow to play and stop the audio tag in react jsfunction react play sound effectreact audio player notationhow run audio playlist reactaudio player library reacthow to play music with reactjslecteur music reactjsreact audio player samplesreact functional component audio playerplay audio on click reactadd audio to eve3ry click in reactaudio player reactjsreact audio elementimport sound file reacthow to play a song throughout the whole application 2breactload sound react jsreact audio tagplay sound javascript reacycreate audio player in react 3freact audio componentreact video player with audioreact js add audioplay mp3 in reactmusic player react jsreact audio soundaudio player react js templatesplay sound reactcreate audio player in reactsound player reactplay mp3 in react new audio 28 29how to import sound with reacthow to record audio in reactplay audio in reactreact simple audio playerplay audio corresponding to list item reacthow to add audio player reacthow to play audio with reactplay sound when button clicked in react componenthow to play audio in reactaudio in react javascriptaudio player in reactimplement the audio player in the reactjs mediumhow play audio in react jsreact download audio fileaudio in reactjsaudio reactreact play audio on button clickreact js audiosreact play audio serveraudio playing button reacthow to play audio file in reactplay sound in reactreact audio videoplay audio on reactreact soundreact audio player npmplay sound in react appreact js audio playerimplement audio player in react mediummake an audio player with reactload sound file in reactwelcome sound after componentdidmount in reactjshow play sound in reactreact play soundaudio plays for a second and stops reactjsreact check audio is completedhow to play audio from server reactjsreact new audio play 28 29react play sound onclickplay audio with reactplay music in click reaaudio player in react npmhow to play audio on page load in reactplay audio reactreact play audio repatedlyreact audio playlist playerplay sound from mp3 in reactaudio onclick pause music react typescriptreact play sound on functionthis audio play reactreact play sound for elementsplay audio web app reactreact how to play audio from a file sound play and sound pause code reactplay a sound using reactaccess audio time newaudio reactthow to make audio play on button click reactaudio media player using reactreact play song in background how to play audio reactuse sound reactreact play sound filereact audio player with controlsreact js this audio playreact player audioreact native audio player componentreact audio player htmlreact play a soundplay sound onclick reactreact js audio player with imagereact audio player demoreact js for audio playerjavascript react to soundnpm react audioplay audio no reactmake button play audio in reactaudio in reactreact speak audio file mp3react add a sound to a reactaudio play reactjsreact audio component downloaduse sound react play sound when screen loadshow to play a sound in react jsdownload sound from api reactsound music player reactreact play sound on call receivehow to import sound in reactreact sound 2cplay and sound pause codereact js play audiohow to add audio player in reacthow to play mp3 sound in reactreact audio play 28 29react audio player componentplay audio on button reacthow to test a sound is playing in react 3fplay sound file in reactreact js play sound on page openaudio play button reactreact audio player srcsimple audio player reactaudio object reactreact use audio playerreact js music playerplay sound in react app using urlreact audio loadhandle audio pause on typescript reactreact audio packagehow to add audio to reactsimple audio play in react jsaudio player with reactexecute a sound reactreact play audio on clickreact mobile audio playerreact audio player automaticreact audio player play on an actionput sound in reactembed music reactplay audio javascript in reactplay an audio when click image reacthow to play a sound in reactjsaudio reactjsreact play sound onclick examplereact get playback audioaudio play in reactjstrigger audio reactadd sound effect in reactjsreact play sound on state changeaudio tag html reacthow to make a react page play a soundreact how to play a soundhow to impor audio and play in reactfree audio music import to reacthow to play audio from a link reactreact html audio playeraudio seekbar in reactaudio tag react jsplay mp3 on axios return reactjsvideo 2faudio player reactreact play music using urlreact audio player component donereact audio player simpleaudio reachow to use audio in react jsreact audio player with ooksreact play soundwsplay audio in browser reactplay sound on click reacthow to play audio element from file in component reactjsreact new audiohtml5 audio player reactreact sound player ur 3bis it possible to store audio files in state variables reactjsplay audio in div reactaudio player componetnt reactvideo player with audio tracks reactplay sound react soundreact audio player examplehow to use audio tag in reactplay audio samples in reactaudio component reacthow to call component and play audio inside it reactjsreact video playerhow to use audio in reactplay sound react jsnpm react aduio player librariesaudio attributes react reactaudioplayer function componentplay sound on page load react jsadd audio in reactreact html5 audio playerreact sound player 3caudio 3e in reactplay audio from server react jsreact muusic palyerhow to use javascript play 28 29 in react classaudio react jsaudio player for reactjsimplement audio player in react js mediumreactjs play a soundaudio file on react jsis it possible to store audio files in state variable reactjsreactjs audio player npmplay sound effect in react jsaudio 28 29reactreact use js audio play audio from urlaudio player in react apphow stream audio player reactreact event play soundaudio player reacytadd audio reactadd audio in react jswave audio player reactreactjs play soundreact audio player autoplayantd audio playerplaying audio reactautomatic play sound in react jsreact onload musicadd audio and video in react jsaudio player library in reactreact online audio playercreate audio player reactpause audio from page reactjsreact play local audioreactaudioplayer functionplay music react jshow to add audio in reactadd sound to react appget audio to play reactaudio players reactplay audio react jsaudio play in react jsreact load audioadding audio to reactjs appreactjs audio player examplehow to do audio record in reactjsreact audio player custommodal play audio reactreact sound local state playhow to play voice in reactplay audio using button handler and audio element reactreactjs music playerreact record audioreact audio playhow to pass audio to audio player reactreact audio player from filenpm react audio playerhow to create video player with audio in react jsreact play sound when component mountedaudio react jshow play audio in reactreact sound playreact audio player editorreact audio recorderrestyle react audio playeraudio player with react jsreact play audio file 21npm audio seekbaraudio player in react jsaudio with reactjsaudio reactreact play audio from backendplaysound react jsaudio tag reactreact audio player npmract js audiosound react play on startplay audio on react component loadaudioplayer reactplay sound in react using usesound onloadreact play pause sound fileaudio in react