feat: audio toggle control

public/index.html

@@ -159,6 +159,10 @@
         <input type="checkbox" id="controls-loop" name="loop" checked />
         <label for="controls-loop">Loop</label>
       </div>
+      <div>
+        <input type="checkbox" id="controls-audio" name="audio" checked />
+        <label for="controls-audio">Audio</label>
+      </div>
       <input type="number" id="controls-from" name="from" value="0" />
       <input type="button" id="controls-reset" name="refresh" value="Reset" />
       <input type="button" id="controls-next" name="next" value="Next" />
@@ -192,8 +196,8 @@
           value="0"
         />
       </div>
-      <div id="loading">Loading...</div>
       <input type="button" id="controls-render" name="render" value="Render" />
+      <div id="loading">Loading...</div>
     </form>
     <script src="index.js"></script>
   </body>

src/player/Controls.ts

@@ -3,6 +3,7 @@ import {Player, PlayerRenderEvent, PlayerState} from './Player';
 export class Controls {
   private play: HTMLInputElement;
   private loop: HTMLInputElement;
+  private audio: HTMLInputElement;
   private from: HTMLInputElement;
   private current: HTMLInputElement;
   private speed: HTMLInputElement;
@@ -19,6 +20,7 @@ export class Controls {
   ) {
     this.play = form.play;
     this.loop = form.loop;
+    this.audio = form.audio;
     this.from = form.from;
     this.current = form.current;
     this.speed = form.speed;
@@ -31,6 +33,9 @@ export class Controls {
     this.loop.addEventListener('change', () =>
       this.player.updateState({loop: this.loop.checked}),
     );
+    this.audio.addEventListener('change', () =>
+      this.player.toggleAudio(this.audio.checked),
+    );
     this.from.addEventListener('change', () =>
       this.player.updateState({startFrame: parseInt(this.from.value)}),
     );
@@ -60,6 +65,10 @@ export class Controls {
           event.preventDefault();
           this.player.requestReset();
           break;
+        case 'm':
+          event.preventDefault();
+          this.player.toggleAudio();
+          break;
       }
     });
 
@@ -76,6 +85,7 @@ export class Controls {
     this.updateFramerate(state.frame);
     this.play.checked = !state.paused;
     this.loop.checked = state.loop;
+    this.audio.checked = !state.muted;
     this.from.value = state.startFrame.toString();
     this.current.value = state.frame.toString();
     this.speed.value = state.speed.toString();

src/player/Player.ts

@@ -16,6 +16,7 @@ export interface PlayerState {
   loop: boolean;
   speed: number;
   render: boolean;
+  muted: boolean;
 }
 
 interface PlayerCommands {
@@ -57,6 +58,7 @@ export class Player {
     loop: true,
     speed: 1,
     render: false,
+    muted: true,
   };
 
   private commands: PlayerCommands = {
@@ -91,6 +93,7 @@ export class Player {
       this.state.startFrame = state.startFrame;
       this.state.loop = state.loop;
       this.state.speed = state.speed;
+      this.state.muted = state.muted;
     }
 
     if (audioSrc) {
@@ -133,6 +136,12 @@ export class Player {
     });
   }
 
+  public toggleAudio(value?: boolean): void {
+    this.updateState({
+      muted: !(value ?? this.state.muted),
+    });
+  }
+
   private async run() {
     let commands = this.consumeCommands();
     let state = {...this.state};
@@ -155,6 +164,9 @@ export class Player {
         }
       }
     }
+    if (this.audio) {
+      this.audio.muted = state.muted;
+    }
 
     // Rendering
     if (state.render) {

src/transitions/slideTransition.ts

@@ -16,7 +16,7 @@ export function slideTransition(
       project.width(),
       project.height(),
     );
-    yield* tween(4, value => {
+    yield* tween(0.6, value => {
       previous?.position(
         vector2dTween(
           {x: 0, y: 0},