feat: add audio players

src/components/SVGContent.svelte

@@ -252,6 +252,12 @@
     audioAreas = processAudio(svg);
     console.info(`[SVG] Found ${audioAreas.length} audio areas.`);
 
+    // Audio areas
+    console.debug("[SVG] Processing audio players.");
+    const audioPlayers = processAudioPlayers(svg);
+    // console.info(`[SVG] Found ${audioAreas.length} audio areas.`);
+    audioPlayers.forEach((el) => root.appendChild(el));
+
     // Videoscrolls
     console.debug("[SVG] Processing video scrolls.");
     scrolls = await processScrolls(svg, imageElements);
@@ -526,6 +532,55 @@
       });
   }
 
+  function processAudioPlayers(svg: SVGElement): HTMLAudioElement[] {
+    const ratio = svg.clientWidth / (svg as any).viewBox.baseVal.width;
+    const result = [];
+
+    Array.from(svg.getElementsByTagName("rect")).forEach((el) => {
+      if (el.id.includes("audio")) {
+        const descNode = Array.from(el.children).find(
+          (el) => el.tagName == "desc"
+        );
+        console.debug(
+          `[SVG/AUDIOPLAYERS] Found audio player #${el.id}: ${descNode?.textContent}`
+        );
+
+        let x = el.x.baseVal.value;
+        let y = el.y.baseVal.value;
+        let w = el.width.baseVal.value;
+        let h = el.height.baseVal.value;
+        let angle = 0;
+
+        const transform = el.attributes.getNamedItem("transform");
+        const rotateResult = /rotate\((-?[0-9.]+)\)/.exec(
+          transform?.value || ""
+        );
+        if (rotateResult) {
+          angle = parseFloat(rotateResult[1]);
+          const [ncx, ncy] = rotate(x + w / 2, y + h / 2, 0, 0, angle);
+          x = ncx - w / 2;
+          y = ncy - h / 2;
+        }
+
+        const audioEl = document.createElement("audio");
+        audioEl.classList.add("audioPlayer");
+        audioEl.controls = true;
+        audioEl.src = `content/${descNode.textContent}`;
+        audioEl.style.position = "absolute";
+        audioEl.style.top = `${y * ratio}px`;
+        audioEl.style.left = `${x * ratio}px`;
+        audioEl.style.width = `${w * ratio}px`;
+        audioEl.style.height = `${h * ratio}px`;
+        console.log({ audioEl });
+        result.push(audioEl);
+
+        el.classList.add("internal");
+      }
+    });
+
+    return result;
+  }
+
   function processHyperlinks(svg: XMLDocument): {
     anchor: [string, SVGAElement][];
     hyper: SVGAElement[];