2

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.

nico_lrx
  • 715
  • 1
  • 19
  • 36

1 Answers1

0

This happens to me too on various websites that need to use audio after no audio was used for a while, even on YouTube. I'm using Chrome 104.0.5112.81 on Windows 10.

It's likely a driver issue you can't do much about (assuming YouTube would fix it if they could). It looks like Windows or Chrome ends up dimming the sound way too quickly, and takes too long turning it back on.

Unfortunately I couldn't find anything on Google yet. It seems hard to make Google understand this query, it only returned results about audio preventing PC sleep mode (or other unrelated common issues), no matter how I phrased it. Could also indicate it's just a very obscure issue with one or a few particular drivers.

inwerpsel
  • 2,677
  • 1
  • 14
  • 21