Привет, коллеги-разработчики! Сегодня мы погружаемся в мир воспроизведения аудио и изучаем различные методы определения окончания воспроизведения аудиофайла в вашем веб-приложении. Так что хватайте наушники, включайте музыку и начнем!

1. Использование события «End»:
   Один из самых простых способов узнать, когда аудиофайл закончился, — использовать событие «End». Вы можете прикрепить прослушиватель событий к элементу audio и запускать функцию при возникновении события. Вот фрагмент кода, иллюстрирующий это:

const audioElement = document.getElementById('myAudio');
audioElement.addEventListener('ended', () => {
  // Perform actions once the audio is finished playing
  console.log('Audio playback finished!');
});

2. Проверка свойства «currentTime».
   Другой подход заключается в периодической проверке свойства «currentTime» аудиоэлемента. Когда значение «currentTime» достигает продолжительности аудиофайла, это означает, что воспроизведение звука завершено. Вот пример:

const audioElement = document.getElementById('myAudio');
const checkAudioEnd = setInterval(() => {
  if (audioElement.currentTime === audioElement.duration) {
    // Perform actions once the audio is finished playing
    console.log('Audio playback finished!');
    clearInterval(checkAudioEnd);
  }
}, 1000); // Check every second

3. Использование атрибута «onended».
   Помимо использования прослушивателей событий, вы также можете напрямую назначить функцию атрибуту «onended» элемента audio. Эта функция будет выполнена, когда воспроизведение звука закончится. Вот пример:

<audio id="myAudio" onended="handleAudioEnd()"></audio>
<script>
function handleAudioEnd() {
  // Perform actions once the audio is finished playing
  console.log('Audio playback finished!');
}
</script>

4. Обещания и метод «play».
   Благодаря возможностям Promises вы можете оптимизировать свой код для обработки аудиодополнения. Метод «play» возвращает обещание, которое выполняется после завершения воспроизведения звука. Вот пример:

const audioElement = document.getElementById('myAudio');
audioElement.play()
  .then(() => {
    // Perform actions once the audio is finished playing
    console.log('Audio playback finished!');
  })
  .catch(error => {
    console.error('Error playing audio:', error);
  });

Вот и все! Мы рассмотрели несколько методов определения завершения воспроизведения аудиофайла в вашем веб-приложении. Не стесняйтесь выбирать подход, который лучше всего соответствует вашим потребностям, и вперед!