pushtape cassette
1.0.0
Pushtape Cassette — это легкая платформа для создания лучших музыкальных веб-приложений. Запишите кассету со своей музыкой и за считанные секунды создайте полноценное музыкальное веб-приложение с постоянным музыкальным проигрывателем.
В этом проекте создается статическое музыкальное веб-приложение, которое можно интегрировать с любым количеством серверных технологий: плоскими файлами, Wordpress/Drupal, JS Frameworks, Python и Ruby. Ключевым элементом, поддерживающим эту идею, является файл cassette.json, портативный формат дискографии. Этот файл действует как единая комплексная конечная точка, и из этой конечной точки JavaScript используется для создания одностраничного приложения с использованием различных микробиблиотек.
python dub.py или обновите cassette.json вручную.Если вы запускаете приложение из подкаталога корня документа, в index.html измените базовый тег на:
<base href="/subdirectory/" />
или, альтернативно, загрузите все ресурсы, используя абсолютные пути.
$ cd pushtape-cassette
$ python dub.py
Сценарий сборки автоматически сгенерирует файл cassette.json на основе файлов в рабочем каталоге. Он предназначен для локального запуска из командной строки, но если ваш сервер настроен для запуска сценариев Python, вы можете попробовать запустить его из браузера или настроить crontab. Примечания:
releases/artist-name/release-nameЕсли вы хотите удалить хеш # из маршрутов URL-адресов и вместо этого использовать History API, в index.html установите для app.settings.cleanURLs значение true. Обратите внимание, что запуск приложения с включенным History API из корня документа рекомендуется, поскольку он решает все проблемы с относительными ссылками.
Примечание. Вы можете пропустить шаги 3 и 4, если используете сценарий сборки dub.py.
| Свойство | Тип | Описание |
|---|---|---|
| последняя сборка | временная метка | Способ отслеживать, когда файл был последний раз создан или изменен. |
| страницы | объект | Содержит пары ключ:значение для статических страниц вашего сайта. Ключ определяет путь маршрутизатора JS первого уровня, т. е. «около». Значение содержит URL-адрес документа уценки. URL-адрес может быть относительным или абсолютным. Если ваш сервер возвращает документы с использованием JSON/JSONP, установите «format»: «json». Если вам нужно включить внешнюю ссылку и обойти JS-маршрутизатор, установите «type»: «external». |
| релизы | объект | Содержит пары ключ:значение, определяющие доступные музыкальные релизы. Ключ определяет путь маршрутизатора JS и должен быть написан строчными буквами без пробелов, например, название альбома или название исполнителя/альбома. Полностью сгенерированный путь будет иметь вид Release/album-title или Release/artist/album-title. Соответствующее значение определяет свойства для этого выпуска. Как минимум вы должны указать URL-адрес для arts.jpg и Notes.md (относительный или абсолютный, при необходимости можно указать формат JSON). Свойство playlist должно быть путем к допустимому файлу списка воспроизведения JSPF, который определяет порядок дорожек и расположение файлов mp3, а также любые другие метаданные. |
| Свойство | Тип | Описание |
|---|---|---|
| app.settings.cassettePath | нить | По умолчанию application.js загружает локальный путь cassette.json. Вы можете переопределить путь к cassette.json, установив эту глобальную переменную перед загрузкой application.js. |
| app.settings.homePage | нить | Это значение указывает, какая страница должна загружаться по умолчанию. Путь должен быть прописан в JS-маршрутизаторе. |
| app.settings.cleanURLs | логическое значение | Если установлено значение false, используются URL-адреса с хешем #. Если это правда, History API будет обрабатывать чистые URL-адреса. |
Известные проблемы:
Ограничения:
Пример кассеты.json:
{
"lastBuild": {},
"pages": {
"releases" : {},
"about" : {"location" : "pages/about.md"},
"shows" : {"location" : "pages/shows.md"},
"external-link" : {"title": "Soundcloud", "location" : "http://www.example.com", "type" : "external"}
},
"releases": {
"example-release": {
"title" : "Cosmic Voyage",
"playlist" : "releases/example-release/tracklist.jspf",
"artwork" : "releases/example-release/artwork.jpg",
"notes" : "releases/example-release/notes.md"
},
"example-release-two": {
"title" : "Bird Life",
"playlist" : "releases/example-release-two/tracklist.jspf",
"artwork" : "releases/example-release-two/artwork.jpg",
"notes" : "releases/example-release-two/notes.md"
}
}
}
| URL-путь | Описание |
|---|---|
| / | Если путь не указан, загружается домашняя страница по умолчанию. |
| /[название страницы] | При этом анализируется и отображается уценка страницы, как определено в cassette.json. |
| /релизы | Список всех выпусков с обложкой и названием, связанный гиперссылкой на отдельную страницу выпуска. |
| /выпуск/[название-выпуска] /release/[имя-исполнителя]/[название-релиза] | Отображает всю информацию об одном релизе: обложку, список воспроизводимых треков и примечания. |
| Проблема | Шаги |
|---|---|
| Пустая страница или отсутствует CSS/JS. | Дважды проверьте свой базовый URL в index.html. Если у вас возникли проблемы с определением правильного пути, иногда путь к серверу можно определить с помощью инспектора Chrome. |
| Проблемы с запросами между источниками (удаленный контент не загружается) | При работе с удаленными запросами между источниками необходимо возвращать действительный JSONP, а запросы необходимо правильно форматировать. 1. Вам необходимо передать ?callback=? в URL-адресе, например http://example.com/cassette.json?callback=? 2: Ответ от сервера должен быть в формате JSONP, а не просто в формате JSON. В частности, проблемы с перекрестным происхождением могут возникнуть при удаленной загрузке cassette.json, jspf, Notes.md иpages.md. Альтернативно вы можете просто загрузить все ресурсы локально, чтобы избежать необходимости настраивать обходной путь JSONP. |
| Сайт не индексируется поисковыми системами | Помимо проверки файла robots.txt и других рекомендаций, это известная проблема с платформами, использующими Javascript для отображения содержимого страницы. Самое простое решение — использовать такой сервис, как prerender.io, для кэширования и обслуживания обработанных HTML-страниц. Я рекомендую установить токен prerender.io через Apache. Вот суть того, как может выглядеть ваш .htaccess (вам нужно будет изменить TOKEN_VALUE и http://example.com для вашего сайта). |
Многие музыкальные сайты довольно статичны, но имеют сложные требования к интерфейсу. Лучший музыкальный UX позволяет непрерывно слушать музыку, одновременно выполняя другие задачи, такие как чтение аннотаций, просмотр другой музыки и т. д. Обычно это означает AJAX-совершенствование традиционного CMS/статического сайта или создание полного решения с нуля с использованием JS. Создание и поддержка этого быстро становится головной болью, особенно в долгосрочной перспективе. Создавая несвязанную структуру внешнего интерфейса, можно лучше разделить задачи и сократить долгосрочные усилия, необходимые для создания и обслуживания сайта. Кроме того, благодаря использованию JSPF и cassette.json, переносимого формата дискографии, переносимость данных не является второстепенной задачей — она встроена в приложение с самого начала.
Я выбрал микробиблиотеки, поскольку требования к рендерингу статического музыкального приложения обычно довольно скромны, и я хотел избежать зависимости от сторонней инфраструктуры одностраничных приложений (SPA). Кроме того, поскольку я использовал микробиблиотеки, мне легче выбирать то, что вы хотите. Например, если вам не нравится выбранная мной система шаблонов, маршрутизации или библиотеки двусторонней привязки, вы можете заменить их предпочитаемой библиотекой/фреймворком JS.
