¿Cómo insertar mi radio en mi web?

[zupulido]

  Hola, estoy haciendo una web para una estación de radio (Radio Progresando 93.9 FM) y deseo utilizar el reproductor que coloqué en mi página http://radioprogresando.com/escucha-en-vivo.html , pero no tengo idea  de cómo se hace. Transmitimos con el software ZaraRadio. ¿Podrían ayudarme con eso, por favor?

Gracias y saludos de antemano

[Dj Morenoh]

A traves de codigo HTML

[zupulido]

Hola Dj Morenoh,

Tal vez parezca estúpida mi pregunta, lo que ocurre es que nunca he insertado una radio en una web y quisiera utilizar el diseño del reproductor que tengo en mi web y no cualquier otro como el winamp.

Y la verdad, tu respuesta es más cínica que otra cosa, es lo mismo que decir: "Hazlo a través de Internet". No entiendo ¿cómo pierdes tu tiempo en el foro para hacer ese tipo de comentarios, si no deseas colaborar?

Los foros son para ayudar, no para burlarte de quienes hacen preguntas de novato.

[Dj Morenoh]

Perdona, pero para poner una radio necesitas hacerlo a través del código HTML.

Como tu has dicho: "deseo utilizar el reproductor que coloqué en mi página" pensé que ya lo habrías puesto con anterioridad con el código HTML. De ahí mi respuesta: "A traves de código HTML."

Mi respuesta no ha sido cínica en ningún momento, ya que he contestado a tu pregunta.
No pierdo el tiempo en el foro ya que todos mis comentarios, siempre son para echar una mano o preguntar yo algo.

Asi que si crees que soy de los que les gusta tocar los huevos a los novatos o a gente novata en depende que aspectos, te equivocas, ya que los que me conocen en persona, como los que me conocen por el foro, saben perfectamente que no soy de ese tipo.

Antes de contestar lo que me has dicho, podrías haberme preguntado por aquí o por privado, si me estaba mofando de tu pregunta o era una respuesta a tu pregunta.
También me podías haber dicho que no tiene ni idea de lo que es el código HTML y yo mismo te aclaro las dudas.

Saludos.

[zupulido]

Por lo visto, no me expliqué correctamente en el mensaje original y, ya que no te estás burlando, te explico un poco mejor.

Sí, conozco html y html5, pues yo hice mi web e inserté el reproductor en ella, pero lo que pretendía, en realidad, es que alguien que sepa del tema, vea la web y el reproductor, pues está funcionando con canciones en mp3, montadas en el servidor, mientras que la emisora transmite música las 24 horas del día.

Es un reproductor que encontré en Internet, basado en jQuery, me gustó y lo instalé, pero no sé cómo podría conectarlo en streaming a mi radio. Esa es la parte que desconozco y quisiera un procedimiento claro, que me permita, al hacer click en Play, escuchar mi emisora de radio en vivo.

[Dj Morenoh]

Ok, ahora he entendido yo mejor lo que exactamente buscas. Si no recuerdo mal, a traves del codigo del reproductor, deberas cambiarle la parte donde este puesto el streaming a traves del servidor y cambiarlo por el enlace del streaming de la emision de radio (IP:PUERTO)

Lo que concretamente el reproductor que quieres poner no lo conozco. Conozco los mas simples.

Le echare un ojo al codigo del reproductor haber si consigo ver por donde podrias probar.

Tambien tengo escuchado que hay algunos reproductores que solo son para streaming de radio y otros para canciones de un servidor. Espero que no sea tu caso, porque el reproductor esta muy guapo.

Le echare un ojo al codigo y te digo algo. Saludos

[zupulido]

Gracias, esperaré entonces...

[Dj Morenoh]

El codigo HTML de la radio es:

<div id="vc-container" class="vc-container">
            <div class="vc-tape-wrapper">
               <div class="vc-tape">
                  <div class="vc-tape-back">
                     <div class="vc-tape-wheel vc-tape-wheel-left"><div></div></div>
                     <div class="vc-tape-wheel vc-tape-wheel-right"><div></div></div>
                  </div>
                  <div class="vc-tape-front vc-tape-side-a">
                     <span>A</span>
                  </div>
                  <div class="vc-tape-front vc-tape-side-b">
                     <span>B</span>
                  </div>
               </div>
            </div>
            <div class="vc-loader"></div>
         </div>

Lo que creo esque se configuro a traves de alguna web, porque no me sale nada que pueda reconocer como otros reproductores que he instalado.
Dejo el codigo entero de la pagina, por si alguien mas metido en HTML puede echar una mano.

<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="es"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="es"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="es"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="es"> <!--<![endif]-->
    <head>
        <title>Escucha en vivo los Programas transmitidos por Radio Progresando 93.9 FM</title>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
        <meta name="description" content="Escucha en vivo los Programas transmitidos por Radio Progresando 93.9 FM" />
        <meta name="keywords" content="escucha, en vivo, al aire, radio progresando 93.9 fm, productores, emisora de radio, san cristobal, tachira, venezuela, comunal, educativa, cultural, familiar, diferente, espiritismo, social, informativa" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico">
        <link rel="stylesheet" type="text/css" href="css/estilos.casette.css" />
        <link rel="stylesheet" type="text/css" href="css/estilos_escucha.css" />
        <link href='http://fonts.googleapis.com/css?family=Aldrich' rel='stylesheet' type='text/css' />
      <script type="text/javascript" src="js/modernizr.base.67323.js"></script>
    </head>
   
    <body onLoad="actualizaReloj()">
   
       <header id="header">
        <div id="fechayhora">
            <!--Inicio de Fecha y hora:-->
            <table border=0 cellpadding=0 cellspacing=0>
            <tr>
            <td id="Fecha_Reloj"></td>
            </tr>
            </table>
        </div> <!-- Final de #fechayhora -->
       
        <div ="cabecera">
            <div id="identificacion">
                <div id="logo" class="logo_animation">
                    <a href="#"><img src="images/logo939.png" alt="Radio Progresando 93.9 FM" name="Radio Progresando 93.9 FM" /></a>
                    <p class="slogan"> Tu emisora Comunal, Educativa y Cultural</p>
                </div> <!-- Final de #logo -->
               
                <div id="publicidad_superior" >
                    <div class="wrapper">
                        <div class="item">
                            <img src="images/banner_roger_cubo_450x140.png" />
                            <span class="information">
                            <strong>Roger Rodríguez. Terapueta.</strong> Tratamiento holístico. Sanación integral por métodos naturales. Equilibrio Cuerpo, Mente y Espíritu. Acupuntura con agujas y digital, Moxibustión, Masajes terapéuticos, Magnetoterapia, eliminación del dolor y mucho más...
                            <p>Centro Médico La Romera, Carrera 16 N° 15-82, entre Calles 15 y 16, San Cristóbal - Táchira - Venezuela, Teléfonos: (0276) 3560075 - (0414)0750530 - (0412) 0679411 </p>
                            </span>
                        </div><!-- Final de #item -->
                    </div> <!-- Final de .wrapper -->
                </div> <!-- Final de #publicidad_superior -->
            </div> <!-- Final de #identificacion -->
        </div> <!-- Final de #cabecera -->
    </header> <!-- Final de #header -->
   
    <div id="menu_superior">
        <nav id="menu1">
            <ul id="nav1">
                <li class="texto" ><a href="http://radioprogresando.com">Inicio</a></li>
                <li class="s">|</li>
                <li class="texto"><a href="http://radioprogresando.com/portada/">Portada</a></li>
                <li class="s">|</li>
                <li class="texto"><a href="http://radioprogresando.com/horarios-de-programacion.html">Horarios</a></li>
                <li class="s">|</li>
                <li class="texto"><a href="http://radioprogresando.com/nuestra-gente.html">Nuestra Gente</a></li>
                <li class="s">|</li>
                <li class="texto"><a href="http://radioprogresando.com/escucha-en-vivo.html">En vivo</a></li>
                <li class="s">|</li>
                <li class="texto" ><a href="http://radioprogresando.com/portada/index.php/noticias/noticias-principales">Noticias</a></li>
                <li class="s">|</li>
                <li class="texto"><a href="http://radioprogresando.com/portada/index.php/blog-radio/categorias">Blog</a></li>
                <li class="s">|</li>
                <li class="texto"><a href="http://radioprogresando.com/portada/index.php/videos/categorias-videos">Videos</a></li>
               
            </ul>
        </nav><!-- Final de nav #menu1 -->
   </div><!-- Final de #menu_superior -->
     
   <div class="container" >
        <div id="titulo">
           <hgroup class="campo_titulo">
                <h1><span>Desde aquí podrás escuchar próximamente, los programas transmitidos por</span></h1>
                <h1>Radio Progresando 93.9 FM</h1>
                <!-- <h2>Vintage format meets modern web tech: an HTML5 audio player with realistic controls <br /><strong>Best viewed &amp; listened to in modern browsers</strong></h2>-->
         </hgroup>
           
            <div class="support-note"><!-- Estamos revisando las capacidades de tu buscador con Modernizr. -->
                <span class="no-cssanimations">Tu buscador no soporta Animaciones en CSS3</span>
                <span class="no-csstransforms">Tu buscador no soporta Transformaciones en CSS3</span>
                <span class="no-csstransforms3d">Tu buscador no soporta Transformaciones en 3D en CSS3</span>
                <span class="no-csstransitions">Tu buscador no soporta Transiciones en CSS3</span>
                <span class="note-ie">Lo siento, sólo podrás disfrutarlo con un navegador moderno y actualizado en su última versión.</span>
            </div>
           
        </div>

         <div id="vc-container" class="vc-container">
            <div class="vc-tape-wrapper">
               <div class="vc-tape">
                  <div class="vc-tape-back">
                     <div class="vc-tape-wheel vc-tape-wheel-left"><div></div></div>
                     <div class="vc-tape-wheel vc-tape-wheel-right"><div></div></div>
                  </div>
                  <div class="vc-tape-front vc-tape-side-a">
                     <span>A</span>
                  </div>
                  <div class="vc-tape-front vc-tape-side-b">
                     <span>B</span>
                  </div>
               </div>
            </div>
            <div class="vc-loader"></div>
         </div><!-- //vc-container -->
      
         <div class="attribution">         
            <p>Diseño original del casette <a href="#">Mauricio Estrella</a></p>
                <p>Adaptado a Radio Progresando 93.9 FM por <a href="#">Zulay Pulido</a></p>
         </div><!--//attribution-->

      </div><!-- //container -->
       
         <footer id"footer">
                <div id="fondo_footer">
                    <nav id="menu3">
                        <ul id="nav3">
                            <li><a href="http://radioprogresando.com">Inicio</a></li>
                            <li>|</li>
                            <li><a href="http://radioprogresando.com/portada/">Portada</a></li>
                            <li>|</li>
                            <li class="texto"><a href="http://radioprogresando.com/horarios-de-programacion.html">Horarios</a></li>
                            <li>|</li>
                            <li><a href="http://radioprogresando.com/nuestra-gente.html">Nuestra Gente</a></li>
                            <li>|</li>
                            <li><a href="http://radioprogresando.com/portada/index.php/noticias/noticias-principales">Noticias</a></li>
                            <li>|</li>
                            <li><a href="http://radioprogresando.com/portada/index.php/blog-radio/categorias">Blog</a></li>
                            <li>|</li>
                            <li><a href="http://radioprogresando.com/portada/index.php/videos/categorias-videos">Videos</a></li>
                            <li>|</li>
                            <li><a href="http://radioprogresando.com/contacto.html">Contacto</a></li>
                        </ul>
                    </nav><!-- Final div menu3 -->
                    <nav id="menu4">
                        <ul id="nav4">
                            <li><a href="http://www.facebook.com/pages/Radio-Progresando/261109183988933" target="blank"><img src="images/icono_facebook.png" alt="Síguenos en Facebook" title="Síguenos en Facebook"></a></li>
                            <li>|</li>
                            <li><a href="https://twitter.com/RProgresando" target="blank" ><img src="images/icono_twitter.png" alt="Síguenos en Twitter" title="Síguenos en Twitter" ></a></li>
                            <li>|</li>
                            <li><a href="https://plus.google.com/102968689891306921385" target="blank"><img src="images/icono_google+.png" alt="Encuéntranos en Google +" title="Encuéntranos en Google +"></a></li>
                            <li>|</li>
                            <li><a href="http://www.youtube.com/user/RadioProgresando" target="blank"><img src="images/icono_youtube.png" alt="Visítanos en Youtube" title="Visítanos en Youtube" ></a></li>
                            <li>|</li>
                            <li><a href="http://radioprogresando.com/contacto.html" target="blank"><img src="images/icono_email.png" alt="Envíanos un mensaje por email" title="Envíanos un mensaje por email"></a></li>
                            <li>|</li>
                            <li><a href="#"><img src="images/icono_rss.png" alt="Suscríbete vía RSS" title="Suscríbete vía RSS" target="blank"></a></li>
                         </ul>
                     </nav> <!-- Final div menu4 -->
                     <div id="espacio_vacio" class="clearfloat"></div>
                     <div id="empresa">
                             <p><span itemprop="url"><a href="http://radioprogresando.com" target="blank">http://radioprogresando.com</a></span> | <a href="http://radioprogresando.com/contacto.html" target="blank"> [email protected]</a></p>
                     </div> <!-- Final div empresa -->
                     <div id="copyright" itemscope itemtype="http://data-vocabulary.org/Person">
                        <p class="copy"><span itemprop="title">Dise&ntilde;o y realización Web </span> &copy; 2012   <span class="nombre" itemprop="name"> Zulay Pulido </span> para <span class="nombre" itemprop="affiliation"> Radio Progresando 93.9 FM </span> </p>
                    </div> <!-- Final div copyrigth -->
                    <br>
                    <!-- <div id="espacio_vacio" class="clearfloat"></div> -->
                    <div id="advertencia">
                        <p class="chrome"><span class="llamado">Advertencia:</span> Para ver correctamente esta web debes tener instalado el navegador Chrome (preferiblemente) o Firefox en su última versión.</p>
                       
                        <p><span class="otros"> Con Internet Explorer, Opera o Safari, no podrás disfrutar completamente de los efectos de animación.</span></p>
                    </div> <!-- Final div copyrigth -->
                 </div><!-- Final div fondo_footer -->
               
            </footer><!-- Fin de footer -->           


  <!-- JavaScript at the bottom for fast page loading -->
 
  <!-- JavaScript para Fecha y hora -->
  <script language="JavaScript">
       /* Inicio del Reloj */
      function actualizaReloj(){
      marcacion = new Date()
      Hora = marcacion.getHours()
      Minutos = marcacion.getMinutes()
      Segundos = marcacion.getSeconds()
      if (Hora<=9)
      Hora = "0" + Hora
      if (Minutos<=9)
      Minutos = "0" + Minutos
      if (Segundos<=9)
      Segundos = "0" + Segundos
      /* Fin del Reloj */
      
      /* Inicio de Fecha */
      var Dia = new Array("Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo");
      var Mes = new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
      var Hoy = new Date();
      var Anio = Hoy.getFullYear();
      var Fecha = "Hoy es " + Dia[Hoy.getDay()] + ", " + Hoy.getDate() + " de " + Mes[Hoy.getMonth()] + " de " + Anio + ", a las ";
      /* Fin de Fecha */
      
      /* Script Fecha y Hora */
      var Inicio, Script, Final, Total
      Inicio = "<font color=#ccc>"
      Script = Fecha + Hora + ":" + Minutos + ":" + Segundos
      Final = "</font>"
      Total = Inicio + Script + Final
      document.getElementById('Fecha_Reloj').innerHTML = Total
      setTimeout("actualizaReloj()",1000)
      }
      </script>
        <!-- Fin script Fecha y hora -->
      
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
      <!-- KnobKnob by Martin Angelov : https://github.com/martinaglv/KnobKnob -->
      <script src="js/transform.casette.js"></script>
      <script src="js/knobKnob.jquery.js"></script>
       
        <!-- scripts concatenated and minified via build script -->
      <script src="js/plugins.js"></script>
       <script src="js/script.js"></script>
       <!-- end scripts -->

      <script type="text/javascript" src="js/jquery.cassette.js"></script>
      <script type="text/javascript">   
         $(function() {
            
            $( '#vc-container' ).cassette();
                  
            });
      </script>
       
        <script>
        var _gaq=[['_setAccount','UA-33991216-1'],['_trackPageview']];
        (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
        g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
        s.parentNode.insertBefor e(g,s)}(document,'script'));
        </script>
    </body>
</html>

Saludos y espero que sirva de ayuda.

[zupulido]

Hola, y gracias, veo que revisaste, pero igual que yo, no encontré cómo configurarlo.

[Arturako83]

Hola por lo que veo el reproductor no es el típico, en el cual pegas un código html y modificas la ip y el puerto y listo, sino que es un reproductor en html5 el cual debe de incluir una serie de archivos que se alojan en un servidor (hosting).
Si ya los tienes  alojados tiene que haber algún archivo php en el cual es donde tendrás que incluir la ip y puerto de tu radio, no en el código embed.

codigo del reproductor en el cual podemos observar lo comentado.

Código: [Seleccionar]

<div id="vc-container" class="vc-container">
            <div class="vc-tape-wrapper">
               <div class="vc-tape">
                  <div class="vc-tape-back">
                     <div class="vc-tape-wheel vc-tape-wheel-left"><div></div></div>
                     <div class="vc-tape-wheel vc-tape-wheel-right"><div></div></div>
                  </div>
                  <div class="vc-tape-front vc-tape-side-a">
                     <span>A</span>
                  </div>
                  <div class="vc-tape-front vc-tape-side-b">
                     <span>B</span>
                  </div>
               </div>
            </div>
            <div class="vc-loader"></div>
         </div><!-- //vc-container -->
     
         <div class="attribution">         
            <p>Diseño original del casette <a href="#">Mauricio Estrella</a></p>
                <p>Adaptado a Radio Progresando 93.9 FM por <a href="#">Zulay Pulido</a></p>
         </div><!--//attribution-->

      </div><!-- //container -->
En este código faltan muchas partes las cuales en teoría por mi practica con otros reproductores devén estar en los archivos mencionados.
Espero haberte orientado un poco mejor y que sea de ayuda, saludos.