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 vote120 views1 answer
React-data-table-component edit action
Javascript React
0 vote110 views1 answer
React Redux reducer combineReducers exemple
Javascript React
4 votes99 views1 answer
Import all images from folder reactjs
Javascript React
0 vote109 views1 answer
Convert table to excel reactjs
Javascript React
1 vote100 views1 answer
React router last page
Javascript React
0 vote104 views1 answer
Error: bundling failed: Error: Unable to resolve module react-native-community/toolbar-android
Javascript React
0 vote114 views1 answer
Reset reactive state vue 3
Javascript React
4 votes110 views2 answers
How to skip the undefined values from the list and filter the rest of the data in react js
Javascript React
32 votes121 views1 answer
Install react router in react app
Javascript React
0 vote145 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