Add NotificationSound component and associated Blade view for audio notifications

app/Livewire/NotificationSound.php

@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+use Livewire\Attributes\On;
+
+
+class NotificationSound extends Component
+{
+
+    protected $listeners = ['playNotificationSound' => 'playSound', 'playWarnSound' => 'playWarnSound', 'beepSound' => 'beepSound'];
+
+    public function playSound()
+    {
+        $this->dispatch('play-notification-sound');
+    }
+
+    public function playWarnSound()
+    {
+        //dd('test');
+        $this->dispatch('play-warn-sound');
+    }
+    public function beepSound()
+    {
+        //dd('test');
+        $this->dispatch('play-beep-sound');
+    }
+
+    public function render()
+    {
+        return view('livewire.notification-sound');
+    }
+}

resources/views/livewire/notification-sound.blade.php

@@ -0,0 +1,31 @@
+{{-- <div>
+    {{-- Do your work, then step back.
+</div> --}}
+
+<div>
+    @push('scripts')
+    <script>
+        window.addEventListener('play-notification-sound', () => {
+            const audio = new Audio('/sounds/click.mp3');
+            audio.play().catch(() => {
+                console.log("Sound blocked until user interacts with the page");
+            });
+        });
+
+        window.addEventListener('play-warn-sound', () => {
+            const audio = new Audio('/sounds/warning.mp3');
+            audio.play().catch(() => {
+                console.log("Sound blocked until user interacts with the page");
+            });
+        });
+
+        window.addEventListener('play-beep-sound', () => {
+            const audio = new Audio('/sounds/scanner-beep.mp3');
+            audio.play().catch(() => {
+                console.log("Sound blocked until user interacts with the page");
+            });
+        });
+    </script>
+    @endpush
+</div>
+