class Player extends React.Component {
  constructor(props) {
    super(props);
    //I thought I would be able to control everything with props and states
    this.state = {playstate: this.props.playstate};
    this.handlePlay.bind(this);
  }

  componentDidMount() {
    this.handlePlay();
  }

  togglePlay() { //I don't understand how to reach this, or reproduce its behavior
    this.setState({ playstate: !this.state.playstate }, this.handlePlay);
  }

  handlePlay() {
    if (this.state.playstate) this.refs.audio.play();
    else this.refs.audio.pause();
  }

  render() {
    return (
      <audio className="audio-element" {...this.props} ref="audio"></audio>
    );
  }
};