elephant pic and sounds

Author: knoepdan

public/img/Ele.jpg

@@ -27,6 +27,26 @@ export default class GameComponent extends BaseComponent {
     this.build();
   }
 
+  private _soundsrc = "";
+  get soundsrc(): string {
+    return this._soundsrc;
+  }
+  set soundsrc(value: string) {
+    this._soundsrc = value;
+    console.log("game: soundsrc set to: " + value);
+    this.build();
+  }
+
+  private _soundSpeed = 1.0;
+  get soundSpeed(): number {
+    return this._soundSpeed;
+  }
+  set soundSpeed(value: number) {
+    this._soundSpeed = value;
+    console.log("game: soundSpped set to: " + value);
+    this.build();
+  }
+
   build = () => {
     if (!this.myShadow) {
       console.log("game called without shadow " + this.imagesrc);
@@ -87,15 +107,45 @@ export default class GameComponent extends BaseComponent {
       console.log("backtile clicked");
       window.location.reload(); // for now enough
     };
+
+    this.playSound();
   };
   connectedCallback() {
     this.myShadow = this.attachShadow({ mode: "open" }); // closed means it cannot be accessed from the outside
     this.build();
   }
+
+
+  playSound = () => {
+    try {
+      const audio = document.getElementById("my-audio") as HTMLAudioElement;
+      if(!audio){
+        return;
+      }
+
+      audio.pause();
+      audio.muted = true;
+      audio.playbackRate = 1.0;
+
+      if(!this.soundsrc){
+        return;
+      }
+
+      audio.src = this.soundsrc;
+      if(this.soundSpeed){
+        audio.playbackRate = this.soundSpeed;
+      }
+      audio.muted = false;
+      audio.play();
+    } catch (e: any) {
+      console.log("error playing audio " + e.message); // will happen when user has not interacted with document (to be improved)
+    }
+  };
+  
   //#region static webcomponent methods
 
   static get observedAttributes() {
-    return [nameof<GameComponent>("name"), nameof<GameComponent>("imagesrc")];
+    return [nameof<GameComponent>("name"), nameof<GameComponent>("imagesrc"), nameof<GameComponent>("soundsrc")];
   }
 
   //#endregion

public/sound/elephant.m4a

@@ -5,6 +5,8 @@ import StackComponent from "./stackComponent.js";
 interface IGameInfo {
   type?: string;
   imageSrc?: string;
+  soundSrc?: string;
+  soundSpeed?: number;
 }
 
 const init = () => {
@@ -16,16 +18,6 @@ const init = () => {
 
   const tiles = getGameTiles();
   document.getElementById("tile-container")?.append(...tiles);
-
-  // start audio (will only work if user interacts with the page.. so initially no music)
-  try {
-    const audio = document.getElementById("my-audio") as HTMLAudioElement;
-    audio.playbackRate = 2.0;
-    audio.muted = false;
-    audio.play();
-  } catch (e: any) {
-    console.log("error playing audio " + e.message); // will happen when user has not interacted with document (to be improved)
-  }
 };
 
 const getComponentContainer = () => {
@@ -41,7 +33,7 @@ const startGame = (tile?: TileComponent<IGameInfo>) => {
   );
   const componentContainer = getComponentContainer();
   if (tile?.data?.imageSrc) {
-    componentContainer.innerHTML = `<a-game name="${tile.name}" imageSrc="${tile.data.imageSrc}"></a-game>`;
+    componentContainer.innerHTML = `<a-game name="${tile.name}" imageSrc="${tile.data.imageSrc}" soundSrc="${tile.data.soundSrc}" soundSpeed="${tile.data.soundSpeed} ></a-game>`;
   }
 };
 
@@ -85,7 +77,7 @@ const getGameTiles = () => {
 
   tiles.push(
     new TileComponent<IGameInfo>("Die Familie", startGame, "green", "lime", {
-      imageSrc: "img/almostEverybody.jpg",
+      imageSrc: "img/almostEverybody.jpg", soundSrc: "sound/handflute.m4a", soundSpeed: 2.0
     })
   );
   tiles.push(
@@ -112,6 +104,13 @@ const getGameTiles = () => {
     })
   );
 
+  tiles.push(
+    new TileComponent<IGameInfo>("Gross und grau", startGame, "gray", "silver", {
+      imageSrc: "img/Ele.jpg", soundSrc: "sound/elephant.m4a"
+    })
+  );
+
+
   return tiles;
 };