Ainias/wordRotator
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Sound funktioniert jetzt auch auf Android (endlich)

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

14
src/js/init.js
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");

33
src/js/lib/pwa-assets.js
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();

70
src/js/lib/pwa-lib.js
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;
});
}

5
src/module/Application/pwa/js/site/MenuSite.js
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);

10
src/scss/wordRotator.scss
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;
}
}