This time, we will add an effect where the background flashes along with an alarm when a fire is detected.
Let's take a look at `keyframes` and `animation` settings in Tailwind CSS.
First, the `keyframes` section defines various animation effects.
`slideIn` makes an element gradually appear from the right.
`slideOut` makes an element disappear to the right.
`pulse` creates an effect where the background color darkens and then returns to its original state.
`flashBorder` is an animation that makes the border flash, useful for emphasizing elements.
`screenFlash` makes the entire screen flash, which is useful for strong warnings.
Now, let's look at the `animation` section.
Each `keyframe` is defined as an animation so that `slideIn`, `slideOut`, and `pulse` can be used.
Now, applying `className="animate-slideIn"` enables the corresponding animation.
These animations help in making fire detection alerts, More visually intuitive and noticeable.
Now, let's dive into the code.
You don't need to understand everything; just grasping the flow is enough.
first, I will explain the roles of these four variables:
audioPermission, audioContextRef, gainNodeRef, and sourceNodeRef.
First, audioPermission is a state value that manages whether the user has granted audio playback permission.
By default, it is set to false, and it changes to true when the user grants audio permission.
Next, audioContextRef is a reference variable that stores an AudioContext.
To control audio using the Web Audio API, an AudioContext is required.
This object allows you to generate and manipulate sound.
gainNodeRef is a reference variable that stores a GainNode.
A GainNode is responsible for adjusting the volume of the audio.
With this, you can control the sound volume.
Finally, sourceNodeRef is a variable that stores an OscillatorNode.
An OscillatorNode is used to generate a sound with a specific frequency.
This can be used to create an alert sound.
Now, using these variables, we will initialize the audio, and go through the process of playing an alert sound.
Now, I will briefly explain the `initAudioContext` function.
This function initializes `AudioContext` for audio playback.
First, it checks whether the user has granted audio permission. If not, it prompts the user for permission using `window.confirm`.
If the user grants permission, it creates an `AudioContext`.
If it's in a `suspended` state on iOS Safari, it calls `resume()` to ensure proper functionality.
Then, it calls `setAudioPermission(true)` to store that audio permission has been granted.
If initialized successfully, it returns `true`.
If an error occurs during initialization, it logs the error to the console. Then, it alerts the user and returns `false`.
The `stopAlertSound` function is responsible for stopping the alert sound.
First, if the sound stored in `sourceNodeRef` is playing, it calls `stop()` to immediately stop it.
Then, it uses `disconnect()` to sever the connection of the audio node.
Next, it disconnects `gainNodeRef` to clean up unnecessary resources.
Now, the alert sound can be stopped whenever needed.
The `playAlertSound` function is responsible for generating and playing an alert sound.
First, it checks whether `audioContextRef` exists.
If a sound is already playing, it calls `stopAlertSound()` to stop it.
Next, it creates an `OscillatorNode` to generate the sound. It then uses a `GainNode` to control the volume.
The frequency is increased from 440Hz to 880Hz and then back to 440Hz
To create an alert-like sound.
Finally, the generated sound is played using `start()`. It is then stored in `sourceNodeRef` so it can be stopped later.
This code is responsible for displaying an alert when a fire is detected.
First, if the `"fire detected"` message is received in `predictionData`,
Next, to create a flashing effect across the entire screen, It creates a `flashOverlay` element, And appends it to the document using `document.body.appendChild(flashOverlay)`.
Additionally, it creates an `alertElement` to display the alert message.
This element has a red background and animation effects,
And is displayed on the screen via `document.body.appendChild(alertElement)`.
After 10 seconds, it removes the alert message using `setTimeout`.
It also calls `flashOverlay.remove()` to stop the flashing effect.
Now, when a fire is detected, The alert sound and visual effects will be triggered automatically.
This part attempts to initialize the audio.
It calls `initAudioContext()` to request audio permission.
If the user denies it, it logs `"audio permission denied"` to the console and stops execution.
And this part handles stopping the alert sound when fire detection stops.
It stops the alert sound.
It calls the previously explained `stopAlertSound()` function,
Finally, I will check the functionality in the browser.