Немного отборной музыки
Про идею и реализацию "дружеской музыкальной шкатулки".
Закончил реализацию одной простой идейки.
Пару дней назад захотелось выкладывать музыку "для друзей" в удобной мне (и им) форме. Ибо задолбало слать треки по почте, мессенджерам, "шарить" через ftp и rsync... Ведь можно сделать просто и удобно всем.
Приступаем.
Как уже писал ранее - я сделал shell-web-scripting-engine для своих нужд, как и подобает настоящему old-school-админу. То есть - здесь не будет никаких php/python/java поделок, только куски шелл-скриптов. Чистая и незамутненная реализация, без обилия мусора.
Для начала - мы решаем простейшую задачку "положить музыку в каталог и подготовить её для шаринга".
Копируем музыку из своего архива...
Смотрим на неё и видим проблему - в названиях альбомов и треков у нас полно пробелов. Да в гробу я видал писать врапперы для обработки этих рванных файлов шелл-скриптах!
Переименовываем всё нахрен путем применения несложного скрипта:
#!/bin/bash
ls -R | while read -r FILE`
do
mv -v "$FILE" `echo $FILE | tr ' ' '_' `
done
find -type f | while read -r FILE
do
mv -v "$FILE" `echo $FILE | tr ' ' '_' `
done
Нет больше пробелов! Едем дальше.
Дальше кусками пишу скрипт который должен разобрать мой хламовник в каталоге "music", выделенном для хранения музыки.
Исхожу из того, что один альбом = одному каталогу с музыкой:
albums=`find music -depth -type d -printf '%P\n'|sort`
Так как альбомов может быть много - сделаем оглавление всего содержимого со ссылками на будущие "анкеры" по альбомам:
echo '<div">'
echo '<h3>Anchors:</h3>'
for alb in $albums
do
Вешаем ссылку на будущий анкер для быстрого перехода к нужному альбому на странице.
echo '<div><a href="#'${alb}'">'${alb}'</a></div>'
done
echo '</div>'
Обрабатываем список альбомов в цикле
for alb in $albums
do Вешаем анкер на альбом. echo '<a name="'${alb}'"></a>' Альбом будет лежать в отдельном div-блоке. echo '<div>'
Делаем линк для быстрого перехода к верху странички по анкеру #top.
echo '<div><a href="#top">#TOP</a></div>'
Пишем название альбома. echo '<h3>'${alb}':</h3>'
Рендерим все картинки из каталога. Считаем, что это обложки альбома. pix=`find "music/${alb}" -type f -iname "*.jpg" -printf '%P
'|sort`
for imago in $pix
do
echo '<img src="/m/music/'${alb}'/'${imago}'" alt="'${alb}'" height="260" width="260">'
done Читаем все треки. tracks=`find "music/${alb}" -type f -iname "*.mp3" -printf '%P
'|sort`
Оборачиваем все треки в отдельный блок - для удобства декорирования. echo '<div>' Обрабатываем каждый трек из списка. for trk in $tracks
do
Каждый трек оформляется в виде отдельного блока. echo '<div>' Заворачиваем файлы в audio-тэги. echo '<audio controls="controls" preload="none""> '
echo ' <source src="/m/music/'${alb}'/'${trk}'"/>'
echo '<p>А вот вам здрасьте! Тэг <code>audio</code> йок. Мойше, качай равку.</p>'
echo "</audio>"
echo ':: <a href="/m/music/'${alb}'/'${trk}'"><b>'${trk}'</b></a>' Закрываем блок трека. echo "</div>"
done закрываем блок списка треков. echo "</div>" закрываем блок альбома. echo "</div>" завершаем цикл обработки альбомов done
Собственно, вот и весь "наисложнейший" код в виде простейшего скрипта. Далее, добавим декорирования по вкусу, вкрячим этот скрипт в модель шелл-фреймворка, написанного ранее, и получим искомый результат.
Там еще проблемка была с js-реализацией проигрывания только одного трека на страничке и последовательного проигрывания следующего трека после завершения предыдущего, - решилось двумя js-скриптами, реализующими простейший перебор audio-тегов.
Выглядит оно вот так:
document.addEventListener('play', function(e){ var audios = document.getElementsByTagName('audio'); for(var i = 0, len = audios.length; i < len;i++){ if(audios[i] != e.target){ audios[i].pause(); } } }, true);
(Криво, косо, но работает).
Альтернативным вариантом было взять готовый плеер на каком-нибудь jQuery, но я е6ал такие помидоры - нужно самому писать чисто и грамотно, чтобы итоговые странички не весили по мегабайту и более.
2016-12-19 16-00
Комментарии [1] ::