如何在不使用按钮的情况下在React中播放音频文件？

我是React的新手，正在尝试创建Pomodoro 25 + 5计时器之一。

我需要设置一个音频文件，使其在时钟为零时开始播放，但是尽管尝试了许多在线提示，但我仍无法弄清楚如何播放音频。

我<audio></audio>在带有源链接的文件末尾有一个标记，但是我不知道一旦时钟达到零就如何启动它。通过将它传递给按钮上的“ onClick”属性（不是练习的重点），我设法做到了这一点，但是动态地播放它却无法搞清楚。

这是渲染计时器的组件（忽略科学怪人的怪兽startCountdown）：

class Clock extends Component {
    state = {
        minutes: 25, 
        seconds: 0,
        breakLength: 5,
        sessionLength: 25,
        isOn: false,
        count: 1,
        type: true
    }
  startCountdown = () => {
    this.buzzer();
    this.setState({
      isOn: true,
    })
    this.timer = setInterval(() => this.setState({
        count: this.state.seconds === 1? this.state.count + 1 : null,
        seconds: this.state.seconds === 0 && this.state.minutes === 0? 0 : this.state.seconds === 0 && this.state.minutes > 0? 59 : this.state.seconds - 1,
        minutes: this.state.minutes === 0 && this.state.seconds === 0 && !this.state.type
            ? this.state.breakLength
            : this.state.minutes === 0 && this.state.seconds === 0 && this.state.type
                ? this.state.sessionLength
                : this.state.minutes === 0 && this.state.seconds > 0
                ? 0 
                : this.state.minutes - this.state.count,
        type: this.state.minutes === 0 && this.state.seconds === 1? !this.state.type : this.state.type
    }), 1000);
  }
  stopCountdown = () => {
      this.setState({
          isOn: false,
      })
      clearInterval(this.timer)
  }
  resetCountdown = () => {
      this.setState({
        minutes: 25, 
        seconds: 0,
        breakLength: 5,
        sessionLength: 25,
        isOn: false,
        count: 1,
        type: true
      })
      clearInterval(this.timer)
  }
  buzzer = () => {
    this.audioBeep = new Audio(this.props.src);
    if (this.state.minutes === 0 && this.state.seconds === 1)
    this.audioBeep.play();
  }
breakArrowUp = () => {
    this.setState({
      breakLength: this.state.breakLength < 60? this.state.breakLength + 1 : this.state.breakLength
    })
}
breakArrowDown = () => {
  this.setState({
    breakLength: this.state.breakLength > 1? this.state.breakLength - 1 : 1
  })
}
sessionArrowDown = () => {
  this.setState({
      sessionLength: this.state.isOn? this.state.sessionLength : this.state.sessionLength > 1? this.state.sessionLength - 1: this.state.sessionLength,
      minutes: this.state.isOn? this.state.minutes : this.state.sessionLength > 1? this.state.sessionLength - 1 : 1,
      seconds: this.state.isOn? this.state.seconds : 0,
      count: 1
  })
}
sessionArrowUp = () => {
  this.setState({
      sessionLength: this.state.isOn? this.state.sessionLength : this.state.sessionLength < 60? this.state.sessionLength + 1: this.state.sessionLength,
      minutes: this.state.isOn? this.state.minutes : this.state.sessionLength < 60? this.state.sessionLength + 1: this.state.sessionLength,
      seconds: this.state.isOn? this.state.seconds : 0,
      count: 1
  })
}
    render() {
        const {breakLength, sessionLength, minutes, seconds} = this.state; 
        let fontColor = this.state.minutes >= 1? "black" : "red";
        return ( 
            <React.Fragment>
                <div className="container-fluid p-0 text-center w-100">
                    <h1 className="text-center p-2">25 + 5 Clock</h1>
                    <div className="container text-center w-50">
                    <div className="row">
                        <h3 id="break-label" className="col text-center p-2">Break Length</h3>
                        <h3 id="session-label" className="col text-center p-2">Session Length</h3>
                    </div>
                    </div>
                    <div className="container text-center w-50">
                        <div className="row">
                        <div className="col">
                            <button id="break-decrement" className="btn" onClick={this.breakArrowDown}><i className="fas fa-arrow-circle-down"></i></button>
                            <span id="break-length" className="m-2">{breakLength}</span>
                            <button id="break-increment" className="btn" onClick={this.breakArrowUp}><i className="fas fa-arrow-circle-up"></i></button>
                        </div>
                        <div className="col">
                            <button id="session-decrement" className="btn" onClick={this.sessionArrowDown}><i className="fas fa-arrow-circle-down"></i></button>
                            <span id="session-length" className="m-2">{sessionLength}</span>
                            <button id="session-increment" className="btn" onClick={this.sessionArrowUp}><i className="fas fa-arrow-circle-up"></i></button>
                        </div>
                        </div>
                    </div>
                    <div className="container text-center border rounded w-25 p-2" style={{color: fontColor}}>
                    <h4 id="timer-label">{this.state.type? "Session" : "Break"}</h4>
                        <span id="time-left">{`${minutes >= 10? minutes : "0" + minutes}:${seconds >= 10? seconds : "0" + seconds}`}</span>
                    </div>
                    <div className="container text-center w-25 p-2">
                        <button id="start_stop" className="btn" onClick={this.playStop()}><i className="fas fa-play"></i><i className="fas fa-pause"></i></button>
                        <button id="reset" className="btn" onClick={this.resetCountdown}><i className="fas fa-sync-alt"></i></button>
                    </div>
                    <audio id="beep" preload="auto"
        src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/audio/BeepSound.wav"></audio> 
                </div>
            </React.Fragment>
         );
    }
    playStop() {
        let func = this.state.isOn? this.stopCountdown : this.startCountdown;
        return func     
    }
}
 
export default Clock;```