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

5 votes217 views2 answers
Svg react native
Javascript React
0 vote217 views1 answer
React userefrence example
Javascript React
18 votes204 views3 answers
How to hide header in react navigation
Javascript React
40 votes207 views4 answers
On click copy to clipboard react
Javascript React
0 vote272 views1 answer
React set multible attribute values
Javascript React
0 vote195 views1 answer
Event handling in react documentation
Javascript React
0 vote203 views1 answer
Difference in push and navigate in react Navigation
Javascript React
-1 vote213 views2 answers
React native scaling font
Javascript React
0 vote212 views1 answer
Slide hide animaition in react
Javascript React
1 vote218 views1 answer
React native app crashes without error
Javascript React