Código para instalar uma Rádio Online no seu site

Código para instalar uma Rádio Online no seu site

Hoje recebi um email de um visitante que adicionou uma rádio em seu site, porém sempre que uma nova página era carregada o player reiniciava.

Isso é muito comum de acontecer porque geralmente os webmasters colocam o player dentro das páginas do site, quando na verdade o player tem que ser colocado em uma página separada, que chamaria o restante do site utilizando um Frame.

Você pode conferir um exemplo aqui.

Código para instalar uma Rádio Online no seu site

A estrutura
No exemplo do player, a página é formada por 2 páginas + a página do site.
1 – Index.html
2 – player.html
3 – Página inicial do Site.

Você pode fazer o download dos arquivos do frame aqui.

Editando os arquivos
Para fazer com que seu site apareça no frame, edite o arquivo index.html em um editor de sites e troque o atual endereço pelo endereço do da página principal do seu site.

Neste exemplo foi utilizado a rádio oferecida pela Rádio Hunter, porém você pode adicionar qualquer outra rádio editando o arquivo player.html em um editor de sites como o DreamWeaver ou mesmo o NVU.

Se quiser que a rádio seja acessada a partir do endereço principal “www.seusite.com”, terá que manter o nome do arquivo index.html e renomear o arquivos da página principal do seu site para index2.hmtl (ou outro nome de sua escolha).

Notas Este tipo de arquivo não pode ser hospedado em sites de criação de sites que não oferecem acesso via FTP como Webnode, Blogger, Ucoz, Weebly, etc.

Gostou do Artigo Código para instalar uma Rádio Online no seu site? Ainda tem dúvidas ou sugestões sobre a instalação? Então deixe um comentário abaixo.

Sobre Celso Lemes

Celso Lemes é Blogueiro profissional. Vivo de blogs, blogo para viver, vivo blogando, blogando eu vou vivendo.   Baixe grátis o e-book 12 Passos para Divulgar seu Site ou Blog.
Adicionar a favoritos link permanente.

86 Comments

  1. Como faço para editar esses arquivos?
    Desde já obrigado pela taenção!

    Francisco.

  2. Não gosto de colocar radios em meus sites, pq quem tem uma net ruim, quando vai entrar no site demora uma eternidade, fica td pesado por causa das radios.
    Fiz o teste já em uma net discada e uma banda larga.

    a banda larga carregou rapidinho, enquanto a discada demorou pra caramba.

    depois refiz o teste mas num site sem radio.

    a discada foi rapid[bem mais rapido do q com o site que tinha a radio], a banda larga entao nem se fala, de tao rapido que foi.

    • Mr. Cobain,
      Realmente isso acontece, para quem quer evitar isso uma opção seria oferecer um link com a rádio e outro sem a rádio.

      Abraço!

      • ola. Estou precisando fazer o download dos arquivos do frame para Rádio online no seu site, o que fica no topo da página e roda nas outras sem interferência, aki no site não consegui baixar, ficarei grato em me enviar. Um abraço, bom trabalho.

  3. Opa pessoal, como faço para alinhar o player a parte de baixo?
    Abraço.

  4. Murilo,
    Você teria que editar o código em um editor de sites, porém se você não tem conhecimento isso pode ser um pouco complicado e nem daria para explicar aqui.

    Abraço!

  5. eu entendi como se coloca uma barra de web radio ja pronta em meu site, muito facil e a video-aula bem clara, porem eu preciso de uma barra como essa demostrada no video, sera q poderia fazer uma materia ensinando isso?
    muito obridago, vcs aqui da criarsites, são sempre perfeitos sou fã

  6. Andre,
    O código desta barra não serve? É só você editar ele para o que você precisa.

    Abraço!

  7. olá… Instalei, mas quando clica em início abre um novo banner, ou seja, toda vez que alguem volta prá página inicial abre um novo play. Se alguém souber dá uma dica aí…

  8. Olá pessoa vir esse videio no youtube achei super legal play super interativo videio aula gostária de saber alguem tem videio ensinado como ser faz esse play passo a passo to procurando tuturial desse tempo vir diversos mas nenhum chego perto do videio que assintir na videio aula quem poder me aruma tuturial ficarei muito grato vlw!!! 😉

  9. Geovane,
    Você queria saber como criar o player de música? Se for isso eu não posso ajudar porque não tenho conhecimento sobre criação de rádios online.

    Abraço!

  10. Boas Celso, como faço para instalar essa rádio no wordpress já que o ficheiro que ele carrega é o index.php e não index.html.
    Tentei várias formas mas deram erradas.
    Por favor me ajuda

    • Tiger,
      No WordPress não teria jeito de fazer isso com a página inicial, você teria que criar uma página extra com a rádio. Por exemplo seusite.com/radio
      Depois dentro do seu blog, você colocaria uma mensagem do tipo “Navegue ouvindo a rádio” ou algo assim.

      Abraço!

  11. Celso Lemes aki é o Ronald é o Seguinte fiz um blog de downloads e queria coloca uma radio la tipo pra mim ser o locutor e tals mais queria fazer grátis como eu faço vc pode me ajudar como fazer uma?
    abraÇOs

    • Ronald,
      Para criar uma rádio do jeito que você quer, seria necessário um servidor especial com suporte a streaming. O problema é que estes servidores são caros e não existe nenhum que seja de graça.
      Além disso, você vai precisar de um script apropriado que também custa $$$$.

      Abraço!

      • o celso tem razão eu tbm estou a desenvolver uma radio e para isto vc vai precisar de um servidor estream nota;este é diferente da sua hospedagem tradicional,existem varios preços de stream os mais caros são os com numero de ouvintes ilimitados ,apo´s isso vc vai precisar de um player e nesse palyer vc devera inserir o teu link de stream ,nota:caso vc use joomla ou wordpress na criaçaõ do site os mesmos tem plugins gratis de player bastando apenas vc ter o estream upar as musicar agendar programçaõ e inserir o link no player,caso vc naõ use as paltaformas citadas acimas devera usar um palyer por meio de codigos procura na web que vc vai acher muitos bons e free boa sorte aew

  12. Gilberto Rezer

    Caro Amigo.
    Criei um site no Wix. Gostaria de inserir uma rádio nele, a partir do programa ZaraRadio. Segui os passos também do frame mas não sei como publicar os arquivos HTML. Poderia me dar uma ajuda a respeito?

  13. Olá,

    Gostaria de criar um site com uma radio … so que no meu caso eu criaria meu site com o web acapella , o que eu devo fazer para que o player não pare ao mudar de pagina ?

  14. celso eu fiz um site no webacappella tals deu certinho coloca isso que c mando fiz ums coisa lah funfo so tem um poren quando eu clico no inicia ai ele volta pra home fika dois player por que sera ?

  15. RICARDO BA$$MAN

    por adm do site…fiz tudo certinho e não consegui colocar a radio no ar…esta mesma que esta ai;
    por favor algume me ajude!
    desde já obrigado!

  16. Ricardo,
    Se você me falar o que está acontecendo ou que não está conseguindo eu poderia te ajudar, mas assim não tem jeito.

    Por favor coloque mais informações para que eu possa te ajudar.

    Abraço!

  17. Olá, galera to criando um script, pra quem deseja criar uma radio online, com auto dj e com locutor online, tudo controlado pelo painel de controle,
    quem tiver afim de saber do andamento do script so fica ligado no blog, pq quando terminar postarei aqui pra download, falow

    Obs. Sistema em Php e Mysql.
    e-mail: renan.kayro@gmail.com

  18. Explicando a estrutura:

    index.html – pagina livre que abre o player e o index.php do site original joomla
    dir.htm – direciona para index.php do site joomla
    player.htm – é exibido no arquivo index.html
    pasta1 – (arquivos flash player)
    pasta2 – (onde está localizado o site)

  19. Oii Celso Lemes Queria sabe como coloca uma Rádio online eu falando ta ligado igual muitos sites ai,, tipow coloca radio na webnode eu sei so que outra radio de outro site issuh e facil mais quero monta a minha eu colocando as musica eu mandando alo pra galera será que tem como? vlw manolo espero a resposta

    • Maciel,
      Aí você teria que usar um sistema de streaming e um script que se encarregue de gerenciar o player e as músicas. Eu não entendo muito bem sobre isso, mas você pode utilizar a RJHost que oferece planos de streaming com o script de gerenciamento.
      Ps. Não existe empresas que ofereçam hospedagem com streaming de graça.

      Abraço!

  20. eu não preciso de muita ajuda , meu site está perfeito com a radio Flogão , mais essa radio não está satisfazendo o pessoal e eu gostaria de colocar mais uma alguem ai tem o código ? Agradeço antecipadamente !

  21. e ai galera, to aqui dinovo pra dizer que aquele site que eu prometi em php +mysql, to quase terminando e posto aqui.

    pra quem nao sabe eu criei um site em php e mysql, pra quem ta começando agora com webradio e não quer gastar dinheiro com estreaming eu criei um sistema, que cria uma playlist aleatoria, e que tambem tem como ser locutor, esse sistema como eu disse vai ser so uma alternativa pra quem quiser ter uma web radio, daqui uns dias posto pra vcs fazerem o download.

    aqui a minha radio, radio-satellite.totalsfree.com

  22. Eu queria saber se o blog blogge eu recarregar a página o blog tendo so uma página so a principal sem outras páginas se eu recarregar a página o player reenicia?,também eu queria aaber como eu faço pro meu streaming ficar sempre on no listen?

  23. ReinaldoDesign

    Boa tarde…

    Legal o tópico….. Mas tenho outra dúvida! Faço um programa em uma rádio e tem o site do mesmo… mas vive dando problema no site…. teria como eu colocar o rádio que faço o programa no meu próprio site? Não ficando refém do site da rádio? O cabo da mesa de som eu coloco no meu note…. mas não sei o procedimento para colocar no ar pelo meu site.

    Grato!

    Reinaldo

  24. Olá Reinaldo, boa tarde. Tem como você fazer o que quer, porém precisaria como o Celso citou, contratar um serviço de streaming (se precisar fale conosco). Dessa maneira é instalado um encoder em seu computador que será responsável pela transmissão do áudio. Existe uma forma gratuita de criar um streaming localhost pela sua máquina, porém os ouvintes se conectariam direto ao seu pc através de uma porta especifica, o que além de deixar a conexão baixa (pois quanto mais ouvintes, maior o consumo de banda) também oferece riscos, pois uma porta do seu pc está liberada pelo firewall para a transmissão. O ideal é a contratação de um serviço.
    Uma boa tarde a todos, fiquem na paz!
    Marcelo R.

  25. Marcos de Souza

    OLa Celso Blz eu estou com 0 mesmo Problema do Jeferso Li a sua resposta mas nao consigo deixar o Arquivo sem o .HTML no programa teraia como Fazer isso No bloco de Nota do Index2

    Jeferson Nunes Arantes Fuhr 29/06/2011 às 8:45 pm
    Ola gente. Eu fiz exatamente o que o tutorial ensinou, contudo tenho um pequeno problema … o player ta la certinho e tals, clico nas páginas e ele continua funcionando … massssss… quando eu clico denovo na página inicial ele carrega +1 player.
    Ou seja, quando clica umas 10 vezes na página inicial, ele abre 10 player 1 em baixo do outro … pra sumir só se der F5.
    Ola gente. Eu fiz exatamente o que o tutorial ensinou, contudo tenho um pequeno problema … o player ta la certinho e tals, clico nas páginas e ele continua funcionando … massssss… quando eu clico denovo na página inicial ele carrega +1 player.
    Ou seja, quando clica umas 10 vezes na página inicial, ele abre 10 player 1 em baixo do outro … pra sumir só se der F5.

    • Marcos,
      Acredito que o link da inicial esteja apontando para seusite.index.html (ou algo assim). Neste caso basta retirar o index.html e deixar apenas o endereço principal do site no link. O próprio servidor se encarrega de enviar o visitante para o index.html

      Abraço!

  26. Olá, Celso se eu num entendir direito, assim baixando o frame e tal, edito e tal e daí mando os 3 arquivos para um hospedeiro correto? Daí que o frame né irá apareçer idenpendente de onde esteja hospedado ou feito site/blog aquela barra? ‘-‘ Exemplo, tenho um blog do blogspot, ai fiz essa coisas todas do frame e hospedei e tal, ai qndo eu abrir o blog ele irá apareçer o frame pois está hospedado em um servidor ae e nisso resulta de que posso fazer em qualqer site e ou blog, pq o mesmo está hospedado em outro lugar dai ele irá apareçer em qualqer construtor? ou não?

  27. Rafael - RAEL CDs

    Tenho um Blog na plataforma Blogspot e vou criar uma rádio e quero colocar no blog mais tenho um domínio .com e queria saber se hospedando esses arquivos como o index2 teria que mudar algo no blog ou só precisa hospedar cada um mudando os links ?
    Se vc me esclarecer ficaria grato pq tenho algumas dúvidas ainda sobre isso. Valeu Abraços!!!

  28. Coloquei o frame da rádio,mas há um problema,toda vez que clico na minha página principal aquela barra da rádio duplica,triplica etc…Como faço para corrigir isso.

    • Felipe,
      Seria melhor se eu estivesse olhando o seu site para dizer o que tem de errado. Mas pelo que eu já vi por aí, esse problema acontece porque o link que leva para a Inicial está apontando para o arquivo seusite.com/ index.html. O ideal é que ele aponte apenas para o domínio principal, tipo seusite.com

      Abraço!

  29. Fernando Moraes

    ola eu tenho um site com uma web radio mais toda vez q clico em uma aba do meu site ele corta o audio do streaming? como faço para colocar um iframe e resolver esse problema? obrigado fernand

  30. Queridos,
    funciona bem legal e de maneira facil, parabéns!
    Gostaria de saber como faço para editar o layout da radio para ficar com a cara do meu site e os links do face e do twiter.
    Desde já agradeço a atenção!

  31. Bom dia,
    No momento ainda não registrei o dominio próprio para meu site. Por se tratar da Webnode, logo apos passar a ter o dominio sera possivel a colocação da radio? Muito obrigado. Se possivel responda para o email.

    • Edson,
      No Webnode não tem como colocar uma rádio de forma que ela sempre toque, mesmo quando o visitante mude de página, ele é muito limitado neste sentido. Se você quer algo mais flexível para customização deste tipo, recomendo que utilize uma hospedagem profissional e instale um sistema CMS como o Joomla ou WordPress.
      Mas repare que mudar de um construtor de sites para um sistema CMS é um grande passo. Você terá que aprender muita coisa que não seria necessário se estivesse usando o Webnode.

      Abraço!

  32. Vinícius Oliveira

    Celso, acompanho o site.. e queria uma ajuda agora que preciso, pode ser? 🙂
    Queria um tipo de Rádio, na qual eu possa transmitir ao vivo daqui de casa .. não precisa suportar muitos ouvintes, pois seria mesmo mais um ” hobbie ” para eu e meus amigos aproveitarmos os tempos monótonos.
    Queria ajuda para algum tipo de rádio, no qual eu possa ter minhas músicas ao vivo, e que eu possa ” falar ” ao vivo também.
    Obrigado! ;D

    • Vinicius,
      Até onde eu sei, você precisa de um servidor de streaming para transmitir áudio do seu pc para os ouvintes. O problema é que este tipo de hospedagem costuma ser um pouco mais cara que a convencional. Procure no Google por hospedagem com streaming.

      Abraço!

  33. renato patrick

    ola celso segui suas instruções abril legal mais no menu quando mando abrir as outras paginas ele carrega a pagina toda e o web radio num aparece mais so esta aparecendo da pagina inicial do site oque pode estar acontecendo
    aguardo retorno

  34. Olá João, entrei no sei site e verifiquei que para que sua rádio toque ao invés da que está autalmente, vc precisa trocar o numero do ip que está, pelo ip da sua rádio….
    A alteração é no seguinte arquivo:

    Onde está o “http://212.7.201.164:8090” vc substitui pelo ip da sua radio .

    Espero ter ajudado!
    Abraço

  35. Muito Obrigado..

    Já está a funcionar com a radio que queria.. falta só adicionar um botão para que os visitantes do meu site possam parar a musica sempre que desejarem, ……

    Mais um vez muito obrigado por resolver o meu problema

    • Se sua rádio usar o sistema explicado aqui. Na página player.html, você irá criar um botão que ira redirecionar para outra página ex: playerstop.html, aí quando a pessoa clicar ela acessará a outra página, que não terá o player, então não irá tocar, aí na página playerstop.html, você cria um botão que redirecionará para a página player.html caso a pessoa queira voltar a ouvir a rádio. Se ficou alguma dúvida, só responder o comentário, ok? falow

  36. Olá Renato, boa noite. Os streamings montados pelo lysten2myradio funcionam da seguinte forma: para que outros ouvintes possam ouvir sua rádio, é necessário que o player principal (aquele que fica na página deles tocando sua rádio) esteja aberto “constantemente”. Sendo assim, faça um teste abrindo no seu pc o player da sua radio, verifique se o servidor está ativo e rodando e logo após verifique se tem som. Caso vc consiga ouvir sua radio, sem fechar o player principal , peça para alguem acessar a url de audição para ver se consegue ouvir sua transmissão. É bem provavel que consigam, pois esta é uma tecnica usada pelo listen para que os ouvintes acessem sempre a area deles. (PS: mas dá pra embeber o código em um player de topo por exemplo). A explicação foi meio longa, mas espero ter ajudado, qualquer duvida, conte conosco.

  37. Amigo, com vai? li toda a explicação, e realmente me foi MUITO útil, mas não consegui implatá-lo, devido trabalhar com WordPress… Teria alguma forma de criar este sistema com o WordPress?

    Agradeço a atenção e a aula.
    Espero sua resposta o mais rápido possível.
    Muito obrigado!

    • Olá Matheus,
      Você teria que publicar o WordPress dentro de uma pasta chamada “blog” por exemplo e na pasta raiz que é onde se encontra os arquivos do seu blog, você deve deixar os arquivos da rádio.
      Existe uma alternativa para mudar um blog de pasta e manter ele funcionando, mas isso requer algum conhecimento sobre como mexer no banco de dados. Neste caso você teria que reinstalar o WordPress diretamente nesta pasta desejada.

      Abraço!

  38. Muito obrigado a ajuda Celso, mas acho q seria inviável para mim fazer todo este procedimento, uma vez que ja tenha links espalhados pela web, imagens, e muitos artigos, teria realmente que reinstalar tudo, iria dar muito trabalho, mas agradeço desde já a ajuda…

    E Parabéns pela explicação, finalmente achei alguém que soubesse explicar! =D

  39. Evanilson leite

    olá celso….
    como faço para colocar uma radia especifica usando esse material do dowload ????

    aguardo !!

  40. Amigo primeiramente quero agradecê-lo pela matéria. Gostaria de uma informação: Sou um pouco leigo no assunto de programação… É o seguinte, tenho um site na “Weebly” gostaria de implantar um pequeno player em HTML ou CSS com algumas músicas para rolar no fundo do meu site sem pausa enquanto navego nas páginas. Seria possível fazer isso em um site da “Weebly”?

  41. Elias Jr Cescon

    Olá, muito bom o tutorial, eu procurava exatamente isso.
    Só uma coisa, eu tenho 4 páginas no meu site quando volto para a página principal está abrindo o player novamente. Alguma dica?

  42. Boa noite!
    Jhoey, você só conseguirá fazer isto com PHP que é uma linguagem dinâmica, com apenas HTML, isto é impossível pois HTML é uma linguagem fixa. Pra mim ver se tem como ser feito por PHP, preciso saber onde é que está hospedado seu site, se é domínio público, ou pago, e se a sua rádio é interna ou externa(de outros sites). E me passe o link do seu site pra mim dar uma confirida, ok? falow

  43. Acabei de visitar seu site, e vi que resolveu o problema da lista .. Só que eu ví que tem textos além da lista ex: ‘SHOUTcast D.N.A.S. Status’ .. só que tem como tirar se quiser que eu te ajudo com isso só responder nos comentários.

  44. ola gostaria de saber se e possivel eu instalar somente o player do radio no site,sen o script de radio so o player

    • Olá Misael,
      Neste caso é só você terá que procurar por uma rádio que ofereça o player. Ultimamente as rádios pararam de oferecer o player para ser colocado em outros sites devido ao alto custo com o servidor.

      Abraço!

  45. Caro Celso, lendo as dúvidas nos comentários, resolvi tirar uma que tive ao ler a matéria. Segundo a nota: Este arquivo não pode ser hospedado no blogger por exemplo. Pois bem, gostaria de sua ajuda pois não achei nenhuma explicação na net. Tenho uma web rádio grátis da Listen2myradio (radioepistolagospel.radio12345.com)e queria colocá-la no meu blog de mesmo nome (radioepistolagospel.blogspot.com.br)e até já consegui com um visual muito leigo, mas funcionando. Acontece que eu realmente gostaria de que o player não parasse de tocar a musica ao carregar a página, e eu não sou muito bom em códigos html. Me ajuda cara, por favor. PS…Quanto custa pra fazer pra mim

    • Olá Luiz,
      Como eu citei, no Blogger ou outro construtor de sites como o WEbnode não tem jeito de instalar rádios de forma que ele não reinicie ao recarregar a página.
      Teria que ser em um blog em uma hospedagem profissional.

      Abraço!

  46. Continuando…Celso seria possível também colocar o “Status” da musica tocando agora. Eu preciso dessas duas coisas na minha rádio, é muito importante. 1º não parar de tocar ao carregar a página e 2º Saber qual musica está tocando agora, entende. Qualquer coisa entra em contato comigo.

  47. Jair Radialista

    CRIEI ESTA MINHA RÁDIO NO WIX, AGORA COMO FAZER PARA QUE ESTA RÁDIO TENHA SUA PROPRIA PROGRAMAÇÃO COM LOCUÇÕES AO VIVO, VINHETAS, COMERCIAIS, HORA CERTA E MUSICAS?

  48. Segui alguns dos seus passos para acoplar web radio com o web site.. mais não deu certo.. site esta sendo criado no wordpress e quero colocar uma web rádio nele.. só que o site não aceita a linguem de programação que forneço a ele.
    gostaria que se pudesse me ajudasse.. obg..

    • Olá Gabriel,
      Tem que ver se a hospedagem em que você está tentando publicar os arquivos do iframe são suportados. Tente entrar e contato com o suporte da empresa.

      Abraço!

  49. Olá pessoal, poderiam me ajudar. Tenho uma webradio com um site administrável. No topo do site aparece a música que está sendo tocada no momento. Gostaria de colocar no site as últimas 10 músicas tocadas. Para isso, o site administrável possui um campo onde posso colocar um módulo livre em html. Só não sei como fazer esse html. Obrigado

  50. ola boa tarde

    tenho uma web radio e gostaria q ela tocasse na minha pagina e no grupo do face.

    mas automatico, ou seja qq um q abrir o face vai escutar a radio automaticamente

    • Olá Luis,
      Isso não é possível no Facebook ou qualquer outro serviço do gênero. Você só conseguiria fazer isso em um site que você mesmo tenha feito.

      Abraço!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *