Play 2 audio react

import React from 'react';
import playIcon from './images/play.png';
import pauseIcon from './images/pause.png';
import globalAudio from './globalAudio';

class Music extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 'play': false };
        this.name = props.src;
        this.togglePlay = this.togglePlay.bind(this);
    }

    togglePlay() {
        this.setState({'play': !this.state.play}, () => {
            this.state.play ? globalAudio.play(this.name) : globalAudio.pause(this.name);
        });
    }

    componentWillUnmount () {
        globalAudio.pause(this.name);
    }

    render() {
        return (
            <div style={this.props.style} className={this.props.className}>
                {this.state.play
                    ? <button className="audio-button" aria-label="Pause" onClick={this.togglePlay}><img src={pauseIcon} width="34" height="34" alt="Pause"></img></button>
                    : <button className="audio-button" aria-label="Play" onClick={this.togglePlay}><img src={playIcon} width="34" height="34" alt="Play"></img></button>}
            </div>
        );
    }
}

export default Music;

Source: stackoverflow.com

Similar codes

1 vote341 views1 answer
Button doesn't work while keyboard is shown react native
Javascript React
0 vote382 views1 answer
11. Which of the following metals catch fire on reaction with air? A. Magnesium B. Manganese C. Potassium D. Calcium
Javascript React
32 votes364 views5 answers
React disable eslint errors
Javascript React
0 vote358 views1 answer
React live chat widget
Javascript React
1 vote354 views1 answer
Tab navigation react-native without title
Javascript React
0 vote364 views1 answer
Refresh page by hand in react
Javascript React
0 vote483 views1 answer
How to prevent clickjacking in react js
Javascript React
0 vote364 views1 answer
How to remove console.log from react native app
Javascript React
19 votes352 views6 answers
Convert svg to react component
Javascript React
0 vote369 views1 answer
React proxy to flask server
Javascript React