Web app: quick MP3 hack for Safari

Author: parasti

.devcontainer/Dockerfile

@@ -6,7 +6,7 @@ ENV GL4ES_DIR=/opt/gl4es
 RUN \
     export DEBIAN_FRONTEND=noninteractive; \
     apt-get update -y; \
-    apt-get install less
+    apt-get install -y less ffmpeg
 
 COPY ./install-gl4es.sh /tmp/install-gl4es
 RUN \
@@ -20,4 +20,4 @@ RUN \
 RUN echo emscripten ALL=\(root\) NOPASSWD:ALL > /etc/sudoers.d/emscripten && \
     chmod 0440 /etc/sudoers.d/emscripten
 
-USER emscripten
+USER emscripten

emscripten/ball.mk

@@ -193,7 +193,7 @@ $(DATA_ZIP):
 
 .PHONY: packages
 packages: clean-packages
-	$(MAKE) -f mk/packages.mk OUTPUT_DIR=$$(pwd)/js/packages
+	$(MAKE) -f mk/packages.mk OUTPUT_DIR=$$(pwd)/js/packages all mp3s
 
 .PHONY: clean-packages
 clean-packages:

js/index.html

@@ -1012,16 +1012,24 @@ <h2><span class="neverball-text">About the game</span></h2>
         this.audioMusicFile = null;
         this.audioMusicSourceNode = null;
         this.audioMusicGainNode = null;
+
+        this.audioCanPlayOgg = (new Audio()).canPlayType('audio/ogg') !== '';
       },
 
       audioPlay: async function (fileName, fileData, a) {
-        if (!this.audioContext) {
-          return;
+        if (fileName.endsWith('.ogg') && !this.audioCanPlayOgg) {
+          // MP3 fallback for Safari.
+
+          const response = await fetch('packages/mp3/' + fileName.replace('.ogg', '.mp3'));
+
+          if (response.ok) {
+            fileData = await response.arrayBuffer();
+          }
         }
 
-        const audioBuffer = await this.audioContext.decodeAudioData(fileData);
+        const audioBuffer = await this.audioContext?.decodeAudioData(fileData);
 
-        if (!this.audioContext) {
+        if (!audioBuffer) {
           return;
         }
 
@@ -1039,14 +1047,11 @@ <h2><span class="neverball-text">About the game</span></h2>
 
         sourceNode.connect(gainNode);
         gainNode.connect(this.audioSoundSink);
+
         sourceNode.start();
       },
 
       audioMusicFadeTo: async function (fileName, fileData, fadeTime) {
-        if (!this.audioContext) {
-          return;
-        }
-
         if (this.audioMusicFile && fileName === this.audioMusicFile) {
           // If we're already playing this BGM, just force a fade-in.
 
@@ -1058,8 +1063,16 @@ <h2><span class="neverball-text">About the game</span></h2>
 
           // Set up and fade in the new BGM.
 
-          const blob = new Blob([fileData], {type: 'audio/ogg'});
-          const url = URL.createObjectURL(blob);
+          let url;
+
+          if (this.audioCanPlayOgg) {
+            const blob = new Blob([fileData], {type: 'audio/ogg'});
+
+            url = URL.createObjectURL(blob);
+          } else {
+            url = 'packages/mp3/' + fileName.replace('.ogg', '.mp3');
+          }
+
           const audioElem = new Audio(url);
 
           audioElem.loop = true;