Using React Reference to play HTML audio functions resulting in undefined errors: 25+5 Clock

[michaelnicol]

Hello,

I am working on the React 25+5 clock.

25 + 5 Clock

In the JS code, on line 78, I have a functions to play the sound linked to the audio element on line 227 under the reference created on line 27.

<audio 
ref={this.soundRef}
id="beep"
src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/audio/BeepSound.wav"
/>

On line 103, I have a setInterval function that runs and calls the playSound() function when the seconds hits zero.

playSound()

    playSound() {
      this.soundRef.pause()
      this.soundRef.currentTime = 0
      this.soundRef.play()
    }

Interval:

  start_stop() {
      /* 
      Because refering to "this" in a setInterval will not refer to react component, I create a reference to React this and store it in self.
      */
      let self = this
      // If clock is paused
      console.log(self.soundRef)
      if (self.state.paused) {
        let tempIntervalID = setInterval(function () {
          if (self.state.status == "Session") {
            // Create a temp value for current time
            let newSessionTime = self.state.countSession;
            // subtract while seconds-1 >= 0
            if (newSessionTime-1 >= 0) {
              newSessionTime-=1;
            } 
            if (newSessionTime == 0) {
              console.log("playing")
              self.playSound();
            }
            console.log(newSessionTime, self.formatTime(newSessionTime))
            // Set the state of the component each interval loop.
            // Resets the value of the break timer.
            // Status is set to Break if clock hits zero
            self.setState({
              countBreak: self.state.initalBreak * 60,
              countSession: newSessionTime,
              breakString: self.formatTime(self.state.initalBreak*60),
              sessionString: self.formatTime(newSessionTime),
              paused: false,
              intervalID: tempIntervalID,
              status: newSessionTime == 0 ? "Break" : "Session"
            });
          } else if (self.state.status == "Break") {
            let newBreakTime = self.state.countBreak;
            if (newBreakTime-1 >= 0) {
              newBreakTime-=1;
            } 
            if (newBreakTime == 0) {
              console.log("playing")
              self.playSound();
            }
            console.log(newBreakTime, self.formatTime(newBreakTime))
            // Resets the seconds of the session. After the session subtracts, it will be left at zero. If this is the case, it wont loop through session again. So it must reset.
            self.setState({
              countBreak: newBreakTime,
              breakString: self.formatTime(newBreakTime),
              paused: false,
              intervalID: tempIntervalID,
              status: newBreakTime == 0 ? "Session" : "Break",
              countSession: self.state.initalSession*60,
              sessionString: self.formatTime(self.state.initalSession*60),
            });
          }
        }, self.state.oneSecondMS);

However, playing the sound results in a error that the .play, .pause and other functions are undefined. Any ideas on why my React reference doesn’t follow this audio element properally?

[Jimbalin]

because refs is an object with a key of current

Refs and the DOM – React

Accessing Refs

When a ref is passed to an element in render , a reference to the node becomes accessible at the current attribute of the ref.