Воспроизведение аудиофайла до его полной загрузки на странице JS

В данный момент я работаю над возможностью озвучивать текст по клику кнопки. У меня есть кнопка, при нажатии на которую должен воспроизводиться текст. Аудиофайл я получаю через API после клика, в этом плане всё работает хорошо, я получаю url аудиофайла. Проблема появляется, когда я пытаюсь сделать так, чтобы это аудио срабатывало по клику. Мой код сейчас выглядит примерно так:

speech.addEventListener('click', () => {
  let speechText = "Привет!";
  const audio = new Audio();
  const audioURL = await getOpenaiVoice(voiceAPI, voiceID, speechText);
  audio.src = audioURL;
  audio.play();
}

Код ждёт, пока из getOpenaiVoice вернётся URL и присваивает его audio.src, однако дальше происходит моментальное срабатывание audio.play();, из-за чего сначала выходит ошибка: NotSupportedError: Failed to load because no supported source was found.

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

Я пытался переписывать код через промисы, оборачивать в async await разные элементы, но у меня слишком слабые познания в асинхронном программировании, чтобы я сразу увидел, в чём проблема. Сижу над этой проблемой весь день и вариантов не вижу.

function audioLoad(audio, url) {
        let prom = new Promise((resolve, reject) => {
           audio.src = url;
           audio.addEventListener('loadeddata', () => {
                resolve(audio);
           });
        });
            
        prom.then((value) => {
            value.play();
        })
}
  
async function audioCreation() {
        let speechText = "Привет!";
        const audio = new Audio();
        const audioURL = await getOpenaiVoice(voiceAPI, voiceID, speechText);
        audio.src = audioURL;
        audio.play();
}
        
audioCreation();

Код выше работает, однако только если кликнуть после полной загрузки файла, при первом клике всегда ошибка, ибо он начинает загрузку только после клика. Как бы общая идея такая: Пользователь кликает на кнопку озвучки, посылаются все запросы, в API и тд, код ждет, пока вернётся ответ, и после возвращения ответа либо сразу начинает воспроизводиться файл звука, либо он просто висит в ожидании полной загрузки, и после загрузки начинает воспроизведение. Заранее спасибо.


Ответы (0 шт):