Stub out actual audio player

packages/webamp-modern-2/src/UIRoot.ts

@@ -1,9 +1,10 @@
 import Bitmap from "./skin/Bitmap";
 import { XmlElement } from "@rgrove/parse-xml";
 import TrueTypeFont from "./skin/TrueTypeFont";
-import { assert } from "./utils";
+import { assert, assume } from "./utils";
 import BitmapFont from "./skin/BitmapFont";
 import Color from "./skin/Color";
+import AUDIO_PLAYER from "./skin/AudioPlayer";
 
 class UIRoot {
   // Just a temporary place to stash things
@@ -83,6 +84,31 @@ class UIRoot {
 
     return found ?? null;
   }
+
+  dispatch(action: string) {
+    switch (action) {
+      case "PLAY":
+        AUDIO_PLAYER.play();
+        break;
+      case "PAUSE":
+        AUDIO_PLAYER.pause();
+        break;
+      case "STOP":
+        AUDIO_PLAYER.stop();
+        break;
+      case "NEXT":
+        AUDIO_PLAYER.next();
+        break;
+      case "PREV":
+        AUDIO_PLAYER.previous();
+        break;
+      case "EJECT":
+        AUDIO_PLAYER.eject();
+        break;
+      default:
+        assume(false, `Unknown global action: ${action}`);
+    }
+  }
 }
 
 // Global Singleton for now

packages/webamp-modern-2/src/skin/AudioPlayer.ts

@@ -0,0 +1,50 @@
+class AudioPlayer {
+  _input: HTMLInputElement = document.createElement("input");
+  _audio: HTMLAudioElement = document.createElement("audio");
+  constructor() {
+    this._audio.src =
+      "https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Auto-Pilot_-_03_-_Seventeen.mp3";
+    this._input.type = "file";
+    // document.body.appendChild(this._input);
+    // TODO: dispose
+    this._input.onchange = (e) => {
+      const file = this._input.files[0];
+      if (file == null) {
+        return;
+      }
+      this._audio.src = URL.createObjectURL(file);
+      this.play();
+    };
+  }
+  // 0-1
+  getVolume(): number {
+    return this._audio.volume;
+  }
+  play() {
+    this._audio.play();
+  }
+  stop() {
+    // TODO: Actually stop
+    this._audio.pause();
+  }
+  pause() {
+    this._audio.pause();
+  }
+
+  eject() {
+    this._input.click();
+  }
+
+  next() {}
+
+  previous() {}
+
+  // 0-1
+  setVolume(volume: number) {
+    this._audio.volume = volume;
+  }
+}
+
+const AUDIO_PLAYER = new AudioPlayer();
+
+export default AUDIO_PLAYER;

packages/webamp-modern-2/src/skin/Button.ts

@@ -8,6 +8,7 @@ export default class Button extends GuiObj {
   _image: string;
   _downimage: string;
   _active: boolean = false;
+  _action: string | null = null;
 
   setXmlAttr(_key: string, value: string): boolean {
     const key = _key.toLowerCase();
@@ -21,6 +22,9 @@ export default class Button extends GuiObj {
       case "downimage":
         this._downimage = value;
         break;
+      case "action":
+        this._action = value;
+        break;
       default:
         return false;
     }
@@ -83,6 +87,9 @@ export default class Button extends GuiObj {
     // TODO: Cleanup!
     this._div.addEventListener("mousedown", this._handleMouseDown.bind(this));
     this._div.addEventListener("click", (e) => {
+      if (this._action) {
+        UI_ROOT.dispatch(this._action);
+      }
       // TODO: Only left button
       this.onLeftClick();
     });

packages/webamp-modern-2/src/skin/SystemObject.ts

@@ -2,9 +2,10 @@ import { getClass } from "../maki/objects";
 import { ParsedMaki } from "../maki/parser";
 import { V } from "../maki/v";
 import { SkinContext } from "../types";
+import AUDIO_PLAYER from "./AudioPlayer";
 import BaseObject from "./BaseObject";
 import Container from "./Container";
-
+import { clamp } from "../utils";
 import Group from "./Group";
 import PRIVATE_CONFIG from "./PrivateConfig";
 import { VM } from "./VM";
@@ -151,7 +152,19 @@ export default class SystemObject extends BaseObject {
    * @ret The current volume.
    **/
   getvolume() {
-    return 100;
+    return AUDIO_PLAYER.getVolume() * 255;
+  }
+
+  /**
+   * Set the volume to the desired value.
+   * Range is from 0 to 255.
+   *
+   *  @param vol  The desired volume value.
+   */
+  setvolume(_vol: number) {
+    const vol = clamp(_vol, 0, 255);
+
+    AUDIO_PLAYER.setVolume(vol / 255);
   }
 
   /**

packages/webamp-modern-2/src/utils.ts

@@ -44,3 +44,7 @@ export function getId(): number {
 export function ensureVmInt(num: number): number {
   return Math.floor(num);
 }
+
+export function clamp(num: number, min: number, max: number): number {
+  return Math.max(min, Math.min(num, max));
+}