¿Cómo insertar audios en tecnología .Net?

En este post veremos como introducir pistas de audio en nuestras paginas web, ya sea para poner música de fondo o para alguna alerta o anuncio. Esto lo podremos hacer gracias a las librerías de SoundPlayer que nos ofrece Microsoft. No es que sean muy complejas todo sea dicho, pero nos permitirán hacer alguna interesante con un poco de ingenio.

Observaciones y cosas a tener en cuenta

La tecnología que veremos a continuación no esta soportada en iOS o Mac de modo que tendréis que tener esto en cuanta a la hora de usarlo en vuestras aplicaciones. El proprio sistema nos recordara esto mediante un subrayado de color amarillo, pero si estamos en Windows esto no nos supondrá ningún problema y podremos ignorarlo. Pero recordad tener cuidado de controlar donde se lanzan vuestros proyectos.

Primeros Pasos

Para empezar necesitaremos importar las librerías de Media.

Para ello podemos hacerlo de dos maneras diferentes.

La primera será la manera tradicional de llamarlo en todas las paginas de código que hagamos usando la linea de código adecuada. En este caso ya que el ejercicio que vamos a realizar es simple me he decantado por esta opción.

Y la segunda será a través de la carpeta de _ViewImports mediante la linea de código:

Una vez tengamos todo esto podremos empezar con la lógica de nuestra aplicación.

Estructura de la Aplicación

En este ejemplo vamos a usar la típica estructura Mvc que nos en la que viene predefinido el ejercicio. Pero a medida que vayamos avanzando podréis adaptarlo fácilmente a casi cualquier proyecto. Y trabajaremos principalmente en el controlador de Home.

Elaboración del Proyecto

Para empezar tenemos que buscar nuestras pistas de audio.

Eso ya lo dejo en vuestras manos lo único que hay que aclarar es que las pistas tienen que estar en formato .wav para que nuestro reproductor pueda ejecutarlo. Y las canciones deben ser introducidas en una carpeta dentro del proyecto.

Yo he dejado dos pistas de audio preparadas en una carpeta llama canciones.

Ahora que ya tenemos nuestras canciones podemos empezar a introducir codigo.

Yo en mi caso he querido que la música empiece nada mas abrirse la pagina de home de modo que he empezado con los preparativos en cuanto llamamos a la acción de Índex.

Se ve subrayado por lo que he explicado antes de que solo funciona en Windows pero podemos saltarlo por alto en nuestro caso.

Lo primero que tenemos que hacer es llamar a un SoundPlayer que es un objeto que se ocupara de lanzar las pistas de audio que le demos. Por lo que he estado viendo no admite que se le cambien las pistas de audio dinámicamente pero eso tiene fácil solución invocándolo de nuevo con la nueva dirección de la canción deseada.

Yo en mi caso las he guardado en un array de string con la dirección de las pistas de audio.

Y también tengo el SoundPlayer lanzado de manera global en la pagina y un contador de posición que me vaya diciendo en que canción estamos.

Una vez creado nuestro SoundPlayer con la canción que queremos necesita que le demos tiempo para cargar la canción, de modo que debemos lanzarle un player.Load() o un player.LoadAsync().

Los dos harán que el reproductor cargue la canción la diferencia es que el async lo hará de forma asíncrona. Esto significa que la pagina seguirá funcionando mientras el carga la canción de forma individual y una vez que la tenga lista seguirá con sus acciones.

En este caso la canción puede ser player.Play() o player.PlayLooping() que hará sonar la canción una sola vez o en bucle.

Una vez echo esto tendremos la canción reproduciéndose en el background.

Ahora toca darle algo de funcionalidad.

Funcionalidades

La verdad es que en cuanto a funcionalidades Microsoft en este ámbito nos tiene un poco abandonados. Con librerías especializadas se pueden realizar cosas mas chulas pero para lo que necesitamos aquí con esto nos servirá.

De todas formas dejare un link a la documentación oficial de Microsoft par que podáis echar un vistazo:

https://docs.microsoft.com/es-es/dotnet/api/system.media.soundplayer?view=dotnet-plat-ext-6.0

Aviso: El subrayado no es ningún error es una advertencia que explico mas arriba.

Como sabréis, o igual no, el modelo Mvc nos permite una comunicación entre la view y el controlador, de modo que hemos usado esto para transmitirle lo que queremos hacer a través de un string con las instrucciones. Estas serán mandadas por unos botones dentro de la vista Índex.

La funcionalidad es simple tendremos 4 botones, uno para volver a la canción anterior, otro para parar la música, otro para reanudar la canción y un ultimo para avanzar a la siguiente canción.

Cada uno de ellos manda un mensaje diferente al controlador y dependiendo del mensaje hara una acción u otra.

La acción de «parar» ejecutara un player.Stop() que detendrá la ejecuciones de nuestro Reproductor.

El botón de «anterior» y «siguiente» hará que el contador de posición cambien en función del botón que hayamos pulsado, cargara la nueva canción desde el array de string y lo lanzara.

Y por ultimo tendremos el botón de reanudar que simplemente cargara la canción de la posición en la que estábamos y la pondrá en reproducción.

Y en cuanto a funcionalidades eso seria mas o menos todo los que nos permite esta librería. Quería añadir también funcionalidades como por ejemplo cambiar el volumen. Pero desgraciadamente la librería no lo soporta.

Conclusiones

Tenia la esperanza de que al ser una librería de Microsoft fuese un poco mas compleja, ya que las pocas funcionalidades que hay se tiene que elaborar un poco por así decirlo. Y es la única forma que he encontrado de insertar audios en una web de manera oficial. Es algo que a día de hoy se le puede dar mucho uso pero supongo que habrá que recurrir a librerías personalizadas.

Información

Autor/a: Alexandru Preutesei Emilian

Curso: Desarrollo Web Full Stack, Multicloud y Multiplataforma

Centro: Tajamar

GitHub: https://github.com/AlexandruTajamar21/Reproductor

Leave a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.