Sound funktioniert jetzt auch auf Android (endlich)

src/js/init.js

@@ -31,8 +31,11 @@ import {DeleteWordsSite} from "../module/Application/pwa/js/site/DeleteWordsSite
 
 import './settings'
 
-applyPolyfills();
+window.onerror = (e, u, l) => {
+    console.error(e, u, l);
+};
 
+applyPolyfills();
 
 ThemeManager.addTheme(new Theme('red', 'red'));
 ThemeManager.addTheme(new Theme("blue", "blue"));
@@ -62,13 +65,18 @@ SettingsSite.setTemplate("html/application/setting-template.html");
 RegistrationSite.addAction = false;
 LoginSite.addLoginAction = false;
 
-InitPromise.resolve(app).then(async function(){
+InitPromise.resolve(app).then(async function () {
     SettingsSite.settingsAction.showFor = MenuAction.SHOW_ALWAYS;
 
     let settingsManager = SettingsManager.getInstance();
 
     let soundManager = SoundManager.getInstance();
-    soundManager.play(SoundManager.CHANNELS.MUSIC, {audio: "sound/brightAndBeautifull__.mp3", loop: true, volume: 0.6, muted: (settingsManager.getSetting("play-music", "1") !== "1")});
+    soundManager.play(SoundManager.CHANNELS.MUSIC, {
+        audio: "sound/brightAndBeautifull__.mp3",
+        loop: true,
+        volume: 0.6,
+        muted: (settingsManager.getSetting("play-music", "1") !== "1")
+    }).catch(e => console.error(e));
 
     app.start(MenuSite);
     Translator.setLanguage("de");

src/js/lib/pwa-assets.js

@@ -320,6 +320,11 @@ class AudioChain {
     }
 
     async start(delay, offset, duration) {
+        //sind sonst null, schmeißt in Android 5 einen fehler
+        delay = Helper.nonNull(delay, 0);
+        offset = Helper.nonNull(offset, 0);
+        duration = Helper.nonNull(duration, this.buffer.duration);
+
         let source = this.context.createBufferSource();
 
         source.loop = this.shouldLoop;
@@ -340,6 +345,8 @@ class AudioChain {
 
     async stop(delay) {
         if (Helper.isNotNull(this.source)) {
+            delay = Helper.nonNull(delay, 0);
+
             this.pauseTime = ((new Date()).getTime()) - this.startTime;
             this.running = false;
             return this.source.stop(delay);
@@ -366,12 +373,23 @@ class SoundManager {
     constructor() {
         this.channels = {};
         this.context = new AudioContext();
+        this.context.onstatechange = function () {
+            console.log("stateChange from context", arguments);
+        };
+        this.context.oncomplete = function () {
+            console.log("onComplete from context", arguments);
+        };
 
         window.addEventListener("visibilitychange", () => {
             this.handleVisibilityChange();
         });
     }
 
+    isNotSuspended(){
+        // return false;
+        return this.context.state !== "suspended";
+    }
+
     set(options, channel) {
         channel = Helper.nonNull(channel, SoundManager.CHANNELS.DEFAULT);
         let audioObject = Helper.nonNull(this.channels[channel], {});
@@ -382,7 +400,9 @@ class SoundManager {
 
         let audio = options.audio;
         if (Helper.isNotNull(audio)) {
-            audioObject.loadedPromise = fetch(audio).then(res => res.arrayBuffer()).then(arrayBuffer => this.context.decodeAudioData(arrayBuffer));
+            audioObject.loadedPromise = fetch(audio).then(res => res.arrayBuffer()).then(arrayBuffer => {
+                return new Promise((r) => this.context.decodeAudioData(arrayBuffer, r));
+            }).catch(e => console.error(e));
             this.stop(channel);
         }
         audioObject.muted = Helper.nonNull(options.muted, audioObject.muted, false);
@@ -399,6 +419,9 @@ class SoundManager {
     }
 
     async play(channel, audioOrOptions) {
+        if (typeof this.context.resume === "function") {
+            this.context.resume();
+        }
         channel = Helper.nonNull(channel, SoundManager.CHANNELS.DEFAULT);
         if (Helper.isNull(audioOrOptions)) {
             audioOrOptions = {};
@@ -427,9 +450,8 @@ class SoundManager {
             //to prevent gap in mp3-files
             source.setLooping(this.channels[channel].loop, 0.3, buffer.duration - 0.3);
 
-            source.start();
-
             this.channels[channel].source = source;
+            await source.start();
         }
         return this.channels[channel];
     }
@@ -437,8 +459,9 @@ class SoundManager {
     stop(channel) {
         channel = Helper.nonNull(channel, SoundManager.CHANNELS.DEFAULT);
 
+
         let oldAudio = this.channels[channel];
-        if (Helper.nonNull(oldAudio) && Helper.nonNull(oldAudio.source)) {
+        if (Helper.isNotNull(oldAudio) && Helper.isNotNull(oldAudio.source)) {
             oldAudio.source.stop();
         }
     }
@@ -448,7 +471,7 @@ class SoundManager {
         return this.channels[channel];
     }
 
-    async resume(channel){
+    async resume(channel) {
         channel = Helper.nonNull(channel, SoundManager.CHANNELS.DEFAULT);
         if (!this.channels[channel].muted && Helper.isNotNull(this.channels[channel].source)) {
             return this.channels[channel].source.resume();

src/js/lib/pwa-lib.js

@@ -3500,7 +3500,6 @@ class MyDb {
         let self = this;
         return new Promise(function (resolve) {
             self.openStore(objectStore, function (store) {
-                console.log("loadMany 1");
                 let indexRequest = store.index(index);
                 indexRequest.onerror = function (e) {
                     throw {
@@ -3508,14 +3507,16 @@ class MyDb {
                         "event": e
                     }
                 };
-
+                let request = indexRequest.openCursor(value, direction);
+                request.onerror = function (e) {
+                    throw {
+                        "type": "indexed-db-index-error",
+                        "event": e
+                    }
+                };
                 let objects = [];
                 let numberResults = 0;
-                // console.log("indexrequest", indexRequest.openCursor());
+                request.onsuccess = function (e) {
-                let request = indexRequest.openCursor(value, direction);
-                console.log("request", request);
-                request["onsuccess"]= function (e) {
-                    console.log("loadMany 2");
                     let cursor = e.target.result;
                     if (cursor) {
                         objects.push(cursor.value);
@@ -3525,16 +3526,8 @@ class MyDb {
                             return;
                         }
                     }
-                    console.log("loadMany 3");
                     resolve(objects);
                 };
-
-                request["onerror"] = function (e) {
-                    throw {
-                        "type": "indexed-db-index-error",
-                        "event": e
-                    }
-                };
             });
         });
     }
@@ -4401,7 +4394,7 @@ function applyPolyfills() {
     });
 
 
-    window["fetch"] = Helper.nonNull(window["fetch"], function (url) {
+    window["fetch"] = Helper.nonNull(window["fetch"], function (url, params) {
         console.log("customFetch", url);
         let request = null;
         if (window.XMLHttpRequest) { // Mozilla, Safari, ...
@@ -4419,25 +4412,40 @@ function applyPolyfills() {
             }
         }
 
-        let resultPromise = new Promise(function (resolve) {
+        let onloadPromise = new Promise((r) => {
-            request.onload = function () {
+            // this.result
-                let data = this.responseText;
+            request.onload = r;
-                let response = {
-                    json: function () {
-                        return Promise.resolve(JSON.parse(data));
-                    },
-                    text: function () {
-                        return Promise.resolve(data);
-                    }
-                };
-                resolve(response);
-            };
             request.onerror = function (err) {
-                resolve(Promise.reject(err));
+                r(Promise.reject(err));
             };
         });
+
+        let resultPromise = new Promise(function (resolve) {
+
+            let response = {
+                "json": function () {
+                    request.send();
+
+                    return onloadPromise.then(() => {
+                        return JSON.parse(request.responseText)
+                    });
+                },
+                "text": function () {
+                    request.send();
+                    return onloadPromise.then(() => request.responseText);
+                },
+                "arrayBuffer": () => {
+                    request.responseType = "arraybuffer";
+                    request.send();
+                    return onloadPromise.then(() => request.response);
+                }
+            };
+            resolve(response);
+        });
+
+
         request.open('get', url, true);
-        request.send();
+        // request.send();
         return resultPromise;
     });
 }

src/module/Application/pwa/js/site/MenuSite.js

@@ -97,6 +97,7 @@ export class MenuSite extends WordRotatorBaseSite {
     }
 
     async startLevelSite() {
+        SoundManager.getInstance().context.resume();
         this.startSite(LevelSite, Promise.race([this.loadLevelPromise, new Promise(async resolve => {
             const db = WordRotatorDb.getInstance();
             let level = await db.loadNextLevel(LevelSite.RENDERER_TYPES);
@@ -144,7 +145,7 @@ export class MenuSite extends WordRotatorBaseSite {
         let soundManager = SoundManager.getInstance();
 
         let playMusicButton = this.findBy("#play-music");
-        playMusicButton.checked = settingsManager.getSetting("play-music", true);
+        playMusicButton.checked = (settingsManager.getSetting("play-music", "1") === "1");
         playMusicButton.addEventListener("change", () => {
             settingsManager.setSetting("play-music", (playMusicButton.checked)?"1":"0");
             soundManager.set({muted: !playMusicButton.checked}, SoundManager.CHANNELS.MUSIC);
@@ -155,7 +156,7 @@ export class MenuSite extends WordRotatorBaseSite {
         });
 
         let playSoundButton = this.findBy("#play-sound");
-        playSoundButton.checked = settingsManager.getSetting("play-sound", true);
+        playSoundButton.checked = (settingsManager.getSetting("play-sound", "1") === "1");
         playSoundButton.addEventListener("change", () => {
             settingsManager.setSetting("play-sound", (playSoundButton.checked)?"1":"0");
             soundManager.set({muted: !playSoundButton.checked}, SoundManager.CHANNELS.SOUND);

src/scss/wordRotator.scss

@@ -155,6 +155,7 @@ $coinTowerDimension: 28px;
             animation-duration: $animationDuration;
             animation-fill-mode: forwards;
             animation-direction: reverse;
+            -webkit-animation-direction: reverse;
             animation-timing-function: linear;
 
             @for $j from 1 through length($rotationDegrees) {
@@ -383,7 +384,10 @@ div.mainContainer{
   cursor: pointer;
 }
 
-#share-button svg{
+#share-button {
-  cursor: pointer;
+  overflow: hidden;
-  max-width: 1.5rem;
+  svg{
+    cursor: pointer;
+    max-width: 1.5rem;
+  }
 }