Audio does not play on localhost, but works perfectly on codepen

Question

I have written a 25 + 5 clock as a project on freeCodeCamp. It works well on codeine and plays the audio as it should. However, when I try to play it locally on the create-react-app I made the audio doesn't play when timer hits zero. I decided to test out the audio using onClick and it works then. I think it has to do something with the fact that it is being called during useEffect, but I am not sure. Any help is appreciated!

The error that shows up after the timer hits zero is this.

× TypeError: Attempted to assign to readonly property. playSound src/index.js:115

  112 | function playSound() {
  113 |   const audio = document.getElementById("beep");
  114 |   audio.removeAttribute("readonly");
> 115 |   audio.duration = 1; // Need to pass first audio test
      | ^  116 |   audio.play();
  117 | }
  118 | return (

Here is the code for everyone to see.

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./index.css";

function Timer() {
  const [breakLength, setBreakLength] = useState(5);
  const [sessionLength, setSessionLength] = useState(25);
  const [timer, setTimer] = useState(1500); // 1500 is 25 minutes, but in seconds
  const [timerType, setTimerType] = useState("session");
  const [timerState, setTimerState] = useState("stopped");
  const [timeoutId, setTimeoutId] = useState("");

  React.useEffect(() => {
    // If timer is > 0 and the timerState is clicked to running
    if (timer > 0 && timerState === "running") {
      
      setTimeoutId(setTimeout(() => setTimer(timer - 1), 1000)); // Must use setTimeout as it only triggers expression once. setInterval will continuously call expression until told otherwise.
    }
    // If session timer ends.
    else if (timer === 0 && timerType === "session") {
      setTimerType("break"); // Change timer type back to break
      setTimer(breakLength * 60); // Multiply by 60 because we need to convert minutes into seconds
      playSound();
    }
    // If break timer ends
    else if (timer === 0 && timerType === "break") {
      setTimerType("session"); // Change timer type break
      setTimer(sessionLength * 60); // Multiply by 60 because we need to convert minutes into seconds
      playSound();
    }
    clearTimeout(timeoutId);
   
  }, [timer, timerState, timerType, breakLength, sessionLength]);

  function resetClick() {
    // simply reset all states and audio must be paused then set back to beginning with currentTime = 0
    setTimerState("stopped");
    setBreakLength(5);
    setSessionLength(25);
    setTimerType("session");
    setTimer(1500);
    const audio = document.getElementById("beep");
    audio.pause();
    audio.currentTime = 0;
  }

  function decrementBreakClick() {
    // Doesn't let break length go below 1 and timer must be stopped
    if (breakLength > 1 && timerState === "stopped") {
      setBreakLength(breakLength - 1);
    }
  }

  function incrementBreakClick() {
    // Doesn't let break length go above 60 and timer must be stopped
    if (breakLength < 60 && timerState === "stopped") {
      setBreakLength(breakLength + 1);
    }
  }

  function decrementSessionClick() {
    // Doesn't let session length go below 1 and timer must be stopped
    if (sessionLength > 1 && timerState === "stopped") {
      setSessionLength(sessionLength - 1);
      setTimer(timer - 60); // Take away 60 as timer is set in seconds.
    }
  }

  function incrementSessionClick() {
    // Doesn't let session length go below 1 and timer must be stopped
    if (sessionLength < 60 && timerState === "stopped") {
      setSessionLength(sessionLength + 1);
      setTimer(timer + 60); // Add 60 as timer is set in seconds.
    }
  }

  function startStopClick() {
    // if state is stopped then change it to running. Else change running back to stopped
    if (timerState === "stopped") {
      setTimerState("running");
    } else {
      setTimerState("stopped");
    }
  }

  // Convert the timer state that is in seconds to minutes and seconds.
  function timerToClock() {
    let minutes = Math.floor(timer / 60); 
    let seconds = timer - minutes * 60; 
    minutes = minutes < 10 ? "0" + minutes : minutes; 
    seconds = seconds < 10 ? "0" + seconds : seconds; 
    return minutes + ":" + seconds;
  }

  function playSound() {
    const audio = document.getElementById("beep");
    audio.removeAttribute("readonly");
    audio.duration = 1; // Need to pass first audio test
    audio.play();
  }
  return (
    
      25 + 5 Clock
      
        
          
          
        
        
          
            {timerType}
            {/*Calling a function so need to add () */}
            {timerToClock()}
          
        
        
          
          

          
        

        
          Designed and coded by:
          

          
            Hunter Lacefield
          
        
      
    
  );
}

function BreakLength(props) {
  return (
    
      Break Length
      

      
        {props.breakLength}
      

      
    
  );
}

function SessionLength(props) {
  return (
    
      Session Length
      

      
        {props.sessionLength}
      

      
    
  );
}

ReactDOM.render(, document.getElementById("root"));

Audio does not play on localhost, but works perfectly on codepen

Answers (1)

Related Questions