Is it possible to cath onended event ?

[hconsoni1]

Hi,

It is possible to know when the audio ended ? I need to enable the button when the audio is finished...

<div>
    <div x-data="{ btDisabled: true }" x-init="$watch($wire.on('play', fn => { setTimeout(fn => { $refs.player.play() }, 100) }))" class="componente-slide bg-white p-1 rounded">
        <div id="slide-componente-activity-{{ $activity->id }}" class="slider-container">   
            <p class="componente-saida-texto text-bold-600 unselect">{{ $currentPhrase['phrase'] }}</p>
            <audio x-ref="player" class="audio w-100" id="audioPlayer" controls="true" controlslist="nodownload" src="{{ $currentPhrase['file'] }}"></audio>
            <input type="hidden" class="form-control" value=".">
        </div>
        <p id="slide-position-activity-{{ $activity->id }}" class="legenda mt-1">{{ $pos + 1 }} de {{ count($this->metadata) }}</p>
        <div x-data="{ btDisabled: true }" class="slide-componente-actions text-center">
            <button wire:click="prev" class="btn btn-danger btn-min-width mr-1 prev" {{ $pos == 0 ? 'disabled' : '' }}>Frase anterior</buttona>
            @if ($finished)
            <button wire:click="next" class="btn btn-success btn-min-width next" :disabled="btDisabled">Finalizado</button>
            @elseif ($this->pos == $this->lastIndex)
            <button wire:click="next" wire:keydown.enter="next" class="btn btn-success btn-min-width next" :disabled="btDisabled">Finalizar</button>
            @else
            <button wire:click="next" class="btn btn-danger btn-min-width next" :disabled="btDisabled">Próxima frase</button>
            @endif
        </div>
    </div>
</div>

[Ryuno-Ki]

Have you looked into the ended event of the audio already?

[hconsoni1]

Thanks for answering!

Sorry, i'm new on AlpineJs... How can I use the ended event to change the btDisabled variable in my code ?

[Ryuno-Ki]

Ah, no worries.

So, x-on is used for event binding. You'd update the { btDisabled: false } (or btDisabled = false, cannot tell OTOH) and let Alpine update the respective parts.

I haven't copied the code over to play around myself (CodePen.io or similar is great for this!).
But the above should give you an outline.

Please share the solution, that worked for you in the end :)