feat(code): allow play and run the code

Author: pwnwriter

src/pages/index.astro

@@ -25,6 +25,11 @@ import '../styles/global.css';
           <span class="logo-tagline">code → music</span>
         </div>
         <div class="header-actions">
+          <button id="play-code" class="icon-button" aria-label="Play code as music" title="Play code as music">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polygon points="5 3 19 12 5 21 5 3"></polygon>
+            </svg>
+          </button>
           <div id="audio-indicator" class="audio-indicator" title="Audio inactive - start typing to activate">
             <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
@@ -232,9 +237,17 @@ import '../styles/global.css';
     </div>
 
     <script>
-      import { setTheme, setLanguage, toggleVim, setVolume, getVolume, themeRegistry, languageRegistry } from '../scripts/editor';
+      import { setTheme, setLanguage, toggleVim, setVolume, getVolume, themeRegistry, languageRegistry, playCurrentCode } from '../scripts/editor';
       import { getThemesByGroup } from '../scripts/themes/index';
 
+      // Play code button
+      const playCodeButton = document.getElementById('play-code');
+      playCodeButton?.addEventListener('click', async () => {
+        playCodeButton.classList.add('playing');
+        await playCurrentCode();
+        setTimeout(() => playCodeButton.classList.remove('playing'), 2000);
+      });
+
       // Settings panel toggle
       const settingsToggle = document.getElementById('settings-toggle');
       const settingsPanel = document.getElementById('settings-panel');

src/scripts/editor.ts

@@ -36,6 +36,7 @@ import {
   playBackspace,
   playMelodyNote,
   playPatternSound,
+  playCode,
   isAudioInitialized,
   setVolume,
   getVolume,
@@ -353,4 +354,22 @@ function setupVimModeListener(): void {
   });
 }
 
+export async function playCurrentCode(): Promise<void> {
+  if (!editorView) return;
+
+  if (!isAudioInitialized()) {
+    await initAudio();
+    setMusicConfig(currentTheme.music);
+    const indicator = document.getElementById("audio-indicator");
+    if (indicator) {
+      indicator.classList.add("active");
+      indicator.title = "Audio active";
+    }
+  }
+
+  const code = editorView.state.doc.toString();
+  const patterns = detectPattern(code, currentLanguage);
+  await playCode(code, patterns);
+}
+
 export { themeRegistry, languageRegistry, setVolume, getVolume };

src/scripts/music.ts

@@ -381,3 +381,54 @@ export function setVolume(volume: number): void {
 export function getVolume(): number {
   return masterVolume;
 }
+
+export async function playCode(
+  code: string,
+  patterns: {
+    hasFunction: boolean;
+    hasLoop: boolean;
+    hasConditional: boolean;
+    hasString: boolean;
+    hasComment: boolean;
+  },
+): Promise<void> {
+  if (!isInitialized) {
+    await initAudio();
+  }
+
+  if (!currentConfig || !melodySynth || !padSynth) return;
+
+  const now = Tone.now();
+  const lines = code.split("\n").filter((l) => l.trim().length > 0);
+  const scale = currentConfig.scale;
+
+  // Play a melody based on code structure
+  let time = now;
+  const noteDelay = 0.15;
+
+  // Play melody notes for each non-empty line (up to 16 notes)
+  const maxNotes = Math.min(lines.length, 16);
+  for (let i = 0; i < maxNotes; i++) {
+    const note = scale[i % scale.length];
+    melodySynth.triggerAttackRelease(note, "16n", time);
+    time += noteDelay;
+  }
+
+  // Play pattern chords after the melody
+  const chordTime = time + 0.2;
+
+  if (patterns.hasFunction) {
+    const chord = [scale[0], scale[2], scale[4]];
+    padSynth.triggerAttackRelease(chord, "2n", chordTime);
+  }
+
+  if (patterns.hasLoop) {
+    const chord = [scale[0], scale[3], scale[4]];
+    padSynth.triggerAttackRelease(chord, "2n", chordTime + 0.5);
+  }
+
+  if (patterns.hasConditional) {
+    const chord = [scale[0], scale[2], scale[5]];
+    padSynth.triggerAttackRelease(chord, "2n", chordTime + 1);
+  }
+}

src/styles/global.css

@@ -152,6 +152,22 @@ body {
   background-color: var(--bg-primary);
 }
 
+.icon-button.playing {
+  color: var(--accent);
+  border-color: var(--accent);
+  animation: playPulse 0.5s ease-in-out infinite;
+}
+
+@keyframes playPulse {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
+
 /* Editor Wrapper */
 .editor-wrapper {
   flex: 1;