Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 268
Sexo: Masculino

Player de Musica

15-05-2013 11:09

Fala Galera,

Depois de rodar muito a web em busca de uma solução, venho aqui pra resolver mais um problema.

Tenho que tocar algumas musicas, aleatoriamente em um site.
preciso além de começar sozinha a musica, fazer com que tenha um player, que avance para a próxima musica, volte para outra musica, play, pause e stop.

Achei os códigos de áudio, embed e object.

O áudio funciona legal, mas não tem a opção de avançar ou voltar musica e não sei como colocar aleatório.

<audio controls="controls" height="50px" width="100px">   <source src="musicas/01.mp3" type="audio/mpeg" />   <source src="musicas/02.mp3" type="audio/mpeg" /> </audio>

O embed funciona tudo, menos o aleatório, o problema dele é a compatibilidade, não funcionou no chrome

<embed height="50px" width="100px" src="musicas/lista.asx" />

Alguem tem uma luz?

Valeu
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17735
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Player de Musica

15-05-2013 11:16

Como o embed se baseia em uma lista, você teria que randomizar o conteúdo dessa lista, ou criar a lista aleatoriamente, através de algum script.

Pode tentar também um player em HTML 5

<!DOCTYPE html> <html> <body>   <audio controls>   <source src="horse.ogg" type="audio/ogg">   <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>   </body> </html>

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 268
Sexo: Masculino

Player de Musica

15-05-2013 11:21

Em HTML 5 foi o que mais gostei.

O que não consegui foi colocar um botão para avançar e voltar ou seja, trocar as musicas.
Nem deixar aleatório.

Sera que tem como?
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17735
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Player de Musica

15-05-2013 11:30

Com um plugin jQuery chamado jplayer você deve conseguir
http://www.jplayer.org/0.2.1/demos/
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 268
Sexo: Masculino

Player de Musica

15-05-2013 11:58

vou testar e te aviso. valeu!!!
0
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 268
Sexo: Masculino

Player de Musica

16-05-2013 17:06

Funcionou belezinha parceiro, muito bom!

Só uma coisa que eu não achei.

Como começar a musica aleatória quando carregar a pagina?

Tipo um autoPlay, não achei.

Veja como ficou: http://www.fokusdh.com.br/teste.html

Se tiver uma luz agradeço
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17735
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Player de Musica

16-05-2013 18:13

Segundo consta na documentação do script, o usuário precisa fazer alguma ação para que o player comece a tocar, nem que seja um toque na tela para ativar.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 268
Sexo: Masculino

Player de Musica

16-05-2013 19:15

Entendi,, vc conhece algum que tenha troca de música e comece automático? Ou outra forma de fazer?
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17735
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Player de Musica

16-05-2013 21:49

Infelizmente não conheço. Só procurando mesmo.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 268
Sexo: Masculino

Player de Musica

21-05-2013 17:49

E aí Galera!

Pra quem estiver com o mesmo "problema" que o meu achei está solução.

é o numero 7 desta lista

http://www.jquery4u.com/plugins/10-jque ... 5-players/

7. jQuery Mp3 Player : julienMP3Player
https://github.com/juliend2/julienMP3Player
Demonstração: http://www.juliendesrosiers.com/demo/julienMP3Player/

Valeu pela Luz Web

Abraços
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17735
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Player de Musica

21-05-2013 20:04

Boa dica.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 268
Sexo: Masculino

Player de Musica

10-06-2013 10:46

Boas Web, tudo bem?

Peço mais uma ajuda em relação a este caso, para você ou quem puder ajudar.

Eu coloquei esse player no topo do site, em um iframe só para ele.

Mas quando troca de página, recarrega todo o site, inclusive esse iframe, não deixando tocar a música até o final sem trocar de página.

Tem como ir navegando no site normal e esse iframe não ser atualizado?

Segue o site para que você possa dar uma olhada.

http://www.fokusdh.com.br

Aguardo e obrigado

Abs
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17735
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Player de Musica

10-06-2013 10:54

Seu frame deve ter os names

<frameset.... <frame.... name="topo" <frame.... name="baixo"

Seus links de navegação devem apontar para o frame de baixo

<a href.... target="baixo"....

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 268
Sexo: Masculino

Player de Musica

10-06-2013 10:56

Então,

Mas como no começo não ia ter música, não fiz em frames.

Aí incluí um frame no topo para colocar o player.

Será que vou ter que colocar frame na parte debaixo?
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17735
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Player de Musica

10-06-2013 10:58

Ah, agora que li direito. Você usa iframe. :lol:

É, terá que usar o frame para ter o player sem atualizar com o carregamento da página.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 268
Sexo: Masculino

Player de Musica

10-06-2013 11:06

como faço isso não entendi...

Tem que criar um iframe para a parte debaixo ou tem outra saída?
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17735
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Player de Musica

10-06-2013 11:13

Você vai ter que pegar o index "php ou html", e reestruturar ele.

O index vai ter o seguinte:

<frameset rows="2%,*,98%"> <frame src="player.html"> <frame src="conteudo.htm"> </frameset>

O frame do topo vai ter o código do player, e o de baixo, o conteúdo atual de sua index.

Com esse código, seu link ficará fixo sempre no seusite.com/index.php, mesmo clicando nos links não muda a url no navegador.

Outra alternativa seria se sua navegação do site fosse toda em jQuery, sem atualizar a página.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 268
Sexo: Masculino

Player de Musica

10-06-2013 13:52

Deu certo em iframe,

em Frameset não consegui, ele da erro do jeito que vc colocou aí em cima.

Mas até ai tudo certo, o que não cconsegui é deixar altura automática em outro browser que não seia o IE.

Tem outra forma pra deixar altura automática?

Veja como fiz abaixo

<script type='text/javascript'> function iframeAutoHeight(quem){         if(navigator.appName.indexOf("Internet Explorer")>-1){ //ie sucks         var func_temp = function(){             var val_temp = quem.contentWindow.document.body.scrollHeight + 85             quem.style.height = val_temp + "px";         }         setTimeout(function() { func_temp() },20) //ie sucks     }else{         var val = quem.contentWindow.document.body.parentNode.offsetHeight + 75         quem.style.height= val + "px";     }     } </script>


<iframe name="baixo" src="home.html" width="900px" onload='iframeAutoHeight(this)' frameborder="0" scrolling="no">

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17735
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Player de Musica

10-06-2013 14:23

Baixa e testa os arquivos desse link de iframe com altura automática. https://github.com/house9/jquery-iframe-auto-height

Se desejar, testa esse aqui

Exemplo do documento chamado pelo iframe

<style> body{margin:0 0;} </style>


<table height="200" border="1"> <tr> <td>abc</td> </tr> </table>

Exemplo da chamada do iframe

<script src="jquery.js"></script>       <script type="text/javascript"> $(document).ready(function () {   // Set specific variable to represent all iframe tags.   var iFrames = document.getElementsByTagName('iframe');     // Resize heights.   function iResize() {     // Iterate through all iframes in the page.     for (var i = 0, j = iFrames.length; i < j; i++) {     // Set inline style to equal the body height of the iframed content.       iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';     }   }    // Check if browser is Safari or Opera.  if ($.browser.safari || $.browser.opera) {     // Start timer when loaded.     $('iframe').load(function () {     setTimeout(iResize, 0);     });      // Safari and Opera need a kick-start.    for (var i = 0, j = iFrames.length; i < j; i++) {      var iSource = iFrames[i].src;      iFrames[i].src = '';      iFrames[i].src = iSource;    }  } else {     // For other good browsers.     $('iframe').load(function () {     // Set inline style to equal the body height of the iframed content.     this.style.height = this.contentWindow.document.body.offsetHeight + 'px';     });   } });     </script>

Fonte: http://stackoverflow.com/questions/1433 ... nt-changes
<iframe name="baixo" src="teste2.php" width="900px" onload='' frameborder="1" scrolling="no">

Testado e funcionado: IE, Opera e Chrome.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 268
Sexo: Masculino

Player de Musica

10-06-2013 15:18

estou testando, mas não entendi a parte do onload neste código:

<iframe name="baixo" src="teste2.php" width="900px" onload='' frameborder="1" scrolling="no">

ficaria assim????: onload=""
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17735
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Player de Musica

10-06-2013 15:36

Esse onload veio do código que você postou. Não serve de nada ai.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 268
Sexo: Masculino

Player de Musica

10-06-2013 15:46

rs...

Cara, vai ter que me desculpar...

No final deu tudo certo, mas com o <frameset>

Muito mais simples, eu que em vez de colocar no head, coloquei no body, por isso não dava nunca mesmo, rs

Agora está certinho, se quiser da uma olhada lá!

www.fokusdh.com.br

Valeu mais uma vez e grande abraço!
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17735
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Player de Musica

10-06-2013 15:50

Testei, está funcionando ok. ;)
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado