Crear un reproductor de audio y video utilizando el control Media de ASP.NET Futures
Supongamos que durante el desarrollo de una aplicación ASP.NET, uno de los requerimientos consiste en implementar un sencillo reproductor de archivos de audio. Se trata de una tarea que podríamos solventar recurriendo al uso de alguno de los variados productos de terceros fabricantes que existen en el mercado, pero como hemos comentado, el reproductor a integrar en nuestro programa no precisa de características complejas, basta con que disponga de los controles básicos tales como reproducir, pausa, parada, etc., por lo que quizá sería un gasto que podríamos evitar si desarrollamos un pequeño control reproductor de "andar por casa".
Si estamos creando nuestra aplicación utilizando Visual Studio 2008 / 2005, podemos utilizar las capacidades multimedia que nos brinda Silverlight para incorporar esta característica. Pero puede que todavía no seamos muy diestros en el uso de Silverlight, y asumiendo que estamos utilizando la versión 1.0, la pelea a brazo partido con Javascript, el elemento MediaElement de XAML, y otros elementos necesarios de este lenguaje de marcado, podría convertirse en una batalla muy dura si disponemos de poco tiempo para completar este aspecto de la aplicación. Pero no desesperemos, que no está todo perdido, al rescate llegan los ASP.NET Futures.
ASP.NET Futures, como ya han comentado en sus respectivos blogs Jorge Serrano, Eugenio Estrada Csaky, Sergio Tarrillo y otros compañeros de Geeks, se trata de un paquete de componentes y controles que aportan un numeroso conjunto de funcionalidades para el desarrollo de aplicaciones ASP.NET y Silverlight. Para el problema en concreto ante el que nos enfrentamos, la versión de julio de 2007 de ASP.NET Futures nos ofrece el control Media, que consiste en un reproductor de archivos de audio y video con las funcionalidades básicas que le pediríamos a cualquier componente de estas características. Este control se encuentra accesible en la Caja de herramientas de Visual Studio como vemos en la siguiente imagen.
Poner en funcionamiento un reproductor simple con este control se convierte en una tarea de lo más sencilla: basta con arrastrarlo hasta el diseñador del WebForm y asignar a su propiedad MediaUrl el archivo a reproducir. Adicionalmente podemos asignar el valor True a la propiedad AutoPlay para que la reproducción comience inmediatamente al cargar la página. La siguiente imagen muestra el aspecto por defecto del control en plena ejecución de un video.
Otra cuestión importante a destacar reside en el hecho de que precisamos incluir un componente ScriptManager en nuestra página para que todo se ejecute correctamente, aunque si al crear el proyecto hemos empleado la plantilla "ASP.NET AJAX Futures Web Application", no será necesario ya que esta se encarga de añadirlo.
Un control camaleónico.
Como acabamos de comprobar, para abordar la reproducción de contenido multimedia de forma rápida y fácil, el control Media se convierte en un poderoso aliado, pero como hemos dicho anteriormente, resulta que solamente queremos reproducir audio, por lo que el área reservada por el control para la visualización de video necesitaríamos que quedara oculta, " ¿hay alguna manera de conseguirlo?", pues sí, recurriendo al uso de un skin, que proporcione al control una apariencia más acorde a las funcionalidades que deba desempeñar.
Pero no nos asustemos, ya hemos dicho que Media es un control fácil de usar, y proporciona, a través de su propiedad MediaSkin -que contiene una enumeración MediaSkinType- una colección de carátulas para cambiar su aspecto. En este caso elegiremos el valor AudioGray, correspondiente al skin que mejor se ajusta a nuestras necesidades de reproducción.
La siguiente imagen muestra algunas otras carátulas que ofrece este control.
Un ejemplo más completo. Seleccionando el archivo a reproducir y el skin.
Como parte final de este artículo vamos a desarrollar un pequeño proyecto en Visual Studio 2008, cuyos fuentes pueden descargarse en los siguientes enlaces para C# y VB. Esta aplicación consistirá en proporcionar al usuario una página que contenga un control Media y dos DropDownList, para seleccionar el archivo de audio/video (los cuales no se acompañan junto al proyecto de ejemplo) y el skin respectivamente.
En primer lugar escribiremos el código que vemos a continuación para la interfaz de usuario de la página, empleando un UpdatePanel para evitar recargas completas sobre la misma.
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table style="width: 58%;" border="1">
<tr>
<td class="style1">
<asp:Label ID="Label1" runat="server" Text="Archivos de audio/video" /></td>
<td class="style2">
<asp:Label ID="Label2" runat="server" Text="Skins" />
</td>
</tr>
<tr>
<td class="style1">
<asp:DropDownList ID="ddlArchivos" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlArchivos_SelectedIndexChanged">
<asp:ListItem Value="GardenParty.mp3">Garden Party</asp:ListItem>
<asp:ListItem Value="Incubus.mp3">Incubus</asp:ListItem>
<asp:ListItem Value="MarketSquareHeroes.mp3">Market Square Heroes</asp:ListItem>
<asp:ListItem Value="Kameo.wmv">Kameo</asp:ListItem>
</asp:DropDownList>
</td>
<td class="style2">
<asp:DropDownList ID="ddlSkins" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlSkins_SelectedIndexChanged" />
</td>
</tr>
</table>
<br />
<asp:Media ID="medReproductor" runat="server" Width="320px" Height="240px" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
Posteriormente pasaremos al code-behind, donde escribiremos la lógica encargada de seleccionar el archivo a reproducir, y el skin que utilizará el control Media para mostrar su aspecto. Nótese que para rellenar el control DropDownList correspondiente a los nombres de los skins, dado que dichos nombres se encuentran en el tipo enumerado MediaSkinType, empleamos el método Enum.GetNames para obtener un array que posteriormente enlazamos al control de lista.
//....
using Microsoft.Web.Preview.UI.Controls;
using System.Text;
//....
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
// obtener la lista de nombres de la enumeración
// y asignarla a la lista desplegable correspondiente
string[] aNombresSkin = Enum.GetNames(typeof(MediaSkinType));
this.ddlSkins.DataSource = aNombresSkin;
this.ddlSkins.DataBind();
// reproducir el primer archivo de la lista
this.medReproductor.AutoPlay = true;
this.medReproductor.MediaUrl = this.ddlArchivos.SelectedValue;
}
}
protected void ddlSkins_SelectedIndexChanged(object sender, EventArgs e)
{
// cambiar el skin del reproductor
this.medReproductor.MediaSkin =
(MediaSkinType)Enum.Parse(typeof(MediaSkinType), this.ddlSkins.SelectedValue);
}
protected void ddlArchivos_SelectedIndexChanged(object sender, EventArgs e)
{
// reproducir un nuevo archivo
this.medReproductor.MediaUrl = this.ddlArchivos.SelectedValue;
}
Una vez concluida la escritura del code-behind, ejecutaremos la aplicación que mostrará un aspecto como el siguiente.
Espero que este artículo sea de utilidad para todos aquellos que puedan verse en la necesidad de implementar un sencillo reproductor multimedia utilizando ASP.NET Futures.
Un saludo.