Как успешно обновить исходный HTML-плеер в функции .then в Chrome

Question

Я настраиваю веб-сайт без сервера, и одна из внутренних функций Lambda заключается в создании URL-адреса S3, который веб-интерфейс использует для обновления источника аудиоплеера, встроенного в HTML.

Поскольку интерфейс должен дождаться завершения функции Lambda и вернуть работающий URL, источник аудиоплеера обновляется в функции .then:

  var accessKey = getURLVars()["AccessKey"];
  var audioPlayer = document.getElementById('audioURL');

  // Handle when the user enters a key into the form
  function handleKey() {
    var url = "";

    fetch(apiBaseURL+"/getFileURL", {
      method: "POST",
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        key: accessKey,
      })
    })
    .then(function(response) {
      return response.json();
    })
    .then(function(json) {
      if (json.url === "not_found") {
        // The file was not found
        console.log("File not found");
        .....
      } else {
        // The file was found, update the elements to the new URL
        url = json.url;
        console.log(url);

        audioPlayer.src = url;

        .....
      }
    });
  }

Аудио плеер:

  <audio controls>
    <source id='audioURL' type="audio/mp3" src=""></source>
    Your browser does not support this audio player.
  </audio>

Лямбда-функция возвращает действительный URL, а проверка аудиоэлемента в Chrome показывает, что его источник обновлен, однако аудиоплеер не будет воспроизводиться. Кроме того, аудиоплеер обновляет свой источник и воспроизводится в Microsoft Edge, но не в Chrome.

Есть ли что-то еще, что мне нужно сделать, чтобы плеер работал в Chrome, или мне нужно использовать другой аудиоплеер?

Answer 1

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

Всякий раз, когда аудио или видео тег / объект изменяется src, должен вызываться метод .load () .

...
} else {
  // The file was found, update the elements to the new URL
  url = json.url;
  console.log(url);
  audioPlayer.src = url;
  audioPlayer.load(); // Whenever an audio or video tag/object changes src the .load() method should be invoked.

  .....
}...

Answer 2

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