Pushtape Cassette 是一个轻量级框架,用于构建更好的音乐 Web 应用程序。制作音乐盒带并在几秒钟内呈现完整的音乐网络应用程序,具有持久的音乐播放器。
该项目创建了一个静态音乐 Web 应用程序,可以与任意数量的后端技术集成:平面文件、Wordpress/Drupal、JS 框架、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 的应用程序,因为它可以解决所有相关链接问题。
注意:如果您使用 dub.py 构建脚本,则可以跳过步骤 3 和 4。
财产 | 类型 | 描述 |
---|---|---|
最后构建 | 时间戳 | 一种跟踪文件上次构建或修改时间的方法。 |
页面 | 目的 | 包含站点上静态页面的键:值对。该键定义了第一级 JS 路由器路径,即“about”。该值包含 Markdown 文档的 URL 位置。 URL 可以是相对的或绝对的。如果您的服务器使用 JSON/JSONP 返回文档,请设置“format”:“json”。如果需要包含外部链接并绕过 JS 路由器,请设置“type”:“external”。 |
发布 | 目的 | 包含定义可用音乐版本的键:值对。键定义 JS 路由器路径,并且应该全部小写,不带空格,即专辑标题或艺术家/专辑标题。完整生成的路径最终为release/album-title 或release/artist/album-title。相应的值定义了此版本的属性。您至少应该指定artwork.jpg 和notes.md 的URL(相对或绝对,可以选择将格式指定为json)。 playlist 属性必须是有效 JSPF 播放列表文件的路径,该文件指定 mp3 文件的曲目顺序和位置以及任何其他元数据。 |
财产 | 类型 | 描述 |
---|---|---|
app.settings.cassettePath | 细绳 | 默认情况下,application.js将加载本地的cassette.json路径。您可以通过在加载 application.js 之前设置此全局变量来覆盖cassette.json 的路径。 |
应用程序设置主页 | 细绳 | 该值指定默认情况下应加载的页面。该路径必须在 JS 路由器中注册。 |
app.settings.cleanURLs | 布尔值 | 如果为 false,则使用哈希 # url。如果为 true,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"
}
}
}
网址路径 | 描述 |
---|---|
/ | 如果不输入路径,则加载默认主页。 |
/[页面标题] | 这会解析并显示在卡带.json 中定义的页面的降价。 |
/发布 | 所有版本的列表,包含插图和名称,超链接到各个版本页面。 |
/发布/[发布标题] /release/[艺术家姓名]/[发行标题] | 显示单个版本的所有信息:艺术作品、可播放曲目列表和注释。 |
问题 | 步骤 |
---|---|
空白页面或缺少 CSS/JS | 仔细检查 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 页面。我建议通过 Apache 安装 prerender.io 令牌。以下是您的 .htaccess 的大概样子(您需要更改您网站的 TOKEN_VALUE 和 http://example.com)。 |
许多音乐网站相当静态,但有棘手的前端要求。最好的音乐用户体验允许不间断的音乐聆听体验,同时执行其他任务,例如阅读内页注释、浏览其他音乐等。通常这意味着 AJAX 化传统的 CMS/静态站点或使用 JS 从头开始构建完整的解决方案。这很快就会成为构建和维护的难题,尤其是从长远来看。通过创建解耦的前端框架,它可以更好地分离关注点,并减少构建和维护站点所需的长期工作。此外,通过利用JSPF和cassette.json(一种便携式唱片格式),数据可移植性并不是事后才想到的——它从一开始就内置于应用程序中。
我选择微型库是因为渲染静态音乐应用程序的要求通常相当适中,并且我希望避免依赖第三方单页应用程序 (SPA) 框架。此外,因为我使用了微型图书馆,所以可以更轻松地挑选和选择您想要的内容。例如,如果您不喜欢我选择的模板系统、路由或双向绑定库,您可以将它们替换为您喜欢的 JS 库/框架。