... BAT BLOG: posts/2016-12-19_m.md
блог старой летучей мыши. /m/ /v/ /β/
   2016-12-19 18:00

Немного отборной музыки

Про идею и реализацию “дружеской музыкальной шкатулки”.

Закончил реализацию одной простой идейки.

Результат доступен публично

Пару дней назад захотелось выкладывать музыку “для друзей” в удобной мне (и им) форме. Ибо задолбало слать треки по почте, мессенджерам, “шарить” через 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] ::
  2017-01-04 19:10
  zzz
  qqq

 Высказаться...