Воспроизведение HTML <audio>быстрее на мобильном

Question

В моем веб-приложении есть словарь. Аудио каждого слова может быть воспроизведено через службу преобразования текста в речь, которую я помещаю в DOM следующим образом:

<audio id="word-id" src="https://url_to_audio_on_another_server/word"></audio>

Не то, чтобы я хотел автоматическое воспроизведение, но я знаю, что на самом деле Взаимодействие с пользователем (например, нажатие кнопок) требуется для запуска аудио / видео на мобильных устройствах. Я сделал это:

$(".wcc_play_container").click(function() { 
  $(".word-audio").get(0).play();
});

Это работает на настольном компьютере и мобильном устройстве, но на мобильном устройстве оно работает только один раз (это означает, что оно не будет воспроизводиться снова, даже если кнопка будет нажата снова).

Чтобы это исправить, я узнал, что мне нужно снова загрузить .load () для того, чтобы мобильные браузеры снова начали играть. (К счастью, .load () просто «перезагружает» звуковой файл, но на самом деле нет необходимости повторно запрашивать его с сервера, как может подтвердить инспектор настольной сети.) Вместо того, чтобы помещать загрузку после воспроизведения (что приведет к ошибке, потому что asyn c .play () будет прерван), я просто .load () каждый раз перед игрой:

$(".wcc_play_container").click(function() {
  $(".word-audio").get(0).load();  
  $(".word-audio")[0].play(); 
});

Теперь я могу играть несколько раз как на настольном компьютере, так и на мобильном, но это слишком медленно мобильный. На рабочем столе он воспроизводится мгновенно при нажатии. На мобильном устройстве каждый раз после нажатия на кнопку требуется ~ 2-3 секунды после воспроизведения.

Несмотря на то, что сетевой инспектор не показывает ничего повторного извлечения с удаленного сервера (я не могу подтвердить на мобильном устройстве), время задержка делает меня подозрительным ... Но тогда, даже если это было повторное извлечение, это очень маленькие ~ 2 КБ звуковые файлы, поступающие через LTE или WIFI.

В другом посте говорилось, что я мог бы просто установить currentTime = 0, но это снова не работало без .load (), что делало currentTime = 0 бессмысленным.

Вы можете почувствовать разницу в моем веб-приложении здесь. Пылающий быстро на рабочем столе. Очень медленный на мобильном телефоне (нажмите кнопку аудио): https://www.hackchinese.com/words/127856