Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Gustavo Diniz

Player js + html

Por , em Javascript

Recommended Posts

Gustavo Diniz    1

Gustavo Diniz
Postado

Preciso adicionar musicas ao site em que estou trabalhando.

O html5 fornece a tag <audio> para isso mais acontece que só consigo adicionar uma musica. Preciso adicionar uma serie de musicas e que comecem meio que aleatoriamente para que quando a pessoa entre no site não seja sempre a mesma musica inicial ao entrar.

 

EXEMPLO: http://www.marceloca.../76/1/portfolio

EXEMPLO: http://www.evandroro...samentos.asp#v3

 

Os dois sites citados acima são players em flash.

 

Prefiro utilizar o proprio html5 para isso mais qualquer ideia é bem vinda.

 

Obrigado pela ajuda.

Abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

paulojuchem    20

paulojuchem
Postado

vc ta ligado que <audio> so roda em navegadores que suportam tal tag(i.e. qualquer um menos internet explorer), segue um exeplo +- de como ficaria o que voce quer

 

ta ai mastigadinho

 

 
<html>
    <head>

        <script type="text/javascript">

            window.onload = function(){

                console.log("a");
                var musicas = new Array();
                //altere o caminho do src para o que voce precisa, cada push que voce der na array com o destino correto deve funcionar
                musicas.push({
                    nome     : "high way to hell" ,
                    src        : "/Users/paulo/Documents/musicas/hth.mp3"
                });

                musicas.push({
                    nome     : "back in black" ,
                    src        : "/Users/paulo/Documents/musicas/bib.mp3"
                });

                var musica_selecionada_aleatoriamente = Math.floor((Math.random()*musicas.length-1)+1);
                var player = document.getElementById("player");
                var src = document.createElement("source");
                src.setAttribute('type' , "audio/mpeg");
                src.setAttribute("src" , musicas[musica_selecionada_aleatoriamente].src);
                console.log(musicas[musica_selecionada_aleatoriamente].src);
                player.appendChild(src);
                player.play();

            }

        </script>

    </head>

    <body>

        <audio id="player" controls='controls'></audio>

    </body>
</html>

 

ATENCAO

You can't play mp3 files in firefox, it does not support them, you need an ogg version for firefox. Unless that changes, good to keep in mind.

 

referencias

http://stackoverflow.com/questions/10407031/create-a-html5-audio-and-play-it-doesnt-work

Compartilhar este post

Link para o post
Compartilhar em outros sites

paulojuchem    20

paulojuchem
Postado

colabore comigo entao =p

qual navegador voce utilizou?

voce alterou o valor das variaveis com os destinos das musicas para ficar igual ao que existe na sua maquina?

coloque abaixo exatamente o codigo que voce esta utilizando, se voce for utilizar arquivos mp3, abre no chrome, se for ogg pode rodar no firefox. o codigo acima funciona, eu mesmo testei, estou no aguardo da sua resposta

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gustavo Diniz    1

Gustavo Diniz
Postado

Grande Paulo.

 

Cara comigo acontece o seguinte.. Mudei por diversas vezes o caminho da musica mesmo assim não o player não tem função nenhuma.

Testei em todos os navegadores e adicionei tanto .mp3 como .ogg

Estive olhando e não sei se você tem conhecimento desse plugin -> http://www.jplayer.org/

Só que não encontrei nenhuma implementação do mesmo para que pudesse me basear.

 

 

<script type="text/javascript">

 

window.onload = function(){

 

console.log("a");

var musicas = new Array();

//altere o caminho do src para o que voce precisa, cada push que voce der na array com o destino correto deve funcionar

musicas.push({

nome : "first day of my life" ,

src : "C:/wamp/www/site/music/first-day-of-my-life.mp3"

});

 

musicas.push({

nome : "dream" ,

src : "C:/wamp/www/site/music/dream.mp3"

});

 

var musica_selecionada_aleatoriamente = Math.floor((Math.random()*musicas.length-1)+1);

var player = document.getElementById("player");

var src = document.createElement("source");

src.setAttribute('type' , "audio/mpeg");

src.setAttribute("src" , musicas[musica_selecionada_aleatoriamente].src);

console.log(musicas[musica_selecionada_aleatoriamente].src);

player.appendChild(src);

player.play();

 

}

 

</script>

 

<audio id="player" controls='controls'></audio>

 

 

Como posto imagens para mostrar o site?

 

 

Caso seja possivel me adicione no msn -> photogustavo@hotmail.com

 

Agradeço a atenção

Abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

paulojuchem    20

paulojuchem
Postado

desculpe a demora, o seu src parece equivicado, tente da segunte forma

musicas.push({
nome : "first day of my life" ,
src : "/site/music/first-day-of-my-life.mp3"
});

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito