commit

src/app/app.component.html

@@ -1,2 +1,4 @@
 <router-outlet></router-outlet>
-<audio #audioPlayer src="assets/sound/alarm2.mp3" loop muted style="display: none"></audio>
+<button #clickButton (click)="alarmSoundService$.playSound()">Click me to play sound</button>
+
+

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 import {SocketService} from "./shared/services/socket.service";
 import {AlarmSoundService} from "./shared/services/alarm-sound.service";
 
@@ -7,14 +7,23 @@ import {AlarmSoundService} from "./shared/services/alarm-sound.service";
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent implements OnInit{
+export class AppComponent implements OnInit, AfterViewInit {
   title = 'Iot-web-ui';
-  @ViewChild('audioPlayer', { static: true }) audioPlayer!: ElementRef<HTMLAudioElement>;
+  @ViewChild('clickButton') clickButton!: ElementRef<HTMLButtonElement>;
+
   constructor(private socketService$: SocketService,
-              private alarmSoundService$: AlarmSoundService) {
+              public alarmSoundService$: AlarmSoundService,) {
   }
+
   ngOnInit() {
     this.socketService$.connect();
-    this.alarmSoundService$.setSound(this.audioPlayer);
+  }
+  ngAfterViewInit(): void {
+    console.log('click');
+    this.simulateButtonClick();
+  }
+
+  simulateButtonClick() {
+    this.alarmSoundService$.simulateClick(this.clickButton.nativeElement);
   }
 }

src/app/modules/overview/map/map.component.ts

@@ -251,7 +251,7 @@ export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
       this.state2 = message.state2 === '0'; // 1 OFF // alarm 1h
       this.state5 = message.state5 === '1'; // 1 ON, 0 OFF
       this.isReady = message.ready === '1';
-      this.alarmSoundService$.startAlarm(this.state5, this.isReady, this.state1, this.state2);
+      // this.alarmSoundService$.startAlarm(true, true, true, this.state2);
       this.updateIcons();
     }
   }

src/app/shared/services/alarm-sound.service.ts

@@ -4,26 +4,24 @@ import {ElementRef, Injectable} from '@angular/core';
   providedIn: 'root'
 })
 export class AlarmSoundService {
-  private audioPlayer!: HTMLAudioElement;
   private alertInterval: any;
   private alertDuration: number = 30000;
-
-  constructor() { }
-
-  setSound(audioPlayer: ElementRef<HTMLAudioElement>): void {
-    this.audioPlayer = audioPlayer.nativeElement;
+  private audio= new Audio();
+  constructor() {
+    this.audio.src = 'assets/sound/alarm2.mp3';
+    this.audio.load();
   }
 
   playSound(): void {
-    if (this.audioPlayer) {
-      this.audioPlayer.play().catch(error => console.error('Error playing sound:', error));
-    }
+    this.audio.play().catch(error => {
+      console.error('Error playing audio:', error);
+    });
   }
 
   stopSound(): void {
-    if (this.audioPlayer) {
-      this.audioPlayer.pause();
-      this.audioPlayer.currentTime = 0;
+    if (this.audio) {
+      this.audio.pause();
+      this.audio.currentTime = 0;
     }
   }
 
@@ -40,4 +38,9 @@ export class AlarmSoundService {
     this.stopSound()
     clearInterval(this.alertInterval);
   }
+
+  simulateClick(element: HTMLElement) {
+    element.click();
+  }
+
 }