Estoy usando el reproductor de audio Plyr para mi aplicación Rails, junto con Simulus.js.

Agrego dinámicamente una fuente de audio cuando el usuario hace clic en diferentes botones de audio. Luego lanzo el reproductor de audio con el método .play() .

Sin embargo, no se puede escuchar el comienzo de la pista. Puedes probarlo en esta URL , tocando el primer reproductor de audio. Si vuelve a colocar el cursor de audio al principio, podrá escuchar el principio de la pista.

Aquí está mi HTML:

 <audio class="player" controls data-dicteeModule-target="player"> <source class="player-source" src="<%= dictee_modules.first.audio_url %>" type="audio/mp3" /> </audio>

Así es como inicializo el reproductor:

 initialize() { const players = document.getElementsByClassName('player'); var player = []; Array.from(players).forEach(function (ele, i) { player[i] = new Plyr(ele, { controls: ['progress'] }); }); }

Aquí está mi acción Stimulus onclick:

 var player = this.playerTarget; var source = audio.getAttribute("data-audio-source"); var audioSource = player.getElementsByClassName("player-source")[0]; audioSource.src = source; player.load(); player.addEventListener('canplay', (event) => { player.play(); });

¿Alguna idea de por qué no se escucha el principio de la pista?

Gracias.