Música, diversão e uma distração excelente.
Depois de um certo tempo, comecei a fazer uns testes com música novamente. Nada de especial nem profissional, somente para mera distração e diversão pessoal mesmo.
Fiz uma ou outra música num violão, simples.
Postei no site LowCypher Augur - Bandcamp algumas músicas que fiz.
Achei interessante o modelo que eles utilizam para publicar as músicas. Não queria utilizar um sistema de tocador de música pela web, que fosse complexo como shoutcast ou usando bancos de dados. Então procurei o mais básico utilizando os recursos que o html5 e javascript fornecem.
Existem diversas aplicações para ouvir músicas. O que eu estava procurando era uma aplicação que rodasse no navegador web, da forma mais simples possível.
Numa busca rápida, localizei o html5 music player ( ttw-music-player.js que é o player propriamente dito, em Codebase Hero). Dei uma olhada e percebi que é simples, leve e fácil de incorporar a página html.
Achei um template html do site HTML5 UP para as páginas.
Agora começa a parte divertida. Incorporar o player na página, mas precisamente nas divs específicas que me interessou.
Uma leitura rápida e nada de entender. Uma outra leitura mais demorada e ainda nada de entender. Até que depois de umas pesquisas e leituras mais detalhadas consegui entender (ou quase isso) como incorporar nos locais que eu queria e algumas alterações no player, seu arquivo js. Simples também.
No site codebasehero, mencionado acima mostra o código que será incorporado à pagina html, com as tags script javascript.
Abaixo um exemplo da página com o álbum, o playlist e como fiz nas páginas, a inclusão do player.
Abaixo o código de exemplo da página mostrada acima.
Os locais em que deve ficar o script java script e o id do player para ser mostrado na página estão comentados e em negrito
&&&&&&&&&&&&&&&&&&&&&&&&&&
<!DOCTYPE HTML>
<!--
Halcyonic by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>::: LowCypher Augur - UX2K17 - Vol I :::</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<link rel="stylesheet" type="text/css" href="plugin/css/style.css">
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="plugin/jquery-jplayer/jquery.jplayer.js"></script>
<script type="text/javascript" src="plugin/ttw-music-player.js"></script>
<!--
Abaixo o arquivo ux1.js na pasta js é o playlist do player
Obs: para cada album eu criei uma playlist diferente na pasta js
-->
<script type="text/javascript" src="js/ux1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var description = '';
//a informação abaixo entre as simples que é o #player é o ID do player.
//Mais abaixo na página, tem uma div com o id player, onde mostra o play
//na página, na lateral à direita.
$('#player').ttwMusicPlayer(myPlaylist, {
autoPlay:false,
description:description,
jPlayer:{
swfPath:'plugin/jquery-jplayer' //You need to override the default swf path any time the directory structure changes
}
});
});
</script>
</head>
<body class="subpage">
<div id="page-wrapper">
<!-- Header -->
<div id="header-wrapper">
<header id="header" class="container">
<div class="row">
<div class="12u">
<!-- Logo -->
<h1><a href="index.html" id="logo">LowCypher Augur</a></h1>
</div>
</div>
</header>
</div>
<div id="body" class="body"></div>
<!-- Content -->
<div id="content-wrapper">
<div id="content">
<div class="container">
<div class="row">
<div class="7u 12u(mobile)">
<!-- Main Content -->
<section>
<header>
<h2>UX2K17 - Vol I</h2>
<h3>Track List</h3>
</header>
<p>Simplicidade, sutileza, delicadeza, beleza e toda sua essencia. Sao somente tres faixas, que tentam mostrar a delicadeza da Mulher.
</p>
<!--<a href="#" class="bordered-feature-image"><img src="images/06.png" alt="" /></a> -->
<h2 align="center">01 UX2K17 - Part I</h2>
<h2 align="center">02 UX2K17 - Part II</h2>
<h2 align="center">03 UX2K17 - Part III</h2>
</section>
</div>
<div class="5u 12u(mobile)">
<!-- Sidebar -->
<section>
<header>
<h2 align="center">UX2K17 - Vol I</h2>
<h2 align="center">PlayList</h2>
</header>
<!--
Abaixo a div com id do player, informado acima entre as tags head
Player incluído aqui será mostrado na lateral direita da página conforme mostrado no navegador.
Os detalhes de como lidar com divs são encontrados em diversos sites na Internet
-->
<div id="player"></div>
</ul>
</section>
</div>
</div>
</div>
</div>
</div>
<!-- Copyright -->
<div id="copyright">
© LowCypher Augur. Todos Os Direitos Reservados | Design: <a href="http://html5up.net">HTML5 UP</a>
</div>
</div>
</body>
</html>
&&&&&&&&&&&&&&&&&&&&&&&&&&&&
Um das coisas interessantes do player é o seu playlist. Utiliza o formato em json (JavaScript Object Notation - Notação de Objetos JavaScript).
Simples, fácil e … trabalhoso!!!
Exacto! Trabalhoso!
O formato do arquivo usa um array de dados para cada faixa manipulada pelo player. Conforme abaixo:
var myPlaylist =
[{
"mp3":"songs/07/01.mp3",
"title":"UX2K17 - Part I",
"artist":"LowCypher Augur",
"duration":"0:03:13",
"buy":"songs/07/01.mp3",
"cover":"imgs/07.png"
},
{
"mp3":"songs/07/02.mp3",
"title":"UX2K17 - Part II",
"artist":"LowCypher Augur",
"duration":"0:02:49",
"buy":"songs/07/02.mp3",
"cover":"imgs/07.png"
},
{
"mp3":"songs/07/03.mp3",
"title":"UX2K17 - Part III",
"artist":"LowCypher Augur",
"duration":"0:03:34",
"buy":"songs/07/03.mp3",
"cover":"imgs/07.png"
}];
Obedecendo a sintaxe e etc do formato json e do próprio player.
Obs: o arquivo ttw-music-player.js que fica na pasta plugin, pode ser ajustado de acordo com sua necessidade. Dê uma olha e estudada no arquivo que apesar de longo é relativamente simples de entender e utilizar. Ao menos para minha necessidade foi simples.
Voltando ao playlist, veja como é a estrutura do arquivo. Para cada faixa, um array. Se montando somente para um álbum com duas ou três faixas já é maçante, imagine então para vários álbuns com várias faixas cada um!!! Realmente um trabalho manual, senão braçal.
Novamente, como de costume, a preguiça é soberana e reina. A solução é automatizar a geração do arquivo, ou no meu caso, dos arquivos, para vários álbuns.
Vamos aos passos de como resolver essa questão.
A playlist que montei, não tem apontamentos para arquivos com nomes com caracteres especiais. No site do codebase, tem informações de como usar arquivos com nomes com espaços e outros caracteres, mas não tive sucesso nisso. Solução dada foi renomear os arquivos MP3 para o mais simples possível. Ex: 01 – Música.mp3 para 01.mp3 sem espaços ou caracteres especiais.
O exemplo acima mostra como deixei. Esse é um detalhe a atentar.
Para preencher os campos mp3, title e etc, utilizei a ferramenta exiftool.
Para instalar em distros Debian e derivados, é só usar o apt-get install exiftoll e pronto.
Essa ferramenta exiftool, serve para ler e escrever em arquivos de áudio, video e imagens. No site tem os formatos suportados.
A sequência para gerar o playlist.js é a seguinte:
O exfitool lê os arquivos mp3 no diretório, extrai as informações dos mp3s, gravando em arquivo.
O script usa o sed para ajustar a sintaxe exata exigida pelo player e grava o arquivo com o nome desejado na pasta js.
O script que fiz gera o arquivo com o formato exigido, aponta o arquivo de imagem da capa do álbum a ser mostrada pelo player. No script está descrito os detalhes de como é feito cada passo do processo. Tentei deixar os comentários o melhor detalhado possível.
Os ajustes de layout em html e css fica por conta de cada um. Eu utilizei um modelo que achei mais agradável e prático para o que eu quero. Você pode utilizar os laytous e/ou templates que achar mais adequado. O player pode se adequar em vários deles.
Abaixo deixo os links para o script e um modelo das páginas com um álbum de 3 arquivos mp3 como modelo.
Lembrando que o apropriado é utilizar as páginas com o player num webserver. Pode ser sua própria máquina.
Não é escopo deste artigo a instalação e configuração de um webserver Linux para isso. Se quiser pode acessar o artigo aqui, que tem as instruções para tal.
Shell Script - makelist.sh
Página de exemplo com arquivos de áudio, formato MP3s
