بناء مشغل صوت مع Livewire v4

@persist('audio-player')
<div x-data="{ playing: false, progress: 0 }">
    <audio 
        x-ref="audio"
        @timeupdate="progress = ($refs.audio.currentTime / $refs.audio.duration) * 100">
        <source src="{{ $audioUrl }}" type="audio/mp3">
    </audio>
    
    <div class="progress" style="width: {{ progress }}%"></div>
    
    <button @click="$refs.audio.paused ? $refs.audio.play() : $refs.audio.pause()">
        تشغيل/إيقاف
    </button>
</div>
@endpersist