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

1import ReactAudioPlayer from 'react-audio-player';
2//...
3<ReactAudioPlayer
4  src="my_audio_file.ogg"
5  autoPlay
6  controls
7/>
8

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;

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});