pushtape cassette
1.0.0
Pushtape Cassette é uma estrutura leve para construir melhores aplicativos musicais da web. Faça uma fita cassete com sua música e renderize um aplicativo de música da web completo em segundos, com um reprodutor de música persistente.
Este projeto cria um webapp de música estática que pode ser integrado com qualquer número de tecnologias de backend: arquivos simples, Wordpress/Drupal, JS Frameworks, Python e Ruby. O elemento-chave que alimenta essa ideia é o arquivo cassette.json, um formato de discografia portátil. Este arquivo atua como um único endpoint abrangente - e a partir desse endpoint, o javascript é usado para criar um aplicativo de página única usando várias microbibliotecas.
python dub.py ou atualize cassette.json manualmenteSe você executar o aplicativo a partir de um subdiretório da raiz do documento, em index.html altere a tag base para:
<base href="/subdirectory/" />
ou, alternativamente, carregue todos os ativos usando caminhos absolutos.
$ cd pushtape-cassette
$ python dub.py
O script de construção gerará automaticamente um cassette.json com base nos arquivos do diretório de trabalho. Ele foi projetado para ser executado localmente na linha de comando, mas se o seu servidor estiver configurado para executar scripts python, você pode tentar executá-lo no navegador ou configurar um crontab. Notas:
releases/artist-name/release-nameSe você deseja remover o hash # das rotas de URL e usar a API History, em index.html defina app.settings.cleanURLs como true. Observe que é recomendável executar o aplicativo com a API de histórico habilitada na raiz do documento, pois ela resolve todos os problemas de link relativos.
Nota: você pode pular as etapas 3 e 4 se usar o script de construção dub.py.
| Propriedade | Tipo | Descrição |
|---|---|---|
| última construção | carimbo de data/hora | Uma forma de rastrear quando o arquivo foi compilado ou modificado pela última vez. |
| páginas | objeto | Contém pares chave-valor para páginas estáticas do seu site. A chave define o caminho do roteador JS de primeiro nível, ou seja, 'about'. O valor contém o local da URL para um documento de redução. A URL pode ser relativa ou absoluta. Se o seu servidor estiver retornando documentos usando JSON/JSONP, defina "format" : "json". Se você precisar incluir um link externo e ignorar o roteador JS, defina "type": "external". |
| lançamentos | objeto | Contém pares chave:valor que definem os lançamentos musicais disponíveis. Uma chave define o caminho do roteador JS e deve estar em letras minúsculas, sem espaços, ou seja, título do álbum ou título do artista/álbum. O caminho totalmente gerado acaba sendo lançamento/título do álbum ou lançamento/artista/título do álbum. O valor correspondente define as propriedades desta versão. No mínimo você deve especificar o URL para artwork.jpg e notes.md (relativo ou absoluto, opcionalmente pode especificar o formato como json). A propriedade playlist precisa ser um caminho para um arquivo de playlist JSPF válido, que especifica a ordem das faixas e a localização dos arquivos mp3 e quaisquer outros metadados. |
| Propriedade | Tipo | Descrição |
|---|---|---|
| app.settings.cassettePath | corda | Por padrão, application.js carregará o caminho local cassette.json. Você pode substituir o caminho para cassette.json definindo esta variável global antes de carregar application.js. |
| app.settings.homePage | corda | Este valor especifica qual página deve ser carregada por padrão. O caminho deve ser registrado no roteador JS. |
| app.settings.cleanURLs | booleano | Se for falso, hash # urls serão usados. Se for verdade, a API History tratará URLs limpos. |
Problemas conhecidos:
Limitações:
Exemplo cassete.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"
}
}
}
| Caminho do URL | Descrição |
|---|---|
| / | Se nenhum caminho for inserido, a página inicial padrão será carregada. |
| /[título da página] | Isso analisa e exibe a redução de uma página conforme definido em cassette.json. |
| /lançamentos | Uma lista de todos os lançamentos com arte e nome, com hiperlink para a página de lançamento individual. |
| /lançamento/[título-lançamento] /lançamento/[nome do artista]/[título do lançamento] | Exibe todas as informações de um único lançamento: arte, tracklist reproduzível e notas. |
| Problema | Passos |
|---|---|
| Página em branco ou CSS/JS ausente | Verifique seu URL base em index.html. Se você tiver problemas para descobrir o caminho correto, às vezes o caminho do servidor pode ser inferido usando o inspetor do Chrome. |
| Problemas de solicitação de origem cruzada (conteúdo remoto não carregado) | Ao lidar com solicitações remotas de origem cruzada, JSONP válido deve ser retornado e as solicitações precisam ser formatadas corretamente. 1. Você precisa passar ?callback=? no URL, ou seja, http://example.com/cassette.json?callback=? 2: A resposta do servidor deve ser JSONP, não apenas JSON normal. Em particular, podem surgir problemas de origem cruzada ao carregar remotamente cassette.json, jspf, notas.md e páginas.md. Como alternativa, você pode simplesmente carregar todos os ativos localmente para evitar a necessidade de configurar uma solução alternativa JSONP. |
| O site não está sendo indexado pelos mecanismos de pesquisa | Além de verificar seu robots.txt e outras práticas recomendadas, esse é um problema conhecido em estruturas que usam Javascript para renderizar o conteúdo da página. A solução mais fácil é usar um serviço como o prerender.io para armazenar em cache e servir páginas HTML renderizadas. Recomendo instalar o token prerender.io via Apache. Aqui está uma ideia geral da aparência do seu .htaccess (você precisará alterar o TOKEN_VALUE e http://example.com para o seu site). |
Muitos sites de música são bastante estáticos, mas possuem requisitos de front-end complicados. O melhor UX musical permite uma experiência ininterrupta de ouvir música enquanto executa outras tarefas, como ler notas de capa, navegar em outras músicas, etc. Geralmente, isso significa AJAXificar um site CMS/estático tradicional ou construir uma solução completa do zero usando JS. Isso rapidamente se torna uma dor de cabeça para construir e manter, especialmente a longo prazo. Ao criar uma estrutura de front-end dissociada, permite uma melhor separação de preocupações e reduz o esforço de longo prazo necessário para construir e manter um site. Além disso, ao aproveitar JSPF e cassette.json, um formato de discografia portátil, a portabilidade de dados não é uma reflexão tardia - ela é integrada ao aplicativo desde o início.
Escolhi microbibliotecas porque os requisitos para renderizar um aplicativo de música estática são geralmente bastante modestos e queria evitar a dependência de uma estrutura de aplicativo de página única (SPA) de terceiros. Além disso, como usei microbibliotecas, fica mais fácil escolher o que você deseja. Por exemplo, se você não gosta do sistema de modelos, roteamento ou bibliotecas de ligação bidirecional que escolhi, você pode substituí-los por sua biblioteca/estrutura JS preferida.
