Action with AlpineJS

<x-filament-widgets::widget>
    <div wire:poll="stats" x-data="{
        isPlaying: false,
        playRadio: function() {
            const mediaPlayer = this.$refs.radioPlayer; // Use Alpine.js $refs
            if (mediaPlayer) {
                mediaPlayer.play()
                    .catch(error => {
                        // Handle the error (e.g., display a message to the user)
                        console.error('Error playing audio:', error);
                    });
            }
        }
    }">

        <!-- Go to the radio page, using inspect element find the audio file -->
        <audio id="radioPlayer" x-ref="radioPlayer">
            <source src="https://live.akous.gr/akousbreeze" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>

        <x-filament::section>
            <div wire:poll="stats">
                Song: {{ $this->stats()['songTitle'] }}
            </div>

            <!-- Trigger the action when the section is clicked -->
            <div x-on:click="playRadio()">
                {{ $this->testAction }}
                <x-filament-actions::modals />
                <!-- Remove $this->testAction expression -->
            </div>
            
        </x-filament::section>
    </div>
</x-filament-widgets::widget>