Audio Support

src/audio/audioManager.js

@@ -0,0 +1,54 @@
+import sounds from "./sound.js";
+import music from "./music.js";
+import settings from "../data/settings.js";
+
+let activeMusic = null;
+
+export function playSound(name) {
+  const baseSound = sounds[name];
+
+  if (!baseSound) return;
+
+  const sound = baseSound.cloneNode();
+
+  sound.volume = settings.sfxVolume;
+
+  sound.play().catch(() => {});
+}
+
+export function playMusic(name) {
+  const newMusic = music[name];
+
+  if (!newMusic) return;
+
+  // already playing
+  if (activeMusic === newMusic) return;
+
+  // stop previous
+  if (activeMusic) {
+    activeMusic.pause();
+    activeMusic.currentTime = 0;
+  }
+
+  activeMusic = newMusic;
+
+  activeMusic.volume = settings.musicVolume;
+  activeMusic.loop = true;
+
+  activeMusic.play().catch(() => {});
+}
+
+export function stopMusic() {
+  if (!activeMusic) return;
+
+  activeMusic.pause();
+  activeMusic.currentTime = 0;
+
+  activeMusic = null;
+}
+
+export function updateMusicVolume() {
+  if (!activeMusic) return;
+
+  activeMusic.volume = settings.musicVolume;
+}

src/audio/music.js

@@ -0,0 +1,15 @@
+import menuMusicFile from "../assets/audio/soundtrack/3_main-menu.mp3";
+import gameMusicFile from "../assets/audio/soundtrack/3_gameplay.mp3";
+
+const menuMusic = new Audio(menuMusicFile);
+menuMusic.loop = true;
+
+const gameMusic = new Audio(gameMusicFile);
+gameMusic.loop = true;
+
+const music = {
+  menu: menuMusic,
+  game: gameMusic,
+};
+
+export default music;

src/audio/sound.js

@@ -0,0 +1,25 @@
+import baseFx from "../assets/audio/SFX/base.wav";
+import bottlingFx from "../assets/audio/SFX/bottling.wav";
+import overbrewedFx from "../assets/audio/SFX/bottling-overbrewed.wav";
+import crushingFx from "../assets/audio/SFX/crushing.wav";
+import cuttingFx from "../assets/audio/SFX/cutting.wav";
+import glassFx from "../assets/audio/SFX/glass.wav";
+import ingredientFx from "../assets/audio/SFX/ingredient.wav";
+import newOrderFx from "../assets/audio/SFX/new-order.wav";
+import placeFx from "../assets/audio/SFX/place.wav";
+import trashFx from "../assets/audio/SFX/trash.wav";
+
+const sounds = {
+  base: new Audio(baseFx),
+  bottling: new Audio(bottlingFx),
+  overbrewedFx: new Audio(overbrewedFx),
+  crushing: new Audio(crushingFx),
+  cutting: new Audio(cuttingFx),
+  glass: new Audio(glassFx),
+  ingredient: new Audio(ingredientFx),
+  newOrder: new Audio(newOrderFx),
+  place: new Audio(placeFx),
+  trash: new Audio(trashFx),
+};
+
+export default sounds;

src/core/index.js

@@ -44,6 +44,7 @@ import {
 import { drawGameOver } from "../rendering/gameOverRenderer.js";
 import { drawHUD } from "../rendering/hudRendering.js";
 import { drawRecipesMenu } from "../rendering/recipesRenderer.js";
+import { playMusic, updateMusicVolume } from "../audio/audioManager.js";
 
 const { canvas, ctx } = Canvas();
 
@@ -99,11 +100,15 @@ function handleSettingsClick(mouseX, mouseY) {
   if (pointInRect(mouseX, mouseY, musicSlider)) {
     settings.musicVolume = (mouseX - musicSlider.x) / musicSlider.width;
     settings.musicVolume = Math.max(0, Math.min(1, settings.musicVolume));
+    if (settings.musicVolume < 0.02) settings.musicVolume = 0;
+
+    updateMusicVolume();
   }
   const sfxSlider = getSfxSlider(canvas);
   if (pointInRect(mouseX, mouseY, sfxSlider)) {
     settings.sfxVolume = (mouseX - sfxSlider.x) / sfxSlider.width;
     settings.sfxVolume = Math.max(0, Math.min(1, settings.sfxVolume));
+    if (settings.sfxVolume < 0.02) settings.sfxVolume = 0;
   }
 }
 
@@ -177,12 +182,25 @@ canvas.addEventListener("click", (e) => {
 });
 
 let previousFrame = performance.now();
+let previousState = null;
 function loop() {
   const now = performance.now();
   const timeStep = now - previousFrame; // Time in milliseconds since last frame
   previousFrame = now;
 
   const state = getGameState();
+  if (state !== previousState) {
+    previousState = state;
+
+    switch (state) {
+      case GAME_STATES.MENU:
+        playMusic("menu");
+        break;
+      case GAME_STATES.PLAYING:
+        playMusic("game");
+        break;
+    }
+  }
   switch (state) {
     case GAME_STATES.MENU:
       drawMenu(ctx, canvas, mouseX, mouseY);

src/data/settings.js

@@ -1,6 +1,6 @@
 const settings = {
-  musicVolume: 0.7,
-  sfxVolume: 0.8,
+  musicVolume: 0.0,
+  sfxVolume: 0.5,
 };
 
 export default settings;

webpack.common.js

@@ -21,7 +21,7 @@ export default {
         use: ["style-loader", "css-loader"],
       },
       {
-        test: /\.(png|svg|jpg|jpeg|gif)$/i,
+        test: /\.(png|svg|jpg|jpeg|gif|wav|mp3)$/i,
         type: "asset/resource",
         generator: {
           filename: "images/[name][hash][ext]",