Pr/13

src/app/class/core/file-storage/audio-player.ts

@@ -4,6 +4,7 @@ import { FileReaderUtil } from './file-reader-util';
 export enum VolumeType {
   MASTER,
   AUDITION,
+  SOUND_EFFECT
 }
 
 declare global {
@@ -36,10 +37,17 @@ export class AudioPlayer {
     AudioPlayer.auditionGainNode.gain.setTargetAtTime(AudioPlayer._auditionVolume, AudioPlayer.audioContext.currentTime, 0.01);
   }
 
+  private static _sfxVolume: number = 0.5;
+  static get sfxVolume(): number { return AudioPlayer._sfxVolume }
+  static set sfxVolume(sfxVolume: number) {
+    AudioPlayer._sfxVolume = sfxVolume;
+    AudioPlayer.sfxGainNode.gain.setTargetAtTime(AudioPlayer._sfxVolume, AudioPlayer.audioContext.currentTime, 0.01);
+  }
+
   private static _masterGainNode: GainNode
   private static get masterGainNode(): GainNode {
     if (!AudioPlayer._masterGainNode) {
-      let masterGain = AudioPlayer.audioContext.createGain();
+      const masterGain = AudioPlayer.audioContext.createGain();
       masterGain.gain.setValueAtTime(AudioPlayer._volume, AudioPlayer.audioContext.currentTime);
       masterGain.connect(AudioPlayer.audioContext.destination);
       AudioPlayer._masterGainNode = masterGain;
@@ -50,16 +58,28 @@ export class AudioPlayer {
   private static _auditionGainNode: GainNode
   private static get auditionGainNode(): GainNode {
     if (!AudioPlayer._auditionGainNode) {
-      let auditionGain = AudioPlayer.audioContext.createGain();
+      const auditionGain = AudioPlayer.audioContext.createGain();
       auditionGain.gain.setValueAtTime(AudioPlayer._auditionVolume, AudioPlayer.audioContext.currentTime);
       auditionGain.connect(AudioPlayer.audioContext.destination);
       AudioPlayer._auditionGainNode = auditionGain;
     }
     return AudioPlayer._auditionGainNode;
   }
 
+  private static _sfxGainNode: GainNode
+  private static get sfxGainNode(): GainNode {
+    if(!AudioPlayer._sfxGainNode){
+      const sfxGain = AudioPlayer.audioContext.createGain();
+      sfxGain.gain.setValueAtTime(AudioPlayer._sfxVolume, AudioPlayer.audioContext.currentTime);
+      sfxGain.connect(AudioPlayer.audioContext.destination);
+      AudioPlayer._sfxGainNode = sfxGain;
+    }
+    return AudioPlayer._sfxGainNode;
+  }
+
   static get rootNode(): AudioNode { return AudioPlayer.masterGainNode; }
   static get auditionNode(): AudioNode { return AudioPlayer.auditionGainNode; }
+  static get sfxNode(): AudioNode{ return AudioPlayer.sfxGainNode;}
 
   private _audioElm: HTMLAudioElement;
   private get audioElm(): HTMLAudioElement {
@@ -135,6 +155,8 @@ export class AudioPlayer {
     switch (this.volumeType) {
       case VolumeType.AUDITION:
         return AudioPlayer.auditionNode;
+      case VolumeType.SOUND_EFFECT:
+        return AudioPlayer.sfxNode;
       default:
         return AudioPlayer.rootNode;
     }

src/app/class/sound-effect.ts

@@ -1,6 +1,6 @@
 import { ChatMessage, ChatMessageContext } from './chat-message';
 import { AudioFile } from './core/file-storage/audio-file';
-import { AudioPlayer } from './core/file-storage/audio-player';
+import { AudioPlayer, VolumeType } from './core/file-storage/audio-player';
 import { AudioStorage } from './core/file-storage/audio-storage';
 import { SyncObject } from './core/synchronize-object/decorator';
 import { GameObject } from './core/synchronize-object/game-object';
@@ -27,12 +27,14 @@ export class PresetSound {
 
 @SyncObject('sound-effect')
 export class SoundEffect extends GameObject {
+  readonly sfxPlayer: AudioPlayer = new AudioPlayer();
   // GameObject Lifecycle
   onStoreAdded() {
     super.onStoreAdded();
+    this.sfxPlayer.volumeType = VolumeType.SOUND_EFFECT;
     EventSystem.register(this)
       .on<string>('SOUND_EFFECT', event => {
-        AudioPlayer.play(AudioStorage.instance.get(event.data), 0.5);
+        this.sfxPlayer.play(AudioStorage.instance.get(event.data));
       })
       .on('SEND_MESSAGE', event => {
         let chatMessage = ObjectStore.instance.get<ChatMessage>(event.data.messageIdentifier);
@@ -72,4 +74,4 @@ export class SoundEffect extends GameObject {
   private static _play(identifier: string) {
     EventSystem.call('SOUND_EFFECT', identifier);
   }
-}
+}

src/app/component/jukebox/jukebox.component.css

@@ -20,4 +20,18 @@
 
 .box {
   border-bottom:1px dotted #888;
-}
+}
+
+.volume-wrapper {
+  display: flex;
+  justify-content: space-between;
+  height: 24px;
+}
+
+.volume-label {
+  min-width: 128px;
+}
+
+.volume-controller {
+  width: 100%;
+}

src/app/component/jukebox/jukebox.component.html

@@ -1,5 +1,8 @@
-<div>試聽音量：<input [(ngModel)]="auditionVolume" type="range" min="0" max="1" step="0.01" /></div>
-<div>BGM音量：<input [(ngModel)]="volume" type="range" min="0" max="1" step="0.01" /></div>
+
+<div class="volume-wrapper"><div class="volume-label">試聽音量：</div><input class="volume-controller" [(ngModel)]="auditionVolume" type="range" min="0" max="1" step="0.01" /></div>
+<div class="volume-wrapper"><div class="volume-label">BGM音量：</div><input class="volume-controller" [(ngModel)]="volume" type="range" min="0" max="1" step="0.01" /></div>
+<div class="volume-wrapper"><div class="volume-label">效果音音量：</div><input class="volume-controller" [(ngModel)]="sfxVolume" type="range" min="0" max="1" step="0.01" /></div>
+
 <hr/>
 <div>
   <div *ngFor="let audio of audios" class="box">
@@ -26,6 +29,8 @@
       <br>一個檔案最大10MB</div>
   </div>
 </label>
+
 <div style="font-size: 12px;">※「試聽」只會播放給自己一次。</div>
 <div style="font-size: 12px;">※「BGM」會把音樂播放給所有房間成員。</div>
-<div style="font-size: 12px;">※現行版本不會保存音樂到ZIP裡。（毎次都要重新上傳）</div>
+<div style="font-size: 12px;">※現行版本不會保存音樂到ZIP裡。（毎次都要重新上傳）</div>
+

src/app/component/jukebox/jukebox.component.ts

@@ -24,6 +24,9 @@ export class JukeboxComponent implements OnInit, OnDestroy {
   get auditionVolume(): number { return AudioPlayer.auditionVolume; }
   set auditionVolume(auditionVolume: number) { AudioPlayer.auditionVolume = auditionVolume; }
 
+  get sfxVolume(): number { return AudioPlayer.sfxVolume; }
+  set sfxVolume(sfxVolume: number) { AudioPlayer.sfxVolume = sfxVolume; }
+
   get audios(): AudioFile[] { return AudioStorage.instance.audios.filter(audio => !audio.isHidden); }
   get jukebox(): Jukebox { return ObjectStore.instance.get<Jukebox>('Jukebox'); }