Воспроизведение аудиофайла до его полной загрузки на странице 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 и тд, код ждет, пока вернётся ответ, и после возвращения ответа либо сразу начинает воспроизводиться файл звука, либо он просто висит в ожидании полной загрузки, и после загрузки начинает воспроизведение. Заранее спасибо.