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