From c8f4a4634f09d5b2211687067af2ee7698f06b21 Mon Sep 17 00:00:00 2001
From: Ryan Darge <ryan.darge@gmail.com>
Date: Thu, 22 Dec 2022 17:07:11 -0500
Subject: [PATCH 1/4] testing out ways to play music in wasm

---
 index.html       | 17 +++++++++++++++++
 src/api_wasm.zig |  7 +++++++
 2 files changed, 24 insertions(+)
diff --git a/index.html b/index.html
index 71823bf..9867bbf 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,7 @@
   <body>
     <p>The buttons are a, s and the arrow keys.</p>
     <canvas id="canvas" width="512" height="512"></canvas>
+    <div id="music"></div>
     <script>
       class FPSCounter {
         init() {
@@ -36,6 +37,8 @@
         ctx.imageSmoothingEnabled = false;
         ctx.scale(4, 4);
 
+        const music = document.getElementById("music");
+
         const img = await new Promise((resolve) => {
           const img = new Image(); // Create new img element
           img.src = "assets/sprites.png"; // Set source path
@@ -59,6 +62,20 @@
                 // Don't draw the image if its off screen.
                 ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);
               },
+              wasmMusic: (track, fadems, channelMask) => {
+                console.log("Trying to play audio file with fadems and channelmask", track, fadems,channelMask);
+                //TODO actually match audio to file
+                const channel = "music-" + channelMask;
+                const existingTrack = document.getElementById(channel);
+                if(existingTrack) {
+                  existingTrack.remove();
+                }
+                //TODO replace generic track with coded track, securely.
+                const newTrack = new Audio("assets/"+track+".mp3");
+                const newChannel = music.appendChild(newTrack);
+                newChannel.id = channel;
+                newTrack.play();
+              }
             },
           };
           fetch("zig-out/lib/wasm.wasm")
diff --git a/src/api_wasm.zig b/src/api_wasm.zig
index aeae456..dda5638 100644
--- a/src/api_wasm.zig
+++ b/src/api_wasm.zig
@@ -6,6 +6,7 @@ const Button = @import("api_modules.zig").Button;
 
 // Javascript link
 extern fn wasmSprite(f32, f32, f32, f32, f32, f32, f32, f32) void;
+extern fn wasmMusic(u32, u32, u32) void;
 
 pub const InputState = struct {
     left_down: bool = false,
@@ -35,6 +36,7 @@ pub const ApiWASM = struct {
     camera_y: f32 = 0,
     map_data: [4 * 256 * 256]u8 = [_]u8{0} ** (4 * 256 * 256),
     input_state: InputState = .{},
+    playing_music: bool = false,
 
     pub fn init() ApiWASM {
         return .{};
@@ -49,6 +51,11 @@ pub const ApiWASM = struct {
         wasmSprite(tx, ty, w, h, src_x, src_y, 8, 8);
     }
 
+    pub fn music(self: *ApiWASM, audio: u32, fadems: u32, channelMask: u32) void {
+        self.playing_music = true;
+        wasmMusic(audio, fadems, channelMask);
+    }
+
     pub fn btnp(self: ApiWASM, button: Button) bool {
         return switch (button) {
             Button.LEFT => self.input_state.left_pressed,

From 2501127912db837d32c7da1c7df6d4c06ae9245b Mon Sep 17 00:00:00 2001
From: Ryan Darge <ryan.darge@gmail.com>
Date: Fri, 6 Jan 2023 16:16:26 -0500
Subject: [PATCH 2/4] Adding partial support for SFX, minor tweaks to Music,
 diverging from channel-based approach in pico8.

---
 README.md        |  7 ++++---
 index.html       | 41 ++++++++++++++++++++++++++++++++++++++---
 src/api_wasm.zig |  7 +++++++
 src/game.zig     | 12 ++++++++++--
 4 files changed, 59 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 6fade20..46c0639 100644
--- a/README.md
+++ b/README.md
@@ -117,11 +117,12 @@ mset(x, y, v) -- set map value
 
 #### Audio
 
-##### Not Yet Implemented
+
+##### Partially Implemented
 
 ```
-music([n, [fade_len, [channel_mask]]]) -- play music; n = -1: stop
-sfx(n, [channel, [offset]]) -- play sfx; n = -1: stop in channel; n = -2: release loop in channel
+sfx(n) -- WASM only: play sfx N; sfx files are expected to be in .wav format in the resources folder, named numerically, (0.wav, 1.wav, etc). SFX files will play once, and if the same SFX file is called before the first completes, it will terminate the first preemptively.
+music([n, [fade_len, [channel_mask]]]) -- WASM only: play "n" pattern music; n = -1: stop. fade_len will fade-in the music over fade_len milliseconds. channel_mask is not currently used. Music files are expected to be in mp3 format in the resources folder, named numerically (0.mp3, 1.mp3, etc).
 ```
 
 ## Current Status
diff --git a/index.html b/index.html
index 9867bbf..072eaa7 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,7 @@
     <p>The buttons are a, s and the arrow keys.</p>
     <canvas id="canvas" width="512" height="512"></canvas>
     <div id="music"></div>
+    <div id="sfx"></div>
     <script>
       class FPSCounter {
         init() {
@@ -38,6 +39,7 @@
         ctx.scale(4, 4);
 
         const music = document.getElementById("music");
+        const sfx = document.getElementById("sfx");
 
         const img = await new Promise((resolve) => {
           const img = new Image(); // Create new img element
@@ -64,17 +66,50 @@
               },
               wasmMusic: (track, fadems, channelMask) => {
                 console.log("Trying to play audio file with fadems and channelmask", track, fadems,channelMask);
-                //TODO actually match audio to file
-                const channel = "music-" + channelMask;
+                if(track == -1) {
+                  while (music.firstChild) {
+                    music.removeChild(music.firstChild);
+                  }
+                  return;
+                }
+
+                const channel = "music";
                 const existingTrack = document.getElementById(channel);
                 if(existingTrack) {
                   existingTrack.remove();
                 }
-                //TODO replace generic track with coded track, securely.
                 const newTrack = new Audio("assets/"+track+".mp3");
                 const newChannel = music.appendChild(newTrack);
                 newChannel.id = channel;
                 newTrack.play();
+                newTrack.loop = true;
+
+                //Fade-in volume if appropriate
+                if (fadems != 0) {
+                  newTrack.volume = 0;
+                  var fAudio = setInterval(function(){
+                    const newVolume = newTrack.volume + 0.1;
+                    if(newVolume >= 1) {
+                      newTrack.volume = 1;
+                      clearInterval(fAudio);
+                    } else {
+                      newTrack.volume = newVolume;
+                    }
+                  },fadems/10);
+                }
+              },
+              wasmSfx: (track) => {
+                console.log("Trying to play sfx ", track);
+                const channel = "sfx" + track; 
+                const existingTrack = document.getElementById(channel);
+                if(existingTrack) {
+                  existingTrack.remove();
+                }
+                const newTrack = new Audio("assets/"+track+".wav");
+                const newChannel = music.appendChild(newTrack);
+                newChannel.id = channel;
+                newTrack.loop = false;
+                newTrack.play();
               }
             },
           };
diff --git a/src/api_wasm.zig b/src/api_wasm.zig
index dda5638..70daf18 100644
--- a/src/api_wasm.zig
+++ b/src/api_wasm.zig
@@ -7,6 +7,7 @@ const Button = @import("api_modules.zig").Button;
 // Javascript link
 extern fn wasmSprite(f32, f32, f32, f32, f32, f32, f32, f32) void;
 extern fn wasmMusic(u32, u32, u32) void;
+extern fn wasmSfx(u32) void;
 
 pub const InputState = struct {
     left_down: bool = false,
@@ -37,6 +38,7 @@ pub const ApiWASM = struct {
     map_data: [4 * 256 * 256]u8 = [_]u8{0} ** (4 * 256 * 256),
     input_state: InputState = .{},
     playing_music: bool = false,
+    playing_sfx: bool = false,
 
     pub fn init() ApiWASM {
         return .{};
@@ -56,6 +58,11 @@ pub const ApiWASM = struct {
         wasmMusic(audio, fadems, channelMask);
     }
 
+    pub fn sfx(self: *ApiWASM, audio: u32) void { 
+        self.playing_sfx = true;
+        wasmSfx(audio);
+    }
+
     pub fn btnp(self: ApiWASM, button: Button) bool {
         return switch (button) {
             Button.LEFT => self.input_state.left_pressed,
diff --git a/src/game.zig b/src/game.zig
index ca5998c..e020a7c 100644
--- a/src/game.zig
+++ b/src/game.zig
@@ -6,7 +6,7 @@ const RndGen = std.rand.DefaultPrng;
 
 const Object = struct { x: f32 = 0, y: f32 = 0, spr: u32 = 4, draw: bool = true };
 
-const NUM_OBJECTS = 5000;
+const NUM_OBJECTS = 50;
 
 fn makeObject() Object {
     return Object{ .x = 0.0, .y = 0.0, .spr = 4, .draw = true };
@@ -140,6 +140,11 @@ pub const Game = struct {
             dy = -1.0;
         }
 
+        if (api.btnp(ApiTypes.Button.A)) {
+            //The user needs to interact with the game before the browser will allow any music to play;
+            api.music(0, 5000, 0);
+        }
+
         // Our game objects are really 7x7 so they can fit into the cracks of the tile.
         self.worldMove(api, self.x, self.y, 7.0, 7.0, &dx, &dy);
 
@@ -164,7 +169,10 @@ pub const Game = struct {
 
             if (boxIntersect(self.x, self.y, 8.0, 8.0, o.*.x, o.*.y, 8.0, 8.0)) {
                 o.*.spr = 5;
-                o.*.draw = false;
+                if(o.*.draw) {
+                    api.sfx(0);
+                    o.*.draw = false;
+                }
             }
         }
 

From ca943fcf3b133c6ce44d4fa46c049555f0f81c7a Mon Sep 17 00:00:00 2001
From: Ryan Darge <ryan.darge@gmail.com>
Date: Fri, 6 Jan 2023 17:17:59 -0500
Subject: [PATCH 3/4] Preliminary support for music in native build mode; still
 need to add proper parameterization in and install steps and readme...

---
 build.zig        | 10 ++++++++++
 src/api_sdl.zig  | 21 +++++++++++++++++++++
 src/main_sdl.zig |  3 +++
 3 files changed, 34 insertions(+)

diff --git a/build.zig b/build.zig
index 77bd28f..bcb4d0c 100644
--- a/build.zig
+++ b/build.zig
@@ -9,6 +9,8 @@ pub fn build(b: *std.build.Builder) void {
 
     if (build_native) {
         const installSprites = b.addInstallFile(.{ .path = "assets/sprites.png" }, "bin/sprites.png");
+        const installMusic = b.addInstallFile(.{ .path = "assets/0.mp3" }, "bin/0.mp3");
+        const installSfx = b.addInstallFile(.{ .path = "assets/0.wav" }, "bin/0.wav");
 
         // Standard release options allow the person running `zig build` to select
         // between Debug, ReleaseSafe, ReleaseFast, and ReleaseSmall.
@@ -18,21 +20,29 @@ pub fn build(b: *std.build.Builder) void {
         exe.addIncludePath("SDL2-devel-2.26.1-VC/SDL2-2.26.1/include");
         exe.addLibraryPath("SDL2_image-devel-2.6.2-VC/SDL2_image-2.6.2/lib/x64");
         exe.addIncludePath("SDL2_image-devel-2.6.2-VC/SDL2_image-2.6.2/include");
+        exe.addLibraryPath("SDL2_mixer-devel-2.6.2-VC/SDL2_mixer-2.6.2/lib/x64");
+        exe.addIncludePath("SDL2_mixer-devel-2.6.2-VC/SDL2_mixer-2.6.2/include");
 
+        const installSDLMixerDLL = b.addInstallFile(.{ .path = "SDL2_mixer-devel-2.6.2-VC/SDL2_mixer-2.6.2/lib/x64/SDL2_mixer.dll" }, "bin/SDL2_mixer.dll");
         const installSDLImageDLL = b.addInstallFile(.{ .path = "SDL2_image-devel-2.6.2-VC/SDL2_image-2.6.2/lib/x64/SDL2_image.dll" }, "bin/SDL2_image.dll");
         const installSDLDLL = b.addInstallFile(.{ .path = "SDL2-devel-2.26.1-VC/SDL2-2.26.1/lib/x64/SDL2.dll" }, "bin/SDL2.dll");
 
         exe.linkLibC();
         exe.linkSystemLibraryName("SDL2");
         exe.linkSystemLibraryName("SDL2_image");
+        exe.linkSystemLibraryName("SDL2_mixer");
 
         exe.setTarget(target);
         exe.setBuildMode(mode);
 
         exe.install();
 
+
+        exe.step.dependOn(&installSDLMixerDLL.step);
         exe.step.dependOn(&installSDLImageDLL.step);
         exe.step.dependOn(&installSDLDLL.step);
+        exe.step.dependOn(&installMusic.step);
+        exe.step.dependOn(&installSfx.step);
         exe.step.dependOn(&installSprites.step);
     }
 
diff --git a/src/api_sdl.zig b/src/api_sdl.zig
index 94a03c8..8aff6b9 100644
--- a/src/api_sdl.zig
+++ b/src/api_sdl.zig
@@ -1,6 +1,7 @@
 const std = @import("std");
 const sdl = @cImport(@cInclude("SDL.h"));
 const sdl_image = @cImport(@cInclude("SDL_image.h"));
+const sdl_mixer = @cImport(@cInclude("SDL_mixer.h"));
 
 const math = std.math;
 
@@ -36,6 +37,8 @@ pub const ApiSDL = struct {
     camera_x: f32 = 0.0,
     camera_y: f32 = 0.0,
     map_data: [4 * 256 * 256]u8 = [_]u8{0} ** (4 * 256 * 256),
+    playing_music: bool = false,
+    playing_sfx: bool = false,
 
     pub fn init(renderer: *sdl.SDL_Renderer, texture: *sdl.SDL_Texture) ApiSDL {
         return .{ .renderer = renderer, .texture = texture };
@@ -53,6 +56,24 @@ pub const ApiSDL = struct {
         _ = sdl.SDL_RenderCopy(self.renderer, self.texture, &src, &dest);
     }
 
+    pub fn music(self: *ApiSDL, audio: u32, fadems: u32, channelMask: u32) void {
+        self.playing_music = true;
+        var mus = sdl_mixer.Mix_LoadMUS("0.mp3");
+        _ = sdl_mixer.Mix_PlayMusic(mus, 1);
+
+        //Not implemented yet
+        _ = audio;
+        _ = fadems;
+        _ = channelMask;
+    }
+
+    pub fn sfx(self: *ApiSDL, audio: u32) void { 
+        self.playing_sfx = true;
+        
+        //Not implemented yet
+        _ = audio;
+    }
+
     pub fn btnp(self: ApiSDL, button: Button) bool {
         return switch (button) {
             Button.LEFT => self.input_state.left_pressed,
diff --git a/src/main_sdl.zig b/src/main_sdl.zig
index 76dfb64..7f8dfac 100644
--- a/src/main_sdl.zig
+++ b/src/main_sdl.zig
@@ -1,6 +1,7 @@
 const std = @import("std");
 const sdl = @cImport(@cInclude("SDL.h"));
 const sdl_image = @cImport(@cInclude("SDL_image.h"));
+const sdl_mixer = @cImport(@cInclude("SDL_mixer.h"));
 
 const Api = @import("api_sdl.zig");
 const Game = @import("game.zig").Game;
@@ -47,6 +48,8 @@ pub fn main() !void {
     const img = @ptrCast(?*sdl.SDL_Texture, sdl_image.IMG_LoadTexture(image_renderer, "sprites.png"));
     defer sdl.SDL_DestroyTexture(img);
 
+    _ = sdl_mixer.Mix_OpenAudio(22050,sdl_mixer.AUDIO_S16SYS,2,640);
+
     var api = Api.ApiSDL.init(renderer.?, img.?);
     var game = Game.init(&api);
 

From 5bd1986605e8946fdc99468629b4f951095cbb89 Mon Sep 17 00:00:00 2001
From: ryan <ryan.darge@gmail.com>
Date: Mon, 16 Jan 2023 15:18:58 -0500
Subject: [PATCH 4/4] Updating gitignore, index, readme with mixer; added rough
 stab at sdl sfx

---
 .gitignore      | 3 +--
 README.md       | 5 +++--
 index.html      | 6 +++---
 src/api_sdl.zig | 3 +++
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/.gitignore b/.gitignore
index 4696b1b..3413291 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,8 +9,7 @@
 # Cheers!
 # -andrewrk
 
-SDL2_image-devel-2.6.2-VC/
-SDL2-devel-2.26.1-VC/
+SDL2*/
 zig-cache/
 zig-out/
 /release/
diff --git a/README.md b/README.md
index 46c0639..489743d 100644
--- a/README.md
+++ b/README.md
@@ -20,8 +20,9 @@ Aside from zig (obviously), you need both SDL2 and SDL_Image development release
 
 1. Download the sdl development release SDL2-devel-2.26.1-VC and unzip in the main directory of this repo. [releases](https://github.com/libsdl-org/SDL/releases/tag/release-2.26.1)
 2. Download the sdl2 image development release SDL2_image-devel-2.6.2-VC and unzip in the main directory of this repo. [releases](https://github.com/libsdl-org/SDL_image/releases/tag/release-2.6.2)
-3. Run `zig build -Dnative=true` this builds a native executable that can be found in  the `zig-out/bin` directory
-4. Run `./game1.exe` and let the fun begin.
+3. Download the sdl2 mixer development release SDL2_mixer-devel-2.6.2-VC and unzip in the main directory of this repo. [releases](https://github.com/libsdl-org/SDL_mixer/releases/tag/release-2.6.2)
+4. Run `zig build -Dnative=true` this builds a native executable that can be found in  the `zig-out/bin` directory
+5. Run `./game1.exe` and let the fun begin.
 
 ### WASM
 
diff --git a/index.html b/index.html
index 072eaa7..79b12cf 100644
--- a/index.html
+++ b/index.html
@@ -73,7 +73,7 @@
                   return;
                 }
 
-                const channel = "music";
+                const channel = "music-" + track;
                 const existingTrack = document.getElementById(channel);
                 if(existingTrack) {
                   existingTrack.remove();
@@ -100,13 +100,13 @@
               },
               wasmSfx: (track) => {
                 console.log("Trying to play sfx ", track);
-                const channel = "sfx" + track; 
+                const channel = "sfx-" + track; 
                 const existingTrack = document.getElementById(channel);
                 if(existingTrack) {
                   existingTrack.remove();
                 }
                 const newTrack = new Audio("assets/"+track+".wav");
-                const newChannel = music.appendChild(newTrack);
+                const newChannel = sfx.appendChild(newTrack);
                 newChannel.id = channel;
                 newTrack.loop = false;
                 newTrack.play();
diff --git a/src/api_sdl.zig b/src/api_sdl.zig
index 8aff6b9..8abb375 100644
--- a/src/api_sdl.zig
+++ b/src/api_sdl.zig
@@ -69,6 +69,9 @@ pub const ApiSDL = struct {
 
     pub fn sfx(self: *ApiSDL, audio: u32) void { 
         self.playing_sfx = true;
+
+        var sound = sdl_mixer.Mix_LoadWAV("0.wav");
+        _ = sdl_mixer.Mix_PlayChannel(-1, sound, 0);
         
         //Not implemented yet
         _ = audio;
