Фон

У меня есть кнопка, которая воспроизводит звук, подключенный к ближайшему элементу audio, при обнаружении события click. Элемент button имеет вложенный элемент img, src которого я изменяю, чтобы он указывал на различные файлы .svg в зависимости от того, есть ли аудио.

1. играю (значок паузы)
2. приостановлено (значок воспроизведения)
3. собираюсь играть, но еще не начал играть (вращающийся значок буферизации)

Проблема

Переключение на значок паузы или воспроизведения происходит без проблем, но переключение на значок буферизации происходит так поздно, что это бесполезно (т. е. пользователь нажимает кнопку воспроизведения, пользователь ждет сколько угодно долго, а значок буферизации мигает в течение нескольких мс непосредственно перед началом воспроизведения звука).

На настольном компьютере все происходит очень быстро, и значок буферизации даже не понадобится, но на мобильных устройствах (iOS) может быть задержка от одной до четырех секунд с момента, когда пользователь нажимает кнопку воспроизведения и звук фактически начинает воспроизводиться (что вот почему мне нужен значок буферизации для этого времени ожидания).

Код

HTML-структура

Таких li элементов целая куча. Основное внимание здесь уделяется элементу button.playOrPauseBtn:

<li>
    <audio
        id = "TR-21"
        class = "dialogueAudio"
        src = "/static/audio/en/es/end/tr-21.mp3"
        preload = "auto"
    >
    </audio>
    <div>
        <button type = "button" class = "svgBtn playOrPauseBtn" >
            <img class = "playIcon" src = "/static/svg/play.svg" height = "22px" width = "22px" />
        </button>
    </div>
</li>

javascript

В центре внимания здесь будет прослушиватель событий внизу, который, как я ожидаю, немедленно изменит пользовательский интерфейс кнопки воспроизведения/паузы на значок моего буфера сразу при нажатии кнопки, но на мобильном устройстве (iOS; не тестировал Android) , он на самом деле ждет, а затем только мигает значок буфера прямо перед началом воспроизведения звука (ожидание от 1 до 4 секунд, в зависимости от звука).

Если кажется странным, что все разделено на множество мини-функций, то это потому, что это чрезвычайно упрощенные версии реальных функций (я пытаюсь сосредоточиться только на рассматриваемой проблеме). Они делают с пользовательским интерфейсом гораздо больше, например меняют заголовок и замещающий текст для различных элементов. Дайте мне знать, если вы считаете, что было бы полезно увидеть код JS и разметку HTML в их исходной, неупрощенной форме.

/* ----------------------------------------------
------------------- FUNCTIONS -------------------
---------------------------------------------- */

const changeAudioControlBtn = function(btn, svg, disabled=false, spinny=false) {
  // get other elements
  let btnImg = btn.querySelector("img");
  // change UI of btn
  btn.disabled = disabled;
  // change UI of img
  btnImg.src = svg;
  if (spinny === false) {
    btnImg.classList.remove("spinny");
  } else {
    btnImg.classList.add("spinny");
  }
}

/* Function to pause all audios */
const pauseAll = async function() {
  let allYeAudios = document.querySelectorAll("audio");
  allYeAudios.forEach((item, i) => {
    item.pause();
  });
};

/* Function for playing or pausing audio associated with play/pause button */
const playOrPause = async function(soundByte) {
  if (soundByte.paused == true) {
    // pause other audios before playing
    await pauseAll();
    soundByte.play();
  } else {
    soundByte.pause();
  }
};

/* Function to change play/pause button icon to play or pause symbol */
const changePlayOrPauseGraphics = function() {
  let playPauseBtn = this.parentElement.querySelector(".playOrPauseBtn");
  if (this.paused === true) {
    // set properties for function to change UI of play/pause btn
    let btn = playPauseBtn;
    let svg = "/static/svg/play.svg";
    changeAudioControlBtn(btn, svg);
  } else {
    // set properties for function to change UI of play/pause btn
    let btn = playPauseBtn;
    let svg = "/static/svg/pause.svg";
    changeAudioControlBtn(btn, svg);
  }
};

/* ----------------------------------------------
---------------- EVENT LISTENERS ----------------
---------------------------------------------- */

const allDialogueAudios = document.querySelectorAll(".dialogueAudio");

// Change visuals if playing
allDialogueAudios.forEach((item, i) => {
  item.addEventListener("playing", changePlayOrPauseGraphics);
});

// change visuals when audio pauses too
allDialogueAudios.forEach((item, i) => {
  item.addEventListener("pause", changePlayOrPauseGraphics);
});

const allPlayButtons = document.querySelectorAll(".playOrPauseBtn");

// Play buttons
allPlayButtons.forEach((item, i) => {
  item.addEventListener("click", () => {
    // set properties for UI function (to change btn to spinny buffer icon)
    let btn = item;
    let svg = "/static/svg/loady_spinner.svg";
    let disabled = true;
    let spinny = true;
    changeAudioControlBtn(btn, title, svg, alt, disabled, spinny);
    let soundByte = item.parentElement.parentElement.querySelector(".dialogueAudio");
    playOrPause(soundByte);
  });
});

Что я пробовал

Раньше у меня был код, который вызывает функцию changeAudioControlBtn(), чтобы изменить пользовательский интерфейс playOrPauseBtn на значок буфера внутри функции playOrPause(), а обработчик прослушивателя событий для кнопок воспроизведения/паузы был намного проще (он просто вызывал функцию playOrPause() , но я думал, что перемещение кода изменения значка буфера в обработчик прослушивателя событий будет более быстрым. Но это не дало никакого эффекта.

Другие детали

Похоже, что проблема не связана с Safari, поскольку она не возникает на настольном компьютере Safari, и та же проблема возникает на моем устройстве iOS в браузерах Chrome, Safari и Firefox.