How to do minus 1 every second, "Build a 25 + 5 Clock"

[amejl172]

Tell us what’s happening:
I need Audio, and to fix the other tests. Please help!
Your code so far
https://codepen.io/DKPK/pen/wvgXXqe?editors=0010

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.128 Safari/537.36.

Challenge: Build a 25 + 5 Clock

Link to the challenge:

freeCodeCamp.org

[LachPawel]

First of all, React works a bit different than vanilla JavaScrit that is why you will have to add few tricks to make it work.

1. Import the audio file at the beginning of the component.

For example

import Ring from "./ring.mp3";

2. Create a variable where you will attach that sound. For example, inside of a function like that

const ring = new Audio(Ring);

3. After declaration of the variable, you can call it anywhere below.

ring.play();

[amejl172]

How can I give it an id?

[LachPawel]

You don’t because this code should be entirely inside of JS script, not HTML code In other words you can get rid of the HTML part with audio element. Just import the audio file, create a variable at some visible place, and for example if you have a function that is triggered at the click of a button, you can add ring.play();

For example, imagine that you have a button in your JSX part, and when you click the button doSomething() function is called.

<button onClick={this.doSomething}>

Then, each time you click that button component looks up into the available functions and doSomething is called. Remember about using arrow functions otherwise, you will have to bind them.

Inside of the function it will look somehow like this

doSomething = () => {
  const ring = new Audio(Ring);
  ring.play();
}

That is all! Each time you click the button now => doSomething is called, which is a variable with a function attached to it => new variable with audio file is created => then we call play() function on it.

[amejl172]

This is the instructions.

User Story #26: When a countdown reaches zero (NOTE: timer MUST reach 00:00), a sound indicating that time is up should play. This should utilize an HTML5 audio tag and have a corresponding id="beep" .

User Story #27: The audio element with id="beep" must be 1 second or longer.

User Story #28: The audio element with id of beep must stop playing and be rewound to the beginning when the element with the id of reset is clicked.

In this challenge you need id.

[LachPawel]

My bad in this case you should use the following way
inside of the constructor this.audioRef = React.createRef(); and attach the audio HTML element like that

<audio ref={this.audioRef} src={Ring} />

And inside of the function

this.audioRef.current.play();

[amejl172]

I take import Beep from "/media/cc0-audio/t-rex-roar.mp3";

But it’s not working,

I took form this website.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio

This is the code.
https://codepen.io/DKPK/pen/wvgXXqe?editors=0010

[amejl172]

Why do I get this error?

GET https://codepen.io/media/cc0-audio/t-rex-roar.mp3 404

[LachPawel]

404 means that the resource cannot be found. Have you tried with a different link?