mp3-Плейеры музыки в mp3 файлах с навигацией
Виктор Кон, (05-08-2022, 08-05-2026) http://kohnvict.narod.ru
.
С чего все началось.
Я обнаружил, что в интернете есть очень много записей в mp3 формате, то есть только музыка. Это особенно важно для старых записей музыки в так-называемую виниловую эпоху, когда музыка записывалась на грампластинки. Оказалось, что очень много из таких записей уже оцифровано и именно в mp3 формате. И кое-что, а практически почти все, можно скачать себе. А потом проигрывать на ноутбуке или смартфоне в любой конфигурации. Одной из конфигураций является составление концертов, когда много записей идет одним файлом. Это удобно для прослушивания в фоновом режиме, когда руки чем-то заняты и нет возможности тыкать кнопки. Я такие концерты делал простым копированием нескольких файлов в один. Это можно делать командами операционной системы, а можно и на моем языке программирования VKACL.
В какой-то момент я заметил, что не все mp3 плейеры способны проигрывать такие файлы. Есть такие, которые играют только первый из файлов коллекции и не видят остальных. Есть другие, которые видят и играют, но бегунок у них не работает, можно слушать только непрерывно, иначе они неадекватно себя ведут. Наконец, есть и такие, которые все исполняют правильно. Одним из таких проигрывателей является Яндекс-браузер. что меня снова убедило, что лучше этого браузера программ работы с медиа файлами нет. А браузер способен на большее, чем просто играть музыку. И я решил сделать свой mp3-плейер на базе своей же программы показа картинок без кнопок. Там уже была навигация и информация. Оставалось просто подключить к каждой картинке mp3-файл.
Такой mp3-плейер исполняет серию mp3-файлов в браузере по стандартной программе. Все, что нужно сделать создателю нового плейера -- это приготовить mp3-файлы в каком-то порядке, и для каждого файла сделать картинку, которая как-то соответствует либо музыке, либо исполнителю, а также можно записать текст с информацией об этой музыке. Все файлы записываются в одну папку. И таких папок, то есть концертов с использованием плейера может быть много. Я сделал такую программу, а затем и первый альбом. Но в этой технике есть некоторые сложности. Брать готовые картинки нехорошо, надо делать свои собственные. А это не просто. И также надо сделать еще одну картинку как сумму иконок всех остальных картинок.
Первоначально я все это делал вручную и это отнимает время. Но на следующем этапе я сделал программу на своем языке VKACL, которая картинку с иконками и весь код делает сама и автоматически. Остается только приготовить файлы музыки и картинок для каждого файла музыки. Что касается текстов, то их в первом приближении можно и не писать, но если есть желание, то всегда можно дописывать в любой момент. Такая программа позволяет существенно сократить время на приготовление альбома. Более того, это может делать любой человек, не имея никакого образования в области интернет технологий.
В списке моих программ такая программа получила номер 63 и название FMP (fast mmusic player). Но через какое-то время я решил, что картинки в общем-то и не обязательно. Если люди слущают музыку на смартфоне, то картинки никто и не смотрит. И я сделал вторую программу для браузера, в которой нет картинок, все находится на одном сайте и на нем же устроена вся навигация. Одна картинка все же может быть и на ней можно записать список названий тех музыкальных произведений, которые исполняются. Соответственно программа на моем языке VKACL получила второй аргумент, который принимает значения 1 и 2 для плейера скартинками и без картинок.
Как пользоваться готовой программой номер 1.
Прежде всего, сама программа имеет небольшую подсказку как ей пользоваться. Эта подсказка возникает над картинкой при клике на кнопку [Info] под картинкой справа от названия файла. Чтобы текст убрать надо еще раз кликнуть эту же кнопку. Если захочется прочитать ее снова, снова кликаем ту же кнопку. Там написано самое необходимое. Подсказка закрывает верхнюю часть первой картинки. Других кнопок в данной программе нет. Кнопки совмещены с картинкой. Картинка делится на 4 части по числу углов, которые обозначим как ЛВ, ПВ, ЛН, ПН, Л = левый, П = правый, В = верх, Н = низ. Каждая из частей и является кнопкой. При этом клик на ПВ показывает следующую картинку, клик на ЛВ -- предыдущую картинку, клик на ПН показывает таблицу иконок всех картинок. Если после этого кликнуть на какой-либо из них, то программа показывает именно эту картинку в полную величину. Наконец ЛН показывает текстовый комментарий к текущей музыке, если его нет на экране, или убирает его, если он есть. Эти же действия можно выполнить нажимая клавиши-стрелки. При этом клавиша [B] = ЛВ, [F] = ПВ, [M] = ЛН, [T] = ПН. И с каждой картинкой связан определенный файл музыки в формате mp3.
Вот и все. Очень просто и минималистки. При этом смена картинки автоматически сопровождается сменой музыки, то есть автоматически начинает играть с самого начала тот mp3 файл, который соответствует данной картинке. Речь идет о Яндекс браузере, с которым я работаю. Как в других -- даже не знаю. Не все браузеры проигрывают mp3 файлы, но это уже не мои проблемы. Несмотря на минимум средств навигации и управления, все главное есть. Навигация очень быстрая и удобная, комментарии к каждому картинке-музыке тоже есть. Научиться пользоваться очень легко и быстро, и не надо искать место для кнопок. И кнопки большие. Они нужны для тех приборов, где нет клавиатуры, то есть планшеты и смартфоны. Программе автоматическое масштабирует окно на размер ширины окна браузера с учетом аспектного отношения окна экрана. То есть легко выставить слайды на весь экран. При изменении окна браузера надо перезапускать сайт, чтобы изменились размеры показа.
Некая особенность состоит в том, что при запуске с компьютера или при перезапуске в самом начале музыка автоматически не играет. И это правильно, ведь надо сначала прочитать правила работы с программой. И затем использовать проигрыватель музыки, который имеет свою иконку под картинкой. Эта иконка также необходима для регулирования громкости, использования бегунка и паузы. Но если не хочется использовать мелкую кнопку, то можно перейти ко второй картинке, а потом вернуться к первой. Еще одна особенность -- при окне браузера на весь экран даже после нажатия клавиши [F11] иконку проигрывателя музыки все равно не видно. Надо двигать сайт вниз. На смартфонах лучше использовать вертикальную ориентацию. Тогда пусть мелко, но видно все.
Как пользоваться готовой программой номер 2.
Тут используются всего две картинки, а сами музыкальные записи различаются по номерам. На одной картинке можно показать имена всех записей, она имеет адрес (pro/b/mp2.png), а на второй картинке -- записать правила пользования программой. То есть примерно то, что написано ниже. Но эта картинка уже написана по адресу (pro/b/mp1.png) и ее можно даже не менять. А правила простые. Есть текстовое окно, в котором показывается номер той записи которая играет прямо сейчас. Но его можно редактировать и потом по клику кнопки (ОК) сразу заиграет тот номер, который будет указан. Кнопки (+1) и (--1) меняют номер на 1 вперед и назад. Кнопки (+5) и (+10) меняют номера на 5 и 10 соответственно. После последнего номера играет сразу первый, а ниже первого последний. Если музыка сразу не играет то ее можно включить на самом проигрывателе либо нажимая кнпку (ОК). Этот вариант значительно проще варианта номер 1 и его проще использовать на смартфоне, где рассматривать картинки не так интересно.
Как сделать сайт плейера с помощью моей программы.
Проще всего сделать сайт плейера с помощью моей программы. Я программирую на собственном языке программирования VKACL. Команды этого языка исполняет интерпретатор ACLp.jar. Это огромная программа, написанная на языке программирования Java. У этой программы есть свой сайт 
, на котором ее можно скачать и запустить. При нажатии клавиш [Alt]+[B] она показывает небольшой список кнопок, среди которых есть кнопка (index). По ней программа показывает таблицу иконок готовых программс номерами. Надо выбрать иконку с номером 63 и кликнуть ее. Сначала покажется редактор текстов и кое- какие комментарии к работе программы. Полное описание всех таких программ находится тут . Входные данные записываются записываются в одну строку и представляют собой адрес папки с файлами и номер варианта (1 или 2). Для работы программы надо приготовить файлы музыки и картинок в указанной папке. Остальное программа быстро сделает сама. Если картинок много и компьютер слабый, то не очень быстро, но и не долго.
Для варианта 1 программа сама делает файл с именем "99.jpg", так что пользователю ни о чем заботится не надо, кроме как подобрать картинки и музыку. Со временем я что-нибудь придумаю как делать картинки, но пока их должен делать пользователь как умеет. Способов очень много и мои а-программы (то есть на языке VKACL) тоже много чего умеют. Но об этом надо читать в других местах. В частности, первый альбом я делал вручную и очень долго. Второй уже по программе, но картинки вручную. Постепенно выработался стиль делать квадратные картинки размером 768px и дополнительно текст размером 256*768. И вот две такие картинки при условии, что они имеют упорядоченные номера я уже делал по программе и это очень быстро.
На момент последнего редактироваия этой статьи у меня было уже 12 альбомов все размером 25 песен. И я открыл страницу каталога. Вот ее адрес . Там можно быстро найти нужный альбом и открыть его. Ссылки сделаны в виде картинок, которые взяты из самих альбомов. Такая форма значительно удобнее и красивее любого стандартного проигрывателя. В будущем, возможно, я сделаю текстовый каталог всех песен во всех альбомах для быстрого поиска. Но пока альбомов еще не так много. Если у кого есть вопросы, то пишите мне в почту, адрес указан на сайте.
Для варианта номер 2 достаточно двух картинок. На одной написаны правила как пользоваться программой, а на другой может быть все, что угодно. Желательно чтобы обе картинки имели одинаковй размер. Я сам делаю картинки размером 820*230 и записываю во вторую картинку список имен всех записей албома, число которых 27. Таких альбомов я уже сделал 10, а полное число всех альбомов 22. Полный список всех таких альбомов находится тут .
Названия файлов в указанной папке могут быть любыми, они будут упорядочены по алфавиту. Данная программа работает следующим образом. Она формирует код вэб-сайта, который затем сама же показывает в браузере. Вэб сайт использует программу на языке javascript, которая и обслуживает показ картинок. Данная программа не предполагает использование интернета. Файлы с расширением mp3 должны быть на компьютере и на нем же они и проигрываются. Интернет технологии и браузер можно использовать и без интернета. В данном случае программа удобна тем, что она предлагает быстрое ознакомление с файлами музыки через удобную навигацию. Важно также знать, что программа каждый раз формирует код вэб- сайта в файле с названием (mp.htm) в папке (pro/b) внутри папки интерпретатора. Возможны два варианта такого патефона с номерами 1 и 2. Их вид легко проверить эмпирически. Для варианта номер 1 формируется также файл (mps.js) и используются файлы (pic1mp.jpg) и (pic2mp.jpg), а вариант номер 2 использует файлы (mp1.png) и (mp2.png) все в той же папке.
Для записи таких программ в интернет некоторые из указанных файлов необходимо слегка отредактировать и также записать все файлы музыки и и картинок тоже в интернет. Если все писать в одну папку, но никаких изменений с адресами делать не нужно. если используются относительные адреса. именно потому они такие удобные и их разумно использовать. Но иногда все же файлы общего типа удобно держать в каком то общем месте и тогда адреса нужно менять. Для работы на компьютере все делается автоматически и проигрыватель сразу показывается в браузере.
Как сделать самому копию сайта на конкретный альбом с программой номер 1.
Вообще говоря, можно самому сделать копию сайта на презентацию нового альбома простым редактированием файлов из любой уже имеющейся программы. Программы для браузеров на языке 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 (ссылка в следующем разделе). Там есть операция масштабирования картинок и операция создания таблицы.
Как сделать самому копию сайта на конкретный альбом с программой номер 2.
Программу типа 2 тоже удобно делать редактированием какого-то ранее сделанного сайта. Лично я список адресов файлов формирую из каталога файлов папки, а список имен записей печатаю в редакторе текстов и вырезаю картинку с экрана моей же программой VKSM. Она является самостоятельной java программой без окна, но с иконкой на системной строке.
.