Recientemente he tenido que ayudar a unos amigos a insertar el control de Media Player en su página web, para cargar automáticamente el streaming de audio de su estación de radio en Internet. Quise compartir lo que hice para que cargue en los navegadores más populares (según yo Internet Explorer y Firefox).

Lo que hice fué crear un tag tipo <OBJECT> desde donde cargo un archivo .asx que contiene el URL del archivod e audio o en mi caso, del streaming de Shoutcast:

<OBJECT
ID=”mediaPlayer”
CLASSID=”CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95″
CODEBASE=”http://activex.microsoft.com/activex/controls/mplayer/en/
nsmp2inf.cab#Version=5,1,52,701″
STANDBY=”Loading Microsoft Windows Media Player components…”
TYPE=”application/x-oleobject”>
<PARAM NAME=”fileName” VALUE=”live.asx”>
<PARAM NAME=”autoStart” VALUE=”true”>
<PARAM NAME=”showControls” VALUE=”true”>
</OBJECT>

Aunque este objeto tiene más parámetros, solamente explicaré los más comunes:

<PARAM NAME=”fileName” VALUE=”live.asx”>

El URL del archivo de audio o del streaming se encuentra en este archivo.

<PARAM NAME=”autoStart” VALUE=”true”>

Indica si al cargar el control debe activarse la reproducción del archivo multimedia.

<PARAM NAME=”showControls” VALUE=”true”>

Indica si deben cargarse los controles del reproductor (pausa, play, avanzar, etc)

El archivo .asx típico debe contener la siguiente estructura:

<ASX VERSION=”3.0″>
<TITLE>Su titulo</TITLE>
<COPYRIGHT>© Su copyright</COPYRIGHT>
<ABSTRACT>Su abstract</ABSTRACT>
<ENTRY>
<TITLE>Su titulo</TITLE>
<REF href=”http://www.mangohosting.com:<puerto>” />
<AUTHOR>Su autor</AUTHOR>
<ABSTRACT>Su abstract</ABSTRACT>
</ENTRY>
</ASX>

Finalmente, para que el control cargue adecuadamente en Firefox, necesita agregar la siguiente línea antes de cerrar el bloque OBJECT, es decir antes de </OBJECT> :

<EMBED TYPE=”application/x-mplayer2″ src=”live.asx” NAME=”MediaPlayer”
ShowControls=”1″ ShowStatusBar=”0″ ShowDisplay=”0″ autostart=”1″> </EMBED>

De esta manera, el tag completo debe verse de la siguiente manera:

<OBJECT
ID=”mediaPlayer”
CLASSID=”CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95″
CODEBASE=”http://activex.microsoft.com/activex/controls/mplayer/en/
nsmp2inf.cab#Version=5,1,52,701″
STANDBY=”Loading Microsoft Windows Media Player components…”
TYPE=”application/x-oleobject”>
<PARAM NAME=”fileName” VALUE=”live.asx”>
<PARAM NAME=”autoStart” VALUE=”true”>
<PARAM NAME=”showControls” VALUE=”true”>
<EMBED TYPE=”application/x-mplayer2″ src=”live.asx” NAME=”MediaPlayer”
ShowControls=”1″ ShowStatusBar=”0″ ShowDisplay=”0″ autostart=”1″> </EMBED>
</OBJECT>

Este bloque solo debe agregarse dentro de su página HTML y listo, podra ver el reproductor de Media Player dentro de su navegador, sin necesidad de abrir el programa.