HTML - Audio Player

Добро пожаловать, стремящиеся веб-разработчики! Сегодня мы погружаемся в увлекательный мир HTML аудиоплееров. К концу этого урока вы сможете создать свой собственный кастомный аудиоплеер и даже добавить несколько классных визуальных эффектов. Так что надевайте шляпы программистов и начнем это музыкальное путешествие!

HTML - Audio Player

HTML Local Audio Player с Визуализатором

Основы HTML Audio

Before мы перейдем к созданию модного аудиоплеера, начнем с основ. HTML5 ввел элемент <audio>, который делает добавление аудио на ваши веб-страницы super легким. Вот простой пример:

<audio controls>
<source src="your-audio-file.mp3" type="audio/mpeg">
Ваш браузер не поддерживает элемент audio.
</audio>

В этом коде:

Тег <audio> создает аудиоплеер.
Атрибут controls добавляет элементы управления play, pause и volume.
Тег <source> указывает аудиофайл для воспроизведения.
Мы включаем запасное сообщение для браузеров, которые не поддерживают элемент <audio>.

Создание кастомного аудиоплеера

Теперь создадим более кастомный аудиоплеер. Мы будем использовать HTML, CSS и JavaScript для его создания:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Audio Player</title>
<style>
#custom-player {
width: 300px;
padding: 20px;
background-color: #f0f0f0;
border-radius: 10px;
}
#play-pause-btn {
width: 100px;
height: 30px;
}
#seek-bar {
width: 100%;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="custom-player">
<audio id="audio-element" src="your-audio-file.mp3"></audio>
<button id="play-pause-btn">Play</button>
<input type="range" id="seek-bar" value="0">
</div>

<script>
const audio = document.getElementById('audio-element');
const playPauseBtn = document.getElementById('play-pause-btn');
const seekBar = document.getElementById('seek-bar');

playPauseBtn.addEventListener('click', () => {
if (audio.paused) {
audio.play();
playPauseBtn.textContent = 'Pause';
} else {
audio.pause();
playPauseBtn.textContent = 'Play';
}
});

audio.addEventListener('timeupdate', () => {
const progress = (audio.currentTime / audio.duration) * 100;
seekBar.value = progress;
});

seekBar.addEventListener('input', () => {
const time = (seekBar.value / 100) * audio.duration;
audio.currentTime = time;
});
</script>
</body>
</html>

Рассмотрим это:

Мы создаем контейнер <div> для нашего кастомного плеера.
Внутри него我们有 <audio> элемент (без элементов управления), кнопку play/pause и ползунок seek.
В JavaScript:

Мы переключаем play/pause при нажатии на кнопку.
Мы обновляем ползунок seek по мере воспроизведения аудио.
Мы позволяет перемещаться по аудио, нажимая на ползунок.

Добавление визуализатора

Теперь добавим простой визуализатор, чтобы сделать наш плеер более увлекательным. Мы будем использовать Web Audio API для этого:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio Player with Visualizer</title>
<style>
#custom-player {
width: 300px;
padding: 20px;
background-color: #f0f0f0;
border-radius: 10px;
}
#play-pause-btn {
width: 100px;
height: 30px;
}
#seek-bar {
width: 100%;
margin-top: 10px;
}
#visualizer {
width: 300px;
height: 150px;
background-color: #000;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="custom-player">
<audio id="audio-element" src="your-audio-file.mp3"></audio>
<button id="play-pause-btn">Play</button>
<input type="range" id="seek-bar" value="0">
<canvas id="visualizer"></canvas>
</div>

<script>
const audio = document.getElementById('audio-element');
const playPauseBtn = document.getElementById('play-pause-btn');
const seekBar = document.getElementById('seek-bar');
const canvas = document.getElementById('visualizer');
const ctx = canvas.getContext('2d');

// Настройка аудио контекста
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioContext.createAnalyser();
const source = audioContext.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(audioContext.destination);

// Функциональность play/pause
playPauseBtn.addEventListener('click', () => {
if (audioContext.state === 'suspended') {
audioContext.resume();
}
if (audio.paused) {
audio.play();
playPauseBtn.textContent = 'Pause';
} else {
audio.pause();
playPauseBtn.textContent = 'Play';
}
});

// Функциональность ползунка seek
audio.addEventListener('timeupdate', () => {
const progress = (audio.currentTime / audio.duration) * 100;
seekBar.value = progress;
});

seekBar.addEventListener('input', () => {
const time = (seekBar.value / 100) * audio.duration;
audio.currentTime = time;
});

// Визуализатор
function drawVisualizer() {
requestAnimationFrame(drawVisualizer);

const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteFrequencyData(dataArray);

ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.fillRect(0, 0, canvas.width, canvas.height);

const barWidth = (canvas.width / bufferLength) * 2.5;
let x = 0;

for (let i = 0; i < bufferLength; i++) {
const barHeight = dataArray[i] / 2;

ctx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);

x += barWidth + 1;
}
}

drawVisualizer();
</script>
</body>
</html>

В этой улучшенной версии:

Мы добавляем элемент <canvas> для нашего визуализатора.
Мы настраиваем аудио контекст и анализатор с помощью Web Audio API.
Функция drawVisualizer создает визуализацию частотного спектра аудио.

Local Audio Player с Плейлистом

Теперь создадим плеер, который может обрабатывать несколько треков:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio Player with Playlist</title>
<style>
#playlist-player {
width: 300px;
padding: 20px;
background-color: #f0f0f0;
border-radius: 10px;
}
#play-pause-btn, #prev-btn, #next-btn {
width: 80px;
height: 30px;
margin: 5px;
}
#seek-bar {
width: 100%;
margin-top: 10px;
}
#playlist {
list-style-type: none;
padding: 0;
}
#playlist li {
cursor: pointer;
padding: 5px;
}
#playlist li:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<div id="playlist-player">
<audio id="audio-element"></audio>
<button id="prev-btn">Previous</button>
<button id="play-pause-btn">Play</button>
<button id="next-btn">Next</button>
<input type="range" id="seek-bar" value="0">
<ul id="playlist">
<li data-src="song1.mp3">Song 1</li>
<li data-src="song2.mp3">Song 2</li>
<li data-src="song3.mp3">Song 3</li>
</ul>
</div>

<script>
const audio = document.getElementById('audio-element');
const playPauseBtn = document.getElementById('play-pause-btn');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const seekBar = document.getElementById('seek-bar');
const playlist = document.getElementById('playlist');
let currentTrack = 0;

function loadTrack(index) {
const tracks = playlist.getElementsByTagName('li');
if (index >= 0 && index < tracks.length) {
currentTrack = index;
audio.src = tracks[currentTrack].getAttribute('data-src');
audio.load();
playPauseBtn.textContent = 'Play';
}
}

function playPause() {
if (audio.paused) {
audio.play();
playPauseBtn.textContent = 'Pause';
} else {
audio.pause();
playPauseBtn.textContent = 'Play';
}
}

playPauseBtn.addEventListener('click', playPause);

prevBtn.addEventListener('click', () => {
loadTrack(currentTrack - 1);
});

nextBtn.addEventListener('click', () => {
loadTrack(currentTrack + 1);
});

audio.addEventListener('timeupdate', () => {
const progress = (audio.currentTime / audio.duration) * 100;
seekBar.value = progress;
});

seekBar.addEventListener('input', () => {
const time = (seekBar.value / 100) * audio.duration;
audio.currentTime = time;
});

playlist.addEventListener('click', (e) => {
if (e.target.tagName === 'LI') {
const tracks = playlist.getElementsByTagName('li');
loadTrack([...tracks].indexOf(e.target));
playPause();
}
});

loadTrack(0);
</script>
</body>
</html>

В этой версии с плейлистом:

Мы создаем список треков с помощьюunordered list.
Мы добавляем кнопки previous и next для навигации.
JavaScript обрабатывает загрузку треков, play/pause и перемещение между треками.

Методы аудиоплеера

Вот таблицаcommon audio player methods и их описания:

Method	Description
`play()`	Запускает воспроизведение аудио
`pause()`	Паузирует аудио
`load()`	Перезагружает элемент аудио
`currentTime`	Получает или устанавливает текущую позицию воспроизведения в секундах
`duration`	Получает общую продолжительность аудио в секундах
`volume`	Получает или устанавливает громкость (от 0.0 до 1.0)
`muted`	Получает или устанавливает,whether the audio is muted
`playbackRate`	Получает или устанавливает скорость воспроизведения

И вот выучили! Теперь вы знаете, как создавать базовые и продвинутые HTML аудиоплееры, complete with визуализаторы и плейлисты. Помните, что практика делает мастера, так что не бойтесь экспериментировать и customize эти примеры под ваши нужды. Счастливого кодирования, и пусть ваши веб-страницы будут наполнены красивой музыкой!

Credits: Image by storyset