Sound funktioniert jetzt auch auf Android (endlich)

This commit is contained in:
silas 2018-10-27 12:54:35 +02:00
parent 6db0c508e4
commit bb894c4bfd
7 changed files with 91 additions and 47 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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");

View File

@ -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();

View File

@ -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());
let request = indexRequest.openCursor(value, direction);
console.log("request", request);
request["onsuccess"]= function (e) {
console.log("loadMany 2");
request.onsuccess = function (e) {
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) {
request.onload = function () {
let data = this.responseText;
let response = {
json: function () {
return Promise.resolve(JSON.parse(data));
},
text: function () {
return Promise.resolve(data);
}
};
resolve(response);
};
let onloadPromise = new Promise((r) => {
// this.result
request.onload = r;
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;
});
}

View File

@ -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);

View File

@ -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{
cursor: pointer;
max-width: 1.5rem;
#share-button {
overflow: hidden;
svg{
cursor: pointer;
max-width: 1.5rem;
}
}