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 vote137 views7 answers
How to trim dates in react
Javascript React
-1 vote166 views1 answer
Component navigation without changin the url react router
Javascript React
0 vote135 views1 answer
How to stop server of react js
Javascript React
0 vote181 views1 answer
React native carriage return
Javascript React
0 vote147 views1 answer
React load script after render
Javascript React
0 vote154 views1 answer
React document documentMode not found
Javascript React
23 votes204 views2 answers
Reactjs app change port
Javascript React
0 vote100 views1 answer
Rendering an array in react
Javascript React
63 votes154 views3 answers
Concat two arrays in react
Javascript React
20 votes153 views4 answers
On enter key press react
Javascript React