feat: add configurable sound controls with volume and frequency sliders

Author: JMit-dev

index.html

@@ -58,6 +58,18 @@ <h1>CHIP-8 Emulator</h1>
           <input type="range" id="speed-slider" min="1" max="30" value="10">
         </label>
       </div>
+      <div class="controls-group">
+        <label>
+          Volume: <span id="volume-value">10</span>%
+          <input type="range" id="volume-slider" min="0" max="100" value="10">
+        </label>
+      </div>
+      <div class="controls-group">
+        <label>
+          Frequency: <span id="frequency-value">440</span> Hz
+          <input type="range" id="frequency-slider" min="200" max="800" value="440" step="10">
+        </label>
+      </div>
     </section>
 
     <section class="main-grid">
@@ -133,6 +145,7 @@ <h3>Timers</h3>
   <script src="js/cpu.js"></script>
   <script src="js/renderer.js"></script>
   <script src="js/keyboard.js"></script>
+  <script src="js/sound.js"></script>
   <script src="js/widgets/registers-widget.js"></script>
   <script src="js/widgets/memory-widget.js"></script>
   <script src="js/widgets/stack-widget.js"></script>

js/cpu.js

@@ -69,7 +69,11 @@ class CPU {
   }
 
   playSound() {
-    // Sound implementation handled externally
+    if (this.soundTimer > 0 && this.sound) {
+      this.sound.play();
+    } else if (this.sound) {
+      this.sound.stop();
+    }
   }
 
   executeInstruction(opcode) {

js/emulator.js

@@ -3,9 +3,11 @@ class Emulator {
     this.cpu = new CPU();
     this.renderer = new Renderer(10);
     this.keyboard = new Keyboard();
+    this.sound = new Sound();
 
     this.cpu.renderer = this.renderer;
     this.cpu.keyboard = this.keyboard;
+    this.cpu.sound = this.sound;
 
     this.registersWidget = new RegistersWidget('registers-container');
     this.memoryWidget = new MemoryWidget('memory-container');
@@ -34,6 +36,21 @@ class Emulator {
       this.cpu.speed = parseInt(e.target.value);
       speedValue.textContent = e.target.value;
     });
+
+    const volumeSlider = document.getElementById('volume-slider');
+    const volumeValue = document.getElementById('volume-value');
+    volumeSlider.addEventListener('input', (e) => {
+      const volume = parseInt(e.target.value) / 100;
+      this.sound.setVolume(volume);
+      volumeValue.textContent = e.target.value;
+    });
+
+    const frequencySlider = document.getElementById('frequency-slider');
+    const frequencyValue = document.getElementById('frequency-value');
+    frequencySlider.addEventListener('input', (e) => {
+      this.sound.setFrequency(parseInt(e.target.value));
+      frequencyValue.textContent = e.target.value;
+    });
   }
 
   async loadROMFromSelect(event) {
@@ -129,9 +146,11 @@ class Emulator {
 
   reset() {
     this.running = false;
+    this.sound.stop();
     this.cpu = new CPU();
     this.cpu.renderer = this.renderer;
     this.cpu.keyboard = this.keyboard;
+    this.cpu.sound = this.sound;
     this.renderer.clear();
     this.renderer.render();
     this.updateWidgets();

js/sound.js

@@ -0,0 +1,57 @@
+class Sound {
+  constructor() {
+    this.audioContext = null;
+    this.oscillator = null;
+    this.gainNode = null;
+    this.isPlaying = false;
+    this.frequency = 440; // A4 note (440 Hz)
+    this.volume = 0.1; // 10% volume
+  }
+
+  init() {
+    if (!this.audioContext) {
+      this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
+      this.gainNode = this.audioContext.createGain();
+      this.gainNode.connect(this.audioContext.destination);
+      this.gainNode.gain.value = this.volume;
+    }
+  }
+
+  setVolume(volume) {
+    this.volume = volume;
+    if (this.gainNode) {
+      this.gainNode.gain.value = volume;
+    }
+  }
+
+  setFrequency(frequency) {
+    this.frequency = frequency;
+    if (this.oscillator && this.isPlaying) {
+      this.oscillator.frequency.setValueAtTime(frequency, this.audioContext.currentTime);
+    }
+  }
+
+  play() {
+    if (this.isPlaying) return;
+
+    this.init();
+
+    this.oscillator = this.audioContext.createOscillator();
+    this.oscillator.type = 'square'; // Square wave for classic beep sound
+    this.oscillator.frequency.setValueAtTime(this.frequency, this.audioContext.currentTime);
+    this.oscillator.connect(this.gainNode);
+    this.oscillator.start();
+
+    this.isPlaying = true;
+  }
+
+  stop() {
+    if (!this.isPlaying || !this.oscillator) return;
+
+    this.oscillator.stop();
+    this.oscillator.disconnect();
+    this.oscillator = null;
+
+    this.isPlaying = false;
+  }
+}