mp3-Плейеры с картинками и комментариями без кнопок

Виктор Кон,   (05-08-2022, 21-08-2022)   http://kohnvict.narod.ru

.

С чего все началось.

Я вдруг обнаружил, что в интернете есть очень много записей в mp3 формате, то есть только музыка. Это особенно важно для старых записей музыки в так-называемую виниловую эпоху, когда музыка записывалась на грампластинки. Оказалось, что очень много из таких записей уже оцифровано и именно в mp3 формате. И кое-что, а практически все, можно скачать себе. А потом проигрывать на ноутбуке в любой конфигурации. Одной из конфигураций является составление концертов, когда много записей идет одним файлом. Это удобно для прослушивания в фоновом режиме, когда руки чем-то заняты и нет возможности тыкать кнопки. Я такие концерты делаю простым копированием нескольких файлов в один. Это можно делать командами операционной системы, а можно и на моем языке программирования ACL.

И тут я неожиданно заметил, что не все mp3 плейеры способны проигрывать такие файлы. Есть такие, которые играют только первый из файлов коллекции и не видят остальных. Есть другие, которые видят и играют, но бегунок у них не работает, можно слушать только непрерывно, иначе они неадекватно себя ведут. Наконец, есть и такие, которые все исполняют правильно. Одним из таких проигрывателей является Яндекс-браузер. что меня снова убедило, что лучше браузера программ работы с медиа файлами нет. А браузер способен на большее, чем просто играть музыку. И я решил сделать свой mp3-плейер на базе своей же программы показа картинок без кнопок. Там уже была навигация и информация. Оставалось просто подключить к каждой картинке mp3-файл.

Такой mp3-плейер исполняет серию mp3-файлов в браузере по стандартной программе. Все, что нужно сделать создателю нового плейера -- это приготовить mp3-файлы в каком-то порядке, и для каждого файла сделать картинку, которая как-то соответствует либо музыке, либо исполнителю, а также можно записать текст с информацией об этой музыке. Все файлы записываются в одну папку. И таких папок, то есть концертов с использованием плейера может быть много. Я сделал такую программу, а затем и первый альбом. Но в этой технике есть некоторые сложности. Брать готовые картинки нехорошо, надо делать свои собственные. А это не просто. И также надо сделать еще одну картинку как сумму иконок всех остальных картинок.

Первоначально я все это делал вручную и это отнимает время. Но на следующем этапе я сделал программу на своем языке ACL, которая картинку с иконками и весь код делает сама и автоматически. Остается только приготовить файлы музыки и картинок для каждого файла музыки. Что касается текстов, то их в первом приближении можно и не писать, но если есть желание, то всегда можно дописывать в любой момент. Такая программа позволяет существенно сократить время на приготовление альбома. Более того, это может делать любой человек, не имея никакого образования в области интернет технологий.

Как пользоваться готовой программой.

Прежде всего, сама программа имеет небольшую подсказку как ей пользоваться. Эта подсказка возникает над картинкой при клике на кнопку [Info] под картинкой справа от названия файла. Чтобы текст убрать надо еще кликнуть эту же кнопку. Если захочется прочитать ее снова, снова кликаем ту же кнопку. Там написано самое необходимое. Подсказка закрывает верхнюю часть первой картинки. Других кнопок в данной программе нет. Кнопки совмещены с картинкой. Картинка делится на 4 части по числу углов, которые обозначим как ЛВ, ПВ, ЛН, ПН, Л = левый, П = правый, В = верх, Н = низ. Каждая из частей и является кнопкой. При этом клик на ПВ показывает следующую картинку, клик на ЛВ -- предыдущую картинку, клик на ПН показывает таблицу иконок всех картинок. Если после этого кликнуть на какой-либо из них, то программа показывает именно эту картинку в полную величину. Наконец ЛН показывает текстовый комментарий к текущей музыке, если его нет на экране, или убирает его, если он есть. Эти же действия можно выполнить нажимая клавиши-стрелки. При этом клавиша [B] = ЛВ, [F] = ПВ, [M] = ЛН, [T] = ПН. И с каждой картинкой связан определенный файл музыки в формате mp3.

Вот и все. Очень просто и минималистки. При этом смена картинки автоматически сопровождается сменой музыки, то есть автоматически начинает играть с самого начала тот mp3 файл, который соответствует данной картинке. Речь идет о Яндекс браузере, с которым я работаю. Как в других -- даже не знаю. Не все браузеры проигрывают mp3 файлы, но это уже не мои проблемы. Несмотря на минимум средств навигации и управления, все главное есть. Навигация очень быстрая и удобная, комментарии к каждому картинке-музыке тоже есть. Научиться пользоваться очень легко и быстро, и не надо искать место для кнопок. И кнопки большие. Они нужны для тех приборов, где нет клавиатуры, то есть планшеты и смартфоны. В программе есть автоматическое масштабирование на размер окна браузера с учетом аспектного отношения окна экрана. То есть легко выставить слайды на весь экран. При изменении окна браузера надо перезапускать сайт, чтобы изменились размеры показа.

Некая особенность состоит в том, что при запуске с компьютера или при перезапуске в самом начале музыка автоматически не играет. И это правильно, ведь надо сначала прочитать правила работы с программой. И затем использовать проигрыватель музыки, который имеет свою иконку под картинкой. Эта иконка таже необходима для регулирования громкости, использования бегунка и паузы. Но если не хочется использовать мелкую кнопку, то можно перейти ко второй картинке, а потом вернуться к первой. Еще одна особенность -- при окне браузера на весь экран даже после нажатия клавиши [F11] иконку проигрывателя музыки все равно не видно. Надо двигать сайт вниз. На смартфонах лучше использовать вертикальную ориентацию. Тогда пусть мелко, но видно все.

Как сделать самому копию сайта на конкретный альбом.

Вообще говоря, можно самому сделать копию сайта на презентацию нового альбома простым редактированием файлов из любой уже имеющейся программы. Программы для браузеров на языке javascript записываются текстом. При этом удобно выделить части с кодом и входными данными. Код можно не смотреть, важно просто поменять входные данные показа. Я сначала опишу как это сделать для запуска презентации на компьютере без интернета. Презентация описывается двумя файлами с названиями (mp.htm) и (mp.js). Еще она использует один служебный файл (mps.js), который менять не нужно.

Получить тексты этих файлов очень просто. Запускаете любой альбом и смотрите код его сайта. Это легко сделать нажимая клавиши [Ctrl]+[U]. Можно выделить весь код кнопками [Ctrl]+[A]. Затем открыть любой редактор простых текстов (Notepad и его аналоги) и скопировать текст в окно редактора. Копировать с буфер кнопками [Ctrl]+[C]. Копировать в редактор из буфера кнопками [Ctrl]+[V]. Затем текст нужно спасти в файл с именем (mp.htm). В этом тексте есть ссылки на два других файла. Ссылки можно кликнуть и затем сохранить себе текст указанным выше способом. В моих альбомах ссылка на третий файл имеет перед именем указание на внешнюю папку (../). Его можно убрать и все записывать в одну папку.

Для создания разных альбомов есть два варианта. Можно файлы с одними и теми же именами записывать в разные папки. А можно переименовывать файлы. Если будете переименовывать второй файл, то нужно изменить и ссылку на него в первом файле. Третий файл переименовывать необязательно -- он стандартный, собственно это и есть программа проигрывателя. Его можно вообще не смотреть. После нового имени можно еще поставить вопросительный знак и какой-то текст за ним. Сам вопросительный знак и весь текст за ним не имеет смысла. Но это приходится писать по той причине, что браузеры один раз закачав файл в свой кэш больше его не скачивают, даже если файл изменился без изменения имени. Меняя, например, номер после вопросительного знака можно обмануть браузер в том плане, что у файла новое имя и браузер будет его скачивать.

Кроме того, в 1й строке 1-го файла нужно изменить текст названия сайтана любой другой, какой вам необходимо. Этот текст показывается браузером в ссылке на окно и в сетях интернета при ссылке на сайт. Немного про имена файлов. Если файл находится в той же папке, то достаточно просто имени. Если папка другая, то надо поставить путь к файлу. Как это делать можно почитать в другом месте. Я скажу кратко. Если папка имеет имя "abc" и находится внутри данной папки, то перед именем надо написать "abc/". Если папка находится рядом с данной папкой на более высоком уровне, то надо писать "../abc/". И так далее. Образец как писать полный адрес в интернете уже есть, об этом далее. А на компьютере полный адрес пишется так "file:///c:/a/b/c/abc/имяфайла". И все.

Перейдем ко второму файлу с именем (mp.js). В этом файле изменений больше, но они тоже вполне понятные. Так там указаны начальные значения параметров. Их можно оставить как есть, а можно поменять, если вам захочется. Смысл параметров следующий. Параметры arb и art задают отношение размеров горизонтальной стороны к вертикальной по формуле art/arb. В файле указано, что ширина в полтора раза больше высоты. Параметры n1 и n2 относятся к таблице иконок. При этом n1 -- число иконок в строке, n2 -- число строк. Параметр mh указывает отношение высоты окна с текстом комментария к высоте слайда. Комментарий всегда пишется в верхней части слайда.

Размер текста (tt) комментария задается для полноэкранного режима. Если ширина браузера меньше размера экрана, то этот размер пропорционально масштабируется. Параметр (cs) пришлось ввести для новых планшетов. Дело в том, что для планшетов нет перехода в полноэкранный режим, а любой сайт сразу масштабируется на ширину окна экрана. При этом автоматически высота получается равной высоте экрана и определенной операцией можно вытолкнуть строки закладок и адреса за пределы экрана. Но на современных планшетах нет никаких кнопок на корпусе и часть экрана в виде полосок сверху и снизу используется для кнопок. Соответственно окно браузера уменьшено по высоте. И как раз это и учитывает параметр (cs). Его лучше не менять, но экспериментировать не запрещено.

Пока я сделал так, что программа запрашивает высоту окна браузера, и если высота экрана больше, чем высота браузера, то ставится последняя. Но высота браузера определяется с учетом того, что на экране есть строки закладок и адреса. Их можно убрать с экрана планшета выталкиванием. Поэтому нас интересует высота без этих строк, она больше, но ее не определить автоматически. Как раз поэтому я умножаю высоту окна браузера на коэффициент, который зависит от прибора. Этот коэффициент и есть параметр (cs). На ноутбуках он не играет никакой роли, потому что высота браузера всегда выше или равна высоте экрана с учетом масштабирования. А на планшете он позволяет сделать так, чтобы картинка показывалась на весь экран по высоте, доступной браузеру. Эта высота меньше высоты экрана.

Также там указаны сокращенные имена файлов картинок в двойных кавычках, какие используются в программе. Они имеют расширение (jpg). Можно поменять имена, а также их число на любое другое. Но тут есть тонкость, которая состоит в том, что указаны только те части имен файлов, которые меняются. Постоянная часть имен записана в переменной att в 1-й строке. Если там пусто, то предполагается, что все файлы картинок и музыки находятся в одной папке с файлами программы. Так и разумно сделать на компьютере и все файлы держать в одной папке. При переносе в интернет могут быть варианты. Точно так же надо поменять названия файлов с расширением (mp3). Их число должно быть равно числу картинок.

И нужно поменять еще один файл с названием (99.jpg). Это картинка с иконками всех картинок. Есть программы, которые это умеют делать. В том числе и моя программа. Но если использовать мою программу, то она просто весь сайт делает автоматически, об этом я напишу чуть позднее. Но для тестирования можно использовать любой готовый файл. Комментарии к картинкам пишутся в одинарных кавычках. В примере они очень короткие, там только номера картинок (и музыки). К ним можно добавить любой текст, но строки переносить нельзя. Нельзя начинать новую строку внутри комментария. Если это необходимо, то надо писать следующие символы внутри скобок (\n), скобки писать не надо.

Сами картинки могут быть какие угодно, они все будут масштабироваться. Но все же разумно, чтобы они имели одинаковое аспектное отношение (то есть отношение ширины к высоте), иначе они будут искажены. А также их размер должен быть достаточно большим, иначе при увеличении на весь экран они будут плохого качества. Кроме картинок-слайдов используется картинка с укороченным именем "99.jpg". Соотвественно файлы слайдов не могут иметь такое имя. Эту картинку надо приготовить отдельно от слайдов и вручную, автоматически она не готовится. Эта картинка содержит таблицу иконок всех слайдов, причем иконок должно быть n1 в одной строке и n2 строк.

Если слайдов меньше, чем n1*n2, то на картинке может быть пустое место, либо можно дополнить число слайдов какой-либо информацией, которая не имеет отношение к альбому -- это на вкус создателя альбома. Такую картинку можно легко приготовить с помощью ACL программы (Img pro) из таблицы готовых программ интерпретатора vkACL (ссылка в следующем разделе). Там есть операция масштабирования картинок и операция создания таблицы.

Как сделать сайт плейера с помощью моей программы.

Проще всего сделать сайт плейера с помощью моей программы. Я программирую на собственном языке программирования ACL. Команды этого языка исполняет интерпретатор vkACL.jar, то есть огромная программа, написанная на языке программирования Java. У этой программы есть свой сайт , на котором ее можно скачать и запустить. При нажатии клавиш [Alt]+[B] она показывает таблицу иконок готовых программ. Надо выбрать иконку с названием (Web pro) и кликнуть ее. Там написано, что для работы программы надо приготовить файлы картинок и музыки и поместить их в специальные папки. Остальное программа быстро сделает сама. Если картинок много и компьютер слабый, то не очень быстро, но и не долго.

Важно, что программа сама делает файл с именем "99.jpg", так что пользователю ни о чем заботится не надо, кроме как подобрать картинки и музыку. Со временем я что-нибудь придумаю как делать картинки, но пока их должен делать пользователь как умеет. Способов очень много и мои ACL программы тоже много чего умеют. Но об этом надо читать в других местах. В частности, первый альбом я делал вручную и очень долго. Второй уже по программе, но картинки вручную. Постепенно выработался стиль делать квадратные картинки размером 768px и дополнительно текст размером 256*768. И вот две такие картинки при условии, что они имеют упорядоченные номера я уже делал по программе и это очень быстро.

На момент последнего редактироваия этой статьи у меня было уже 10 альбомов все размером 25 песен. И я открыл страницу каталога. Вот ее адрес . Там можно быстро найти нужный альбом и открыть его. Ссылки сделаны в виде картинок, которые взяты из самих альбомов. Такая форма значительно удобнее и красивее любого стандартного проигрывателя. В будущем, возможно, я сделаю текстовый каталог всех песен во всех альбомах для быстрого поиска. Но пока альбомов еще не так много. Если у кого есть вопросы, то пишите мне в почту, адрес указан на сайте.
.