Очень Простой PHP-Аудиоплеер (С Плейлистом)
Добро пожаловать в руководство по созданию простого аудиоплеера на PHP.
• Поместите ваши аудиофайлы в audio/папку.
• Запустить audio.php в браузере.
ШАГ 1) PHP и HTML
audio.php
<html lang="ru">
<head>
<title>Простой Аудиоплеер С Плейлистом</title>
<meta charset="utf-8">
<link rel="stylesheet" href="audio.css">
<script src="audio.js"></script>
</head>
<body>
<div id="demo">
<!-- (A) АУДИО ТЭГ -->
<audio id="demoAudio" controls></audio>
<!-- (B) ПЛЕЙЛИСТ -->
<div id="demoList">
<?php
// (B1) ПОЛУЧИТЬ ВСЕ ПЕСНИ
$songs = glob("audio/*.{mp3,webm,ogg,wav}", GLOB_BRACE);
// (B2) ВЫВОД ПЕСНИ В <DIV>
if (is_array($songs)) { foreach ($songs as $k=>$s) {
$name = basename($s);
printf("<div data-src='%s' class='song'>%s</div>", rawurlencode($name), $name);
}} else { echo "Песни не найдены!"; }
?>
</div>
</div>
</body>
</html>
Да, в этом простом примере всего 2 компонента.
A. Аудиоплеер, старый добрый <audio> тег.
B. Плейлист.
• Мы будем использовать $songs = glob("audio/*.{mp3,webm,ogg,wav}", GLOB_BRACE) для получения списка песен из audio папки. Обратите внимание, glob не будет рекурсивно считываться в подпапки.
• Затем выполните цикл $songs и создайте список воспроизведения. Обратите внимание на обычай data-src здесь.
ШАГ 2) ИНИЦИАЦИЯ СПИСКА ВОСПРОИЗВЕДЕНИЯ JAVASCRIPT
audio.js
// (A) ИНИЦИАЛИЗАЦИЯ ПЛЕЕРА
player: null, // html <audio> элемент
playlist: null, // html плейлист
now: 0, // текущая песня
init: () => {
// (A1) ПОЛУЧИТЬ HTML-ЭЛЕМЕНТЫ
aud.player = document.getElementById("demoAudio");
aud.playlist = document.querySelectorAll("#demoList .song");
// (A2) ПРОСМОТРИТЕ ВСЕ ПЕСНИ, НАЖМИТЕ ДЛЯ ВОСПРОИЗВЕДЕНИЯ
for (let i=0; i < aud.playlist.length; i++) {
aud.playlist[i].onclick = () => aud.play(i);
}
// (A3) АВТОЗАПУСК ПРИ ДОСТАТОЧНОЙ ЗАГРУЗКЕ
aud.player.oncanplay = aud.player.play;
// (A4) АВТОЗАПУСК СЛЕДУЮЩЕЙ ПЕСНИ В ПЛЕЙЛИСТЕ, КОГДА ЗАКАНЧИВАЕТСЯ ТЕКУЩАЯ ПЕСНЯ
aud.player.onended = () => {
aud.now++;
if (aud.now >= aud.playlist.length) { aud.now = 0; }
aud.play(aud.now);
};
},
К сожалению, <audio> не поддерживает плейлисты на момент написания статьи. Поэтому нам нужно будет создать собственный let aud плеер, содержащий механику нашего пользовательского плейлиста.
• (A1) Получите элементы HTML.
◦ aud.player относится к <audio id="demoAudio">.
◦ aud.playlist является HTMLCollection песнями, содержащимися в <div id="demoList">.
◦ Идея состоит в том, чтобы использовать aud.now для отслеживания текущей песни, играющей в формате aud.playlist. Например, aud.now = 0 укажет первую песню, aud.now = 1 укажет вторую и так далее.
• (A2) Прокрутите все песни, прикрепите «нажмите, чтобы воспроизвести» onclick = aud.play.
• (A3) Небольшая предосторожность: мы ждём, пока песня не будет достаточно буферизована перед воспроизведением.
• (A4) Когда текущая песня заканчивается, мы aud.now++ автоматически воспроизводим следующую песню.
ШАГ 3) ВКЛЮЧИТЕ ПЕСНЮ
audio.js
play: id => {
// (B1) ОБНОВЛЕНИЕ АУДИО SRC (ПУТЬ)
aud.now = id;
aud.player.src = "audio/" + aud.playlist[id].dataset.src;
// (B2) НЕМНОГО КОСМЕТИКИ
for (let i = 0; i < aud.playlist.length; i++) {
if (i == id) { aud.playlist[i].classList.add("now"); }
else { aud.playlist[i].classList.remove("now"); }
}
}
};
window.addEventListener("DOMContentLoaded", aud.init);
Наконец, у нас есть функция, которая воспроизводит саму песню. Очень просто, мы устанавливаем aud.play.src выбранный data-src. Конец. aud.player.oncanplay автоматически начнёт воспроизведение после достаточной буферизации.
Вы можете посмотреть и скачать пример.
Посмотреть
Скачать
