fix(): fix audio pause on page leave, fix binary background noise

Author: BenedictLang

next.config.js

@@ -40,28 +40,6 @@ const nextConfig = {
 			exclude: /node_modules/,
 			use: ['raw-loader', 'glslify-loader'],
 		});
-		config.module.rules.push({
-			test: /\.module\.scss$/,
-			use: [
-				'style-loader',
-				{
-					loader: 'css-loader',
-					options: {
-						modules: true,
-						importLoaders: 1,
-						sourceMap: true,
-					},
-				},
-				'sass-loader',
-			],
-			exclude: /node_modules/,
-		});
-
-		config.module.rules.push({
-			test: /\.scss$/,
-			use: ['style-loader', 'css-loader', 'sass-loader'],
-			exclude: /\.module\.scss$/,
-		});
 		return config;
 	},
 };

public/audio/binary-code-interface.mp3

@@ -1,4 +1,4 @@
-import React, { createContext, useState, useMemo, useCallback, useRef } from 'react';
+import React, { createContext, useState, useMemo, useCallback, useRef, useEffect } from 'react';
 import sounds from './AudioManager';
 
 export const AudioContext = createContext(null);
@@ -114,6 +114,22 @@ export const AudioProvider = ({ children }) => {
 		updateIsPlaying();
 	}, [updateIsPlaying]);
 
+	useEffect(() => {
+		const handleVisibilityChange = () => {
+			if (document.hidden) {
+				fadeOutAllPlayingSounds();
+			} else {
+				fadeInBackgroundMusicAndResumeOthers();
+			}
+		};
+
+		document.addEventListener('visibilitychange', handleVisibilityChange);
+
+		return () => {
+			document.removeEventListener('visibilitychange', handleVisibilityChange);
+		};
+	}, [fadeInBackgroundMusicAndResumeOthers, fadeOutAllPlayingSounds]);
+
 	const value = useMemo(
 		() => ({
 			isPlaying,

src/components/Audio/AudioContext.js

@@ -2,8 +2,8 @@ import { Howl } from 'howler';
 
 const backgroundMusic = new Howl({
 	src: ['/audio/Explora - Benedict Lang.mp3'],
-	//loop: true,
-	volume: 0.007,
+	loop: true,
+	volume: 0.006,
 });
 
 const click = new Howl({