Fix audio volume scale to 0-100

package.json

@@ -1,6 +1,6 @@
 {
   "name": "route-graphics",
-  "version": "1.7.4",
+  "version": "1.7.5",
   "description": "A 2D graphics rendering interface that takes JSON input and renders pixels using PixiJS",
   "main": "dist/RouteGraphics.js",
   "type": "module",

playground/pages/docs/nodes/rect.md

@@ -89,7 +89,7 @@ elements:
         action: panelHover
     click:
       soundSrc: click-sfx
-      soundVolume: 900
+      soundVolume: 90
       payload:
         action: panelClick
     rightClick:

playground/pages/docs/nodes/sound.md

@@ -20,7 +20,7 @@ Try it in the [Playground](/playground/?template=sound-demo).
 | `id`     | string  | Yes      | -       | Audio id.                                           |
 | `type`   | string  | Yes      | -       | Must be `sound`.                                    |
 | `src`    | string  | Yes      | -       | Audio source alias/URL.                             |
-| `volume` | number  | No       | `800`   | Runtime maps to `volume / 1000`; can exceed `1000`. |
+| `volume` | number  | No       | `80`    | Runtime maps to `volume / 100`.                      |
 | `loop`   | boolean | No       | `false` | Loop playback.                                      |
 | `delay`  | number  | No       | `0`     | Delay in ms before adding to audio stage.           |
 
@@ -46,7 +46,7 @@ audio:
   - id: bgm-main
     type: sound
     src: bgm-1
-    volume: 700
+    volume: 70
     loop: true
 ```
 
@@ -58,5 +58,5 @@ audio:
     type: sound
     src: sfx-announce
     delay: 1200
-    volume: 900
+    volume: 90
 ```

playground/pages/docs/nodes/sprite.md

@@ -72,7 +72,7 @@ elements:
     click:
       src: fighter-pressed
       soundSrc: click-sfx
-      soundVolume: 900
+      soundVolume: 90
       payload:
         action: selectHero
     rightClick:

playground/pages/docs/nodes/text.md

@@ -96,7 +96,7 @@ elements:
         target: start
     click:
       soundSrc: click-sfx
-      soundVolume: 850
+      soundVolume: 85
       textStyle:
         fill: "#66ff99"
       payload:

playground/pages/docs/nodes/video.md

@@ -27,7 +27,7 @@ Try it in the [Playground](/playground/?template=video-demo).
 | `anchorX` | number  | No                  | `0`            | Anchor offset ratio.              |
 | `anchorY` | number  | No                  | `0`            | Anchor offset ratio.              |
 | `alpha`   | number  | No                  | `1`            | Opacity `0..1`.                   |
-| `volume`  | number  | No                  | `1000`         | Runtime uses `volume / 1000`.     |
+| `volume`  | number  | No                  | `100`          | Runtime uses `volume / 100`.      |
 | `loop`    | boolean | No                  | `false`        | Replay video on end.              |
 
 ## Behavior Notes
@@ -61,7 +61,7 @@ elements:
     height: 720
     src: background-loop.mp4
     loop: true
-    volume: 200
+    volume: 20
     alpha: 0.9
 ```
 
@@ -76,7 +76,7 @@ elements:
     width: 1120
     height: 630
     src: chapter-1.mp4
-    volume: 700
+    volume: 70
 
 animations:
   - id: cutscene-fade

spec/audio/updateSound.spec.js

@@ -43,7 +43,7 @@ describe("updateSound", () => {
         src: "next.mp3",
         delay: 100,
         loop: true,
-        volume: 500,
+        volume: 50,
       },
     });
 
@@ -78,7 +78,7 @@ describe("updateSound", () => {
         src: "new.mp3",
         delay: 0,
         loop: false,
-        volume: 900,
+        volume: 90,
       },
     });
 
@@ -106,7 +106,7 @@ describe("updateSound", () => {
         src: "amb-2.mp3",
         delay: 0,
         loop: true,
-        volume: 600,
+        volume: 60,
       },
     });
 

spec/elements/updateVideo.spec.js

@@ -65,7 +65,7 @@ describe("updateVideo", () => {
         id: "video-1",
         src: "video.mp4",
         loop: true,
-        volume: 500,
+        volume: 50,
         x: 0,
         y: 0,
         width: 100,
@@ -76,7 +76,7 @@ describe("updateVideo", () => {
         id: "video-1",
         src: "video.mp4",
         loop: false,
-        volume: 500,
+        volume: 50,
         x: 0,
         y: 0,
         width: 100,

src/plugins/audio/sound/addSound.js

@@ -1,11 +1,13 @@
+import { normalizeVolume } from "../../../util/normalizeVolume.js";
+
 // Track pending delayed sounds by sound id so updates/deletes can cancel specific entries.
 const pendingTimeoutById = new Map();
 
 const createAudioElement = (element) => ({
   id: element.id,
   url: element.src,
   loop: element.loop ?? false,
-  volume: (element.volume ?? 800) / 1000,
+  volume: normalizeVolume(element.volume, 80),
 });
 
 export const hasPendingSound = (id) => pendingTimeoutById.has(id);

src/plugins/audio/sound/updateSound.js

@@ -3,6 +3,7 @@ import {
   hasPendingSound,
   scheduleSound,
 } from "./addSound.js";
+import { normalizeVolume } from "../../../util/normalizeVolume.js";
 
 /**
  * Update sound element on the audio stage
@@ -29,7 +30,7 @@ export const updateSound = ({ app, prevElement, nextElement }) => {
       id,
       url: nextElement.src,
       loop: nextElement.loop ?? false,
-      volume: (nextElement.volume ?? 800) / 1000,
+      volume: normalizeVolume(nextElement.volume, 80),
     });
     return;
   }
@@ -40,12 +41,12 @@ export const updateSound = ({ app, prevElement, nextElement }) => {
       id,
       url: nextElement.src,
       loop: nextElement.loop ?? false,
-      volume: (nextElement.volume ?? 800) / 1000,
+      volume: normalizeVolume(nextElement.volume, 80),
     });
     return;
   }
 
   audioElement.url = nextElement.src;
   audioElement.loop = nextElement.loop ?? false;
-  audioElement.volume = (nextElement.volume ?? 800) / 1000;
+  audioElement.volume = normalizeVolume(nextElement.volume, 80);
 };

src/plugins/elements/container/util/bindContainerInteractions.js

@@ -1,4 +1,5 @@
 import { Rectangle } from "pixi.js";
+import { normalizeVolume } from "../../../../util/normalizeVolume.js";
 import {
   isPrimaryPointerEvent,
   isSecondaryPointerEvent,
@@ -225,7 +226,7 @@ export const bindContainerInteractions = ({
           id: `click-${Date.now()}`,
           url: soundSrc,
           loop: false,
-          volume: (soundVolume ?? 1000) / 1000,
+          volume: normalizeVolume(soundVolume),
         });
     };
 

src/plugins/elements/rect/addRect.js

@@ -1,4 +1,5 @@
 import { Graphics } from "pixi.js";
+import { normalizeVolume } from "../../../util/normalizeVolume.js";
 import { dispatchLiveAnimations } from "../../animations/planAnimations.js";
 import { setupScrollInteraction } from "./setupScrollInteraction.js";
 import { isPrimaryPointerEvent } from "../util/isPrimaryPointerEvent.js";
@@ -120,7 +121,7 @@ export const addRect = ({
           id: `click-${Date.now()}`,
           url: soundSrc,
           loop: false,
-          volume: (soundVolume ?? 1000) / 1000,
+          volume: normalizeVolume(soundVolume),
         });
     };
 

src/plugins/elements/rect/updateRect.js

@@ -1,4 +1,5 @@
 import { isDeepEqual } from "../../../util/isDeepEqual.js";
+import { normalizeVolume } from "../../../util/normalizeVolume.js";
 import { dispatchLiveAnimations } from "../../animations/planAnimations.js";
 import { setupScrollInteraction } from "./setupScrollInteraction.js";
 import { isPrimaryPointerEvent } from "../util/isPrimaryPointerEvent.js";
@@ -133,7 +134,7 @@ export const updateRect = ({
               id: `click-${Date.now()}`,
               url: soundSrc,
               loop: false,
-              volume: (soundVolume ?? 1000) / 1000,
+              volume: normalizeVolume(soundVolume),
             });
         };
 

src/plugins/elements/sprite/addSprite.js

@@ -1,4 +1,5 @@
 import { Sprite, Texture } from "pixi.js";
+import { normalizeVolume } from "../../../util/normalizeVolume.js";
 import { dispatchLiveAnimations } from "../../animations/planAnimations.js";
 import { isPrimaryPointerEvent } from "../util/isPrimaryPointerEvent.js";
 import {
@@ -132,7 +133,7 @@ export const addSprite = ({
           id: `click-${Date.now()}`,
           url: soundSrc,
           loop: false,
-          volume: (soundVolume ?? 1000) / 1000,
+          volume: normalizeVolume(soundVolume),
         });
     };
 

src/plugins/elements/sprite/updateSprite.js

@@ -1,5 +1,6 @@
 import { Texture } from "pixi.js";
 import { isDeepEqual } from "../../../util/isDeepEqual.js";
+import { normalizeVolume } from "../../../util/normalizeVolume.js";
 import { dispatchLiveAnimations } from "../../animations/planAnimations.js";
 import { isPrimaryPointerEvent } from "../util/isPrimaryPointerEvent.js";
 import {
@@ -157,7 +158,7 @@ export const updateSprite = ({
               id: `click-${Date.now()}`,
               url: soundSrc,
               loop: false,
-              volume: (soundVolume ?? 1000) / 1000,
+              volume: normalizeVolume(soundVolume),
             });
         };
 

src/plugins/elements/text/addText.js

@@ -1,5 +1,6 @@
 import { Text } from "pixi.js";
 import applyTextStyle from "../../../util/applyTextStyle.js";
+import { normalizeVolume } from "../../../util/normalizeVolume.js";
 import { dispatchLiveAnimations } from "../../animations/planAnimations.js";
 import {
   getTextLayoutPosition,
@@ -147,7 +148,7 @@ export const addText = ({
           id: `click-${Date.now()}`,
           url: soundSrc,
           loop: false,
-          volume: (soundVolume ?? 1000) / 1000,
+          volume: normalizeVolume(soundVolume),
         });
     };
 

src/plugins/elements/text/updateText.js

@@ -1,5 +1,6 @@
 import applyTextStyle from "../../../util/applyTextStyle.js";
 import { isDeepEqual } from "../../../util/isDeepEqual.js";
+import { normalizeVolume } from "../../../util/normalizeVolume.js";
 import { dispatchLiveAnimations } from "../../animations/planAnimations.js";
 import {
   getTextLayoutPosition,
@@ -173,7 +174,7 @@ export const updateText = ({
               id: `click-${Date.now()}`,
               url: soundSrc,
               loop: false,
-              volume: (soundVolume ?? 1000) / 1000,
+              volume: normalizeVolume(soundVolume),
             });
         };
 

src/plugins/elements/video/addVideo.js

@@ -1,6 +1,7 @@
 import { Texture, Sprite } from "pixi.js";
 import { syncVideoPlaybackTracking } from "./playbackTracking.js";
 import { queueDeferredVideoPlay } from "../renderContext.js";
+import { normalizeVolume } from "../../../util/normalizeVolume.js";
 
 /**
  * Add video element to the stage
@@ -21,7 +22,7 @@ export const addVideo = ({
   video.pause();
   video.currentTime = 0;
   video.loop = loop ?? false;
-  video.volume = volume / 1000;
+  video.volume = normalizeVolume(volume);
   video.muted = false;
 
   const sprite = new Sprite(texture);

src/plugins/elements/video/parseVideo.js

@@ -18,7 +18,7 @@ export const parseVideo = ({ state }) => {
   return {
     ...finalObj,
     src: state.src,
-    volume: state.volume ?? 1000,
+    volume: state.volume ?? 100,
     loop: state.loop ?? false,
   };
 };

src/plugins/elements/video/updateVideo.js

@@ -5,6 +5,7 @@ import {
   syncVideoPlaybackTracking,
 } from "./playbackTracking.js";
 import { dispatchLiveAnimations } from "../../animations/planAnimations.js";
+import { normalizeVolume } from "../../../util/normalizeVolume.js";
 
 /**
  * Update video element
@@ -67,7 +68,7 @@ export const updateVideo = ({
         completionTracker,
       });
 
-      activeVideo.volume = nextElement.volume / 1000;
+      activeVideo.volume = normalizeVolume(nextElement.volume);
       activeVideo.loop = nextElement.loop ?? false;
 
       if (prevElement.src !== nextElement.src) {

src/schemas/audio/sound.yaml

@@ -18,9 +18,10 @@ properties:
     description: Source of the sound
   volume:
     type: number
-    description: Volume. 0 means muted. 1000 means original full volume. It can go above 1000, but there is no guarantee that it won't be clipped.
-    default: 800
+    description: Volume. 0 means muted. 100 means original full volume.
+    default: 80
     minimum: 0
+    maximum: 100
   loop:
     type: boolean
     description: Loop

src/schemas/elements/container.computed.yaml

@@ -157,10 +157,10 @@ properties:
         description: source of sound to be played when the container is clicked
       soundVolume:
         type: number
-        description: Volume. 0 means muted. 1000 means original full volume.
+        description: Volume. 0 means muted. 100 means original full volume.
         minimum: 0
-        maximum: 1000
-        default: 1000
+        maximum: 100
+        default: 100
       payload:
         type: object
         description: Payload for click action event

src/schemas/elements/container.element.yaml

@@ -190,10 +190,10 @@ properties:
         description: source of sound to be played when the container is clicked
       soundVolume:
         type: number
-        description: Volume. 0 means muted. 1000 means original full volume.
+        description: Volume. 0 means muted. 100 means original full volume.
         minimum: 0
-        maximum: 1000
-        default: 1000
+        maximum: 100
+        default: 100
       payload:
         type: object
         description: Payload for click action event

src/schemas/elements/rect.computed.yaml

@@ -78,10 +78,10 @@ properties:
         description: source of sound to be played when the sprite is clicked
       soundVolume:
         type: number
-        description: Volume. 0 means muted. 1000 means original full volume.
+        description: Volume. 0 means muted. 100 means original full volume.
         minimum: 0
-        maximum: 1000
-        default: 1000
+        maximum: 100
+        default: 100
       payload:
         type: object
         description: Payload for click action event

src/schemas/elements/rect.element.yaml

@@ -85,10 +85,10 @@ properties:
         description: source of sound to be played when the sprite is clicked
       soundVolume:
         type: number
-        description: Volume. 0 means muted. 1000 means original full volume.
+        description: Volume. 0 means muted. 100 means original full volume.
         minimum: 0
-        maximum: 1000
-        default: 1000
+        maximum: 100
+        default: 100
       payload:
         type: object
         description: Payload for click action event