Paso 1: Une el objeto Flash con la etiqueta de audio
Los navegadores que no reconozcan la etiqueta de audio cargarán el contenido Flash en su lugar.
<audio>
</span><span class="old">
<object class="playerpreview" type="application/x-shockwave-flash"
data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="bgcolor" value="#085c68" />
<param name="FlashVars" value="mp3=test.mp3" />
<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
height="20" name="movie" align=""
type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
</embed>
</object>
</span><span class="new">
</audio>
Paso 2: Agrega la referencia de origen
Podemos agregar tantas líneas de "origen" y formatos como queramos. Si el navegador no admite un formato específico, recurrirá al siguiente, y así sucesivamente.
<span class="old"><audio></span>
<span class="new"><source src="test.mp3" type="audio/mpeg" />
<source src="test.ogg" type="audio/ogg" /></span><span class="old">
<object class="playerpreview" type="application/x-shockwave-flash"
data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="bgcolor" value="#085c68" />
<param name="FlashVars" value="mp3=test.mp3" />
<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
height="20" name="movie" align=""
type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
</embed>
</object>
</audio></span>
Paso 3: Agrega un resguardo a Flash
Para garantizar la seguridad, debemos agregar el resguardo a un reproductor de audio Flash en caso de que el navegador no sea compatible con ninguno de los formatos especificados. Por ejemplo, Firefox 3.5 solo es compatible con la etiqueta de audio en formato Ogg, pero es posible que solo esté disponible el archivo mp3.
<span class="old"><audio></span>
<span class="new"><source src="test.mp3" type="audio/mpeg" /></span><span class="old">
<object class="playerpreview" type="application/x-shockwave-flash"
data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="bgcolor" value="#085c68" />
<param name="FlashVars" value="mp3=test.mp3" />
<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
height="20" name="movie" align=""
type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
</embed>
</object>
</audio>
</span><span class="new">
<div id="player_fallback"></div>
<script>
if (document.createElement('audio').canPlayType) {
if (!document.createElement('audio').canPlayType('audio/mpeg')) {
swfobject.embedSWF(
"player_mp3_mini.swf",
"player_fallback",
"200",
"20",
"9.0.0",
"",
{"mp3":"test.mp3"},
{"bgcolor":"#085c68"});
}
}
</script></span>
Para facilitar el proceso, usamos la biblioteca SWFObject para insertar Flash Player a través de JavaScript. Para incluir la biblioteca, puedes utilizar la API de Google AJAX Libraries. Para ello, inserta estas dos líneas en el encabezado:
<span class="new"><script src="https://www.google.com/jsapi"></script>
<script>google.load("swfobject", "2.2");</script></span></pre>
Paso 4: Agrega los controles predeterminados para mostrar el reproductor
Estos controles no se pueden personalizar (consulta los ejemplos al final). Dado que estos controles predeterminados se mostrarán independientemente del formato admitido, tendremos que controlar su visibilidad con el condicional que creamos anteriormente.
// TODO: DevSite - Code sample removed as it used inline event handlers
También puedes crear tu propio reproductor con JavaScript y CSS.
// TODO: DevSite - Code sample removed as it used inline event handlers