Как сделать плеер в javascript

В статье рассказывается о том, как создать плеер на языке Javascript с примером кода. Узнайте, как использовать API аудио, используя HTML и CSS, и как захватить и отобразить аудиоданные в браузере.

Что нужно для создания плеера в JavaScript

Для создания плеера в JavaScript будет необходимо использовать HTML, CSS и JavaScript. Для отображения аудио-файлов будет использоваться HTML5 тег <audio>, а для реализации возможности проигрывания, паузы, изменения громкости и перемотки будет использоваться JavaScript. Также для отображения элементов управления плеером будет использоваться CSS.

Структура HTML

Для начала нужно будет подготовить структуру HTML для плеера. Для этого нужно будет использовать блок <div>, а также в нем определить элемент <audio>, который будет отвечать за проигрывание аудио-файла. Кроме того, в этом блоке должны быть добавлены кнопки для управления плеером и бар прогресса.

<div class="player">
  <audio></audio>
  <div class="controls">
    <button class="play"></button>
    <button class="pause"></button>
    <input type="range" class="volume" min="0" max="1" step="0.1">
    <input type="range" class="seek" min="0" max="100" step="1">
  </div>
  <div class="progress"></div>
</div>

Обработка аудио-файла с помощью JavaScript

Далее нужно будет обработать аудио-файл с помощью JavaScript. Для этого понадобится получить элемент <audio> из DOM дерева, для этого можно использовать селектор:

const audio = document.querySelector('audio');

Далее нужно будет получить доступ к контролям плеера, таким как кнопки для проигрывания, паузы, изменения громкости и перемотки, а также к бару прогресса:

const playButton = document.querySelector('.play');
const pauseButton = document.querySelector('.pause');
const volumeControl = document.querySelector('.volume');
const seekControl = document.querySelector('.seek');
const progressBar = document.querySelector('.progress');

Теперь нужно будет добавить обработчики событий для кнопок управления плеером и бара прогресса. Для кнопок для проигрывания, паузы и изменения громкости это можно сделать следующим образом:

playButton.addEventListener('click', () => {
  audio.play();
});

pauseButton.addEventListener('click', () => {
  audio.pause();
});

volumeControl.addEventListener('change', () => {
  audio.volume = volumeControl.value;
});

Для бара прогресса нужно будет добавить обработчик события timeupdate, который будет отслеживать текущее время и обновлять бар прогресса:

audio.addEventListener('timeupdate', () => {
  const position = audio.currentTime / audio.duration;
  progressBar.style.width = position * 100 + '%';
});

Для реализации возможности перемотки на определенную позицию в аудио-файле необходимо будет добавить обработчик события change к элементу <input> с классом .seek:

seekControl.addEventListener('change', () => {
  audio.currentTime = seekControl.value;
});

Теперь после выполнения всех этих шагов мы получим готовый плеер в JavaScript, который будет работать для любого аудио-файла.