I am using Plyr audio player for my Rails app, along with Simulus.js.

I dynamically add audio source when the user clicks on different audio buttons. Then I launch the audio player with the .play() method.

However, the beginning of the track can't be heard. You can try it out on this URL, by taping the first audio player. If you put back the audio cursor to the beginning, then you can hear the very beginning of the track.

Here is my HTML:

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

Here is how I initialize the player:

initialize() {
    const players = document.getElementsByClassName('player');

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

Here is my Stimulus onclick action:

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();
    });

Any idea why the very beginning of the track is not heard?

Thanks.