[TUTORIAL] Como adicionar trilha sonora em seus posts

Olá! Tudo bem?

Nesse tópico eu vou explicar como qualquer membro do fórum, jogadores ou mestres, podem colocar trilhas em seus posts. Com a trilha certa você pode dar o clima ideal para a cena que você descreveu, empolgar seu jogador para uma batalha ou deixá-lo tenso para uma cena de suspene, por mais que ele esteja sentado na frente do computador, e não numa mesa de RPG de verdade. Vamos lá!

Primeiro passo e o mais óbvio, saiba qual música você deseja colocar como trilha. Com isso definido, acesse o 4shared, site será disponibilizado um espaço para hospedarmos nossas trilhas. Já no site, você verá o espaço onde deverá fazer o login.


Vocês devem ter percebido que podemos fazer login usando nossas contas do facebook ou twitter, mas a ideia é criar um arquivo para uso de todos aqui do fórum, uma biblioteca de áudio, por isso nós faremos o login direto no site. Após clicarem em 'Login', a seguinte tela se abrirá.


Feito o login, será carregada a página principal, onde todas as pastas estarão visíveis.


Eu já criei a minha pasta, agora vamos criar a sua. Acima das pastas temos um menu com diversos botões, e um deles, o Nova Pasta (ou New Folder), é o que usaremos.


É só clicar nele e uma pasta surgirá logo abaixo. Coloque o nome que preferir (de preferência o seu nome) e clique enter. A pasta está criada. Depois de criada, sua pasta irá aparecer na página inicial, junto com as outras. O próximo passo é subir suas músicas. Na mesma linha de "Nova Pasta", temos o botão "Envie". Clique nele, selecione a música desejada, a pasta onde deseja salvá-la, e clique em 'ok'. Uma barra na parte de baixo da janela irá mostrar o progresso do upload da sua música.



Depois do upload completo, é hora de partirmos para a parte que importa. Nós vimos apenas como hospedar a música no 4shared, agora vamos aprender a integrar essas músicas aos nossos posts. Entrando na pasta para onde enviamos a música, veremos apenas seu nome e algumas informações, como o tamanho dela. Passando o mouse pelo nome, percebemos que ele é também um link. Clique nele e outra aba, como na imagem abaixo, será aberta.


Entre muitas informações, vemos um botão represetnado pelo íconne "". Este é o botão "embed", ou "embutido". O link que nós usaremos é gerado nesta opção, cliquem nele e uma janela será aberta. Nesta janela teremos algumas opções e uma linha chamada "códio incorporado".


Antes de copiá-lo, confirmem se a opção "Mini 530x60px" está selecionada. As outras versões são muito grandes para o post. Também é possível personalizar um pouco o player, para isso precisamos selecionar uma das três opções da coluna "Additional Options". Se selecionarmos a opção "Artwork", o player virá com a capa do álbum:


Se selecionarmos a opção "Cover", teremos uma versão com a capa do álbum esticada por todo o player:


E, por fim, se selecionarmos a opção "Light scheme", o player fica branco. Essa opção é útil para criar contraste entre o player e o fórum.


Não há mais nada a ser feito, agora só é preciso copiar o código e colá-lo no post, mas ainda existe a opção de deixá-lo mais curto, ocultando o noma "4shared". Nó código, temos duas variantes: height e width.

src='http://www.4shared.com/web/embed/audio/file/5YDCfR0wba?type=MINI&widgetWidth=530&playlistHeight=0&widgetRid=451187030528' style='overflow:hidden;height:60px;width:530px;border: 0;margin:0;'

Height significa altura e width é largura em inglês. Alterando estes dois valores, nós configuramos o tamanho do player conforme o nosso gosto. Teste, mude os valores, experimente. Só assim você vai chegar no tamanho do player que lhe agrade, apesar de que nessa nova versão do código, o botão de play não é centralizado automaticamente, mas fixo em um ponto, o que pode atrapalhar em players muito finos. Um que eu aconselho é o tamanho abaixo.

src='http://www.4shared.com/web/embed/audio/file/5YDCfR0wba?type=MINI&widgetWidth=530&playlistHeight=0&widgetRid=451187030528' style='overflow:hidden;height:60px;width:290px;border: 0;margin:0;'

Width em 440px é o mínimo para que o player não tenha mais o "4shared" do lado, mas ainda é possível ver os botões para baixar a música e ir para a página onde ela está hospedada. Com a largura em 290, todos estes botões são ocultados

Player sem alteração na largura:



Player com o widht em 440:



Player com o widht em 290:



Pronto! Agora você pode fazer posts mais envolventes usando a música certa! Ainda é possivel usar as tags [ left ][ /left ] [ center ][ /center ] e [ right ][ /right ] para posicionar o player aonde você preferir.

Boa noite e boa sorte!