Eliminar etiquetas HTML para el navegador firefox

brak3n · #1 (**permalink**) 03/04/2013, 00:59

Hola muchachos.

Hoy vengo a forosdelweb y a ustedes a pedir iluminación divina. Me explico

Estoy desarrollando un proyecto de un site, dentro de dicho site hay una etiqueta de audio que reproduce un tema en la home page, la etiqueta audio es controlada mediante javascript. Ahora el inconveniente es el siguiente:

tanto en internet explorer (milagrosamente), como en chrome se ejecuta bien el codigo y corre bastante fluida la canción. pero en Firefox todo se vuelve un desastre cuando se reproduce el audio este sufre saltos, es como si una cancion sonara tres veces a la vez pero en distintos tiempos cada una. es un problema fastidioso.

Entonces lo que quisiera saber es si existe alguna forma de desactivar la etiqueta <audio> pero solo dentro de firefox (aunque si tambien puedo para safari me vendria bien), y que en los demas navegadores no se desactive y corra normal.

Si quieren verlo ustedes mismos pueden entrar a: [URL="http://beta.grupomultimedia.net"]beta.grupomultimedia.net[/URL] y podran verlo por ustedes mismos.

Gracias de Antemano

Kamae · #2 (**permalink**) 03/04/2013, 03:03

Hola brak3n

Puedes hacer un IF en javascript que compruebe si es Firefox (y/o Safari) antes de ejecutar o crear la etiqueta <audio>

Con window.navigator.userAgent obtendrás información sobre el navegador del cliente. Sólo tienes que hacer algo del estilo:

Código PHP:

  if( window.navigator.userAgent.indexOf("Mozilla")!=-1 ){
     // Desactivo audio
}

Ojo porque la información devuelta es extensa y Mozilla no te garantiza que sea Firefox, ya que por ejemplo Internet Explorer 9 devuelve esto: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.1; .NET4.0C; .NET4.0E; InfoPath.3)

Lo mejor será que pruebes los distintos navegadores y encuentres las palabras únicas que lo identifiquen.

Espero que te sirva, saludos!

dontexplain · #3 (**permalink**) 03/04/2013, 04:57

Podría servirte este código

Código Javascript:

Ver originalnav = (function(){
  var N= navigator.appName, ua= navigator.userAgent, tem;
  var M= ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
  if(M && (tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
  M= M? [M[1], M[2]]: [N, navigator.appVersion,'-?'];
  return M;
 })();

IE ha añadido a su agente de usuario Mozilla para no perder cuota.

Un saludo.

brak3n · #4 (**permalink**) 03/04/2013, 12:17

Gracias por sus respuestas muchachos de momento nada aun ese codigo sigue duro de roer.

Creo que una posible y mas sencilla solucion seria llamar a la libreria javascript segun el navegador para que asi se se ejecute esa libreria en IE y chrome, pero no se cargue esa libreria en firefox que es la que produce saltos en ese navegador. si alguno tiene solucion a eso se lo agracederia

emprear · #5 (**permalink**) 03/04/2013, 15:38

Estuve viendo tu página, el problema que veo es que los controles del reproductor no funcionan, pero el sonido se ecucha bien, siempre hablando de Firefox, por otra parte la demo funciona sin problemas
http://osvaldas.info/examples/audio-...ouch-friendly/

Estuve tratando de ver que interfiere en tu página, pero no consegui descubrirlo
Saludos

Kamae · #6 (**permalink**) 04/04/2013, 06:57

brak3n si pones el trozo de código seguro que será más fácil para todos ayudarte. Es que no debería tener mucho misterio en principio.

De todas formas yo en el curro tuve que trabajar con <audio> y tuve varios problemas, uno de ellos con la extensión. Para IE y Safari les pasé un .mp3 y para FF y Chrome les pasé un .ogg
Luego a parte según la tecnología aceptada por el navegador, le pasaba un <audio> de HTML5 y usaba un pluggin Modernizr; o le metía un <embed>, todo desde el fichero de JavaScript, así que el primer paso sería quitarlo del HTML y añadirlo desde ahí (de esta forma, si en FF no quieres añadirlo, no lo haces), aunque puedes hacer varias pruebas antes para intentar que funcione bien.

Te paso mi trozo de código referente a añadir el audio por si puede servirte de ayuda y probar más cosas:

Código PHP:

  if(navigator.userAgent.indexOf("MSIE")!=-1 || navigator.userAgent.indexOf("Safari")!=-1){ // Si és IE o Safari 
    var extensio="mp3"; 
}else{ // Si és FF o Chrome 
    var extensio="ogg"; 
} 
if (Modernizr.audio){ // Para los q soportan Modernizr de HTML5 
    window.so=new Audio('ruta_a_tu_fichero/fichero.'+extensio); 
    window.so.controls=1; 
    window.so.id="audioElement"; 
    $(window.so).appendTo("#audio"); // Ponle el id="audio" al <li> que contiene tu audio 
    window.so.play(); // Autoplay 
}else{ // Para los que no soportan HTML5 como IE8 e inferiores 
    $('<embed src="ruta_a_tu_fichero/fichero.mp3" style="height:42px; width:200px;">').appendTo('#audio'); // Es mp3 pq creo que el <embed> con el OGG no iba 
}

PD: Hay que incluir el fichero JS de Modernizr en el <head>, antes que tu fichero de JS claro

brak3n · #7 (**permalink**) 08/04/2013, 23:39

Wow, gracias por iluminarme con tu sabiduria master, estoy un paso mas cerca de la luz, el problema ya ha sido resuelto y solventado, unas cuantas horas de sodomizar el codigo y ya por fin todo esta listo. Gracias

Cita:

Iniciado por Kamae

brak3n si pones el trozo de código seguro que será más fácil para todos ayudarte. Es que no debería tener mucho misterio en principio.

De todas formas yo en el curro tuve que trabajar con <audio> y tuve varios problemas, uno de ellos con la extensión. Para IE y Safari les pasé un .mp3 y para FF y Chrome les pasé un .ogg
Luego a parte según la tecnología aceptada por el navegador, le pasaba un <audio> de HTML5 y usaba un pluggin Modernizr; o le metía un <embed>, todo desde el fichero de JavaScript, así que el primer paso sería quitarlo del HTML y añadirlo desde ahí (de esta forma, si en FF no quieres añadirlo, no lo haces), aunque puedes hacer varias pruebas antes para intentar que funcione bien.

Te paso mi trozo de código referente a añadir el audio por si puede servirte de ayuda y probar más cosas:

Código PHP:

  if(navigator.userAgent.indexOf("MSIE")!=-1 || navigator.userAgent.indexOf("Safari")!=-1){ // Si és IE o Safari 
    var extensio="mp3"; 
}else{ // Si és FF o Chrome 
    var extensio="ogg"; 
} 
if (Modernizr.audio){ // Para los q soportan Modernizr de HTML5 
    window.so=new Audio('ruta_a_tu_fichero/fichero.'+extensio); 
    window.so.controls=1; 
    window.so.id="audioElement"; 
    $(window.so).appendTo("#audio"); // Ponle el id="audio" al <li> que contiene tu audio 
    window.so.play(); // Autoplay 
}else{ // Para los que no soportan HTML5 como IE8 e inferiores 
    $('<embed src="ruta_a_tu_fichero/fichero.mp3" style="height:42px; width:200px;">').appendTo('#audio'); // Es mp3 pq creo que el <embed> con el OGG no iba 
}

PD: Hay que incluir el fichero JS de [URL="http://modernizr.com/"]Modernizr[/URL] en el <head>, antes que tu fichero de JS claro

Fuzzylog · #8 (**permalink**) 09/04/2013, 02:48

podrías tener un div con un id determinado, y en funcion de qué tipo de navegador sea cambiar el innerHtml del div que contendría el <audio> original por algo como esto:

<object data="music.mp3" type="application/x-mplayer2" width="xxx" height="xxx"><param name="filename" value="music.mp3"></object>
<embed type="application/x-mplayer2" src="file.mp3" height="xxx" width="xxx" >

Uh, llegue tarde y mal me parece (autocolleja)

Me alegro de que lo hayas solucionado.