_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Reflect volume change in audio control

Browse Source
This commit is contained in:
PizZaKatZe 2021-03-11 22:31:06 +01:00
parent 20d3236e73
commit 5a7e67f5df
1 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
front/src/WebRtc/AudioManager.ts
View File

@ -9,6 +9,7 @@ enum audioStates {
const audioPlayerDivId = "audioplayer"; const audioPlayerDivId = "audioplayer";
const audioPlayerCtrlId = "audioplayerctrl"; const audioPlayerCtrlId = "audioplayerctrl";
const audioPlayerVolId = "audioplayer_volume";
const animationTime = 500; const animationTime = 500;
class AudioManager { class AudioManager {
@ -17,6 +18,7 @@ class AudioManager {
private audioPlayerDiv: HTMLDivElement; private audioPlayerDiv: HTMLDivElement;
private audioPlayerCtrl: HTMLDivElement; private audioPlayerCtrl: HTMLDivElement;
private audioPlayerElem: HTMLAudioElement | undefined; private audioPlayerElem: HTMLAudioElement | undefined;
private audioPlayerVol: HTMLInputElement;
private volume = 1; private volume = 1;
private muted = false; private muted = false;
@ -26,16 +28,17 @@ class AudioManager {
constructor() { constructor() {
this.audioPlayerDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(audioPlayerDivId); this.audioPlayerDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(audioPlayerDivId);
this.audioPlayerCtrl = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(audioPlayerCtrlId); this.audioPlayerCtrl = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(audioPlayerCtrlId);
this.audioPlayerVol = HtmlUtils.getElementByIdOrFail<HTMLInputElement>(audioPlayerVolId);
const storedVolume = localStorage.getItem('volume') const storedVolume = localStorage.getItem('volume')
if (storedVolume === null) { if (storedVolume === null) {
this.setVolume(1); this.setVolume(1);
} else { } else {
this.volume = parseFloat(storedVolume); this.volume = parseFloat(storedVolume);
HtmlUtils.getElementByIdOrFail<HTMLInputElement>('audioplayer_volume').value = storedVolume; this.audioPlayerVol.value = storedVolume;
} }
HtmlUtils.getElementByIdOrFail<HTMLInputElement>('audioplayer_volume').value = '' + this.volume; this.audioPlayerVol.value = '' + this.volume;
} }
public playAudio(url: string|number|boolean, mapDirUrl: string, loop=false): void { public playAudio(url: string|number|boolean, mapDirUrl: string, loop=false): void {
@ -77,6 +80,7 @@ class AudioManager {
private changeVolume(talking = false): void { private changeVolume(talking = false): void {
if (!isUndefined(this.audioPlayerElem)) { if (!isUndefined(this.audioPlayerElem)) {
this.audioPlayerElem.volume = this.naturalVolume(talking && this.decreaseWhileTalking); this.audioPlayerElem.volume = this.naturalVolume(talking && this.decreaseWhileTalking);
this.audioPlayerVol.value = '' + this.audioPlayerElem.volume;
this.audioPlayerElem.muted = this.muted; this.audioPlayerElem.muted = this.muted;
} }
} }
@ -127,8 +131,7 @@ class AudioManager {
} }
} }
const volumeElem = HtmlUtils.getElementByIdOrFail<HTMLInputElement>('audioplayer_volume'); this.audioPlayerVol.oninput = (ev: Event)=> {
volumeElem.oninput = (ev: Event)=> {
this.setVolume(parseFloat((<HTMLInputElement>ev.currentTarget).value)); this.setVolume(parseFloat((<HTMLInputElement>ev.currentTarget).value));
this.changeVolume(); this.changeVolume();