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

0 vote134 views1 answer
React-metismenu-router-link
Javascript React
3 votes121 views2 answers
React link without underline
Javascript React
21 votes127 views6 answers
React native vector icons
Javascript React
0 vote181 views3 answers
SyntaxError: /mnt/c/myAppFile/hello-rails-react/app/javascript/components/Greeting.js: Support for the experimental syntax 'jsx' isn't currently enabled rails
Javascript React
4 votes117 views2 answers
Onitemclick react
Javascript React
0 vote135 views1 answer
React native passing params to nested navigators
Javascript React
0 vote150 views1 answer
Line separator with text in the center react native
Javascript React
1 vote138 views1 answer
React native flatlist hide scrollbar
Javascript React
6 votes76 views2 answers
React-router-dom get current route
Javascript React
0 vote130 views1 answer
Form.Control textarea react bootstrap
Javascript React