Воспроизведение mp3 на onClick в React

Question

Я хочу проигрывать mp3 в React, когда пользователь нажимает кнопку.Это всего лишь тест, у меня есть два файла: App.js и Audio.js.

Audio содержит класс Sounds и возвращает Button.Я импортировал его в App.js.

App.js

import React, { Component } from 'react';
import img from './assets/image/img1.png';
import './App.css';
import ReactDOM from 'react-dom';
import Sounds from './components/Audio'

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={ img } className="imgDino" alt="a cool dinosaure" />
          <Sounds />
        </header>
      </div>
    );
  }
}

export default App;

Audio.js

import React, { Component } from 'react';
import Button from '@material-ui/core/Button';

class Sounds extends React.Component {
  constructor(props) {
    super(props);

      this.state = { play: false };
      this.src = './assets/sound/sound1.mp3';
      this.audio = new Audio(this.src);
      this.play = this.play.bind(this);
    }

    play() {
      this.setState({ play: this.state.play });
      console.log(this.audio);
      this.state.play = this.audio.play();
    }

    render() {
      return (
        <div>
          <Button onClick={ this.play }>{ 'ROAAR!' }</Button>
        </div>
      );
   }
}

export default Sounds;

Консоль сказала:

<audio preload="auto" src="./assets/sound/sound1.mp3">

Нет проблем, но у меня нет звука.