Скрипты веб проигрывателей мп3-файлов

Простой скрипт аудиоплейера на PHP и HTML5


Как-то меня попросили написать скрипт, который мог бы выводить содержимое папки с мп3 -файлами, с возможностью их прослушивания.

Скрипт несложный, вот так выводится список файлов:

function showmp3()
{$dir = '.'; //директория с файлами mp3
$files = scandir($dir);
foreach ($files as $file):
if($file=='..' or $file=='.' ) {}
else
{
echo '<a href="'.$dir.$file.'">'.$file .'</a><br>';}
endforeach; }

В нужном месте вставляем showmp3(); и выводим список ссылок на файлы.

Сам проигрыватель создаём с помощью тегов <audio> </audio>, которые поддерживают все современные браузеры

<audio id="player" controls='controls' autoplay='autoplay'>
<source type='audio/mpeg' src="тут путь к мп3-файлу" ></audio>

В моём скрипте путь к файлу передавался в плеер при щелчке по ссылке на файл через get параметр, который добавлялся в ссылку в процессе формирования в цикле вывода.

Всё работало, но то, что каждый раз приходилось нажимать ссылку, чтобы запустить трек не радовало, хотелось чтобы список проигрывался автоматически. Чисто на PHP это реализовать невозможно, тут следует воспользоваться javascript. Использовать jquery, как обычно все делают, я не хотел, так как не очень дружу с jquery, сделал всё на чистом js

<script>
document.getElementById('player') .addEventListener('ended',function() {
var href = document.getElementById ('тут id ссылки на следующий трек').href;
location.href = href;});
</script>

Этот javascript определяет момент окончания проигрывания текущего трека и дёргает ссылку на следующий трек.

Что получилось в итоге, можно посмотреть на сайте в разделе ГАЛЕРЕЯ/МУЗЫКА
Для оригинальности я добавил возможность выбора в проигрывателе различных тем оформления, кстати, если кто захочет использовать скрипт, можно найти графику для него в разделе ГАЛЕРЕЯ, там есть небольшой альбом с анимациями.
скачать исходник
А здесь можно найти скрипты плейеров на основе Flash




комментарии (3)



написал Rogerwe
Домашний мастер Ростов-на-Дону 89185259898 Сергей
добавлено: 16.10.17 13:42
написал Anonimus
Message
добавлено: 15.08.17 16:45
написал OgtzyadR
Электронные компоненты. Измерительные приборы. Оптоэлектроника Кнопки, переключатели, разъемы, реле. Паяльное оборудование. Инструмент. Расходные материалы. Корпусные и установочные изделия. Блоки и элементы питания. Провода, шнуры, кабели. Домашняя техника и электроника. Компьютерное и офисное оборудование. Средства разработки, конструкторы, модели Владимир +7-999-699-27-95
добавлено: 27.07.17 19:38
Имя

Сообщение

введите защитный код


Обновить

Powered by ©Veterock Studio 2013