text: import React, { Component } from 'react';
  import './Metronome.css'
  import click1 from './clicks/click1.wav';
  import click2 from './clicks/click2.wav'
  
  export default class Metronome extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        playing: false,
        count: 0,
        bpm: 122,
        beatsPerMeasure: 4
      }
  
      this.click1 = new Audio(click1);
      this.click2 = new Audio(click2);
    }
  
    handleBpmChange = e => {
      const bpm = e.target.value;
  
      if (this.state.playing) {
        clearInterval(this.timer);
        this.timer = setInterval(this.playClick, (60 / bpm) * 1000);
  
        this.setState({
          count: 0,
          bpm
        });
      } else {
        this.setState({ bpm });
      }
    }
  
    playClick = () => {
      const { count, beatsPerMeasure } = this.state;
  
      if (count % beatsPerMeasure === 0) {
        this.click2.play();
      } else {
        this.click1.play();
      }
  
      this.setState(state => ({
        count: (state.count + 1) % state.beatsPerMeasure
      }));
    }
  
    startStop = () => {
      const tempo = (60 / this.state.bpm) * 1000;
  
      if (this.state.playing) {
        clearInterval(this.timer);
        this.setState({ playing: false });
      } else {
        this.timer = setInterval(
          this.playClick,
          (60 / this.state.bpm) * 1000);
        this.setState({
          count: 0,
          playing: true,
        },
          this.playClick
        );
      };
    }
  
    render() {
      const { playing, bpm } = this.state;
  
      return (
        <div className="metronome">
          <div className="bpm-slider">
            <div> {bpm} BPM </div>
            <input
              type="range"
              min="44"
              max="288"
              value={bpm}
              onChange={this.handleBpmChange}
            />
          </div>
          <button onClick={this.startStop}>
            {playing ? 'Stop' : 'Start'}
          </button>
        </div>
      )
    }
  }