DEV Community: Gastón Tognola

Streaming de audio mp3 en aplicaciones web y móviles

Gastón Tognola — Thu, 27 Jul 2023 17:09:13 +0000

Introducción

El streaming de audio es una funcionalidad clave para aplicaciones web y móviles que requieren reproducir archivos de audio de forma fluida y eficiente. En este artículo, aprenderemos cómo hacer streaming de un archivo de audio MP3 utilizando la biblioteca Howler.js. Además, exploraremos cómo integrar esta funcionalidad en una aplicación móvil con Ionic, un popular framework para el desarrollo de aplicaciones híbridas.

¿Qué es Howler.js?

Howler.js es una poderosa y fácil de usar biblioteca JavaScript que permite gestionar y reproducir audio en navegadores web. Proporciona una solución simple para tareas comunes como la reproducción, pausa y control del volumen de archivos de audio, y también admite la reproducción de audio en streaming para una experiencia más fluida.

Paso 1: Configuración del proyecto

Antes de comenzar, asegúrate de tener un proyecto Ionic configurado y listo para trabajar. Si aún no tienes Ionic instalado, puedes seguir las instrucciones en la documentación oficial para configurar un nuevo proyecto.

Paso 2: Instalación de Howler.js

Para incorporar Howler.js en tu proyecto Ionic, puedes utilizar npm para instalarlo. Abre una terminal en el directorio raíz de tu proyecto y ejecuta el siguiente comando:

npm install howler

Esto instalará la biblioteca Howler.js y la agregará a las dependencias de tu proyecto.

Paso 3: Streaming de audio MP3 con Howler.js

Una vez que Howler.js está instalado, podemos comenzar a hacer streaming de audio MP3. Para ello, sigue estos pasos:

Crea un nuevo objeto Howl y proporciona la URL del archivo MP3 como fuente:

import { Howl } from 'howler';

// ...

const sound = new Howl({
  src: ['ruta/al/archivo.mp3'],
  html5: true  // Habilita la reproducción de audio HTML5 para mayor compatibilidad
  preload: true,  // Carga el audio mientras se reproduce
});

Configura el evento de carga para comenzar a reproducir el audio una vez que esté listo:

sound.on('load', function() {
  sound.play();
});

Puedes agregar más opciones y configuraciones según tus necesidades. Por ejemplo, para habilitar el streaming progresivo:

const sound = new Howl({
  src: ['ruta/al/archivo.mp3'],
  html5: true,
  preload: true,  // Carga el audio mientras se reproduce
  autoplay: true  // Comienza a reproducir automáticamente
});

Paso 4: Integración con Ionic

Para integrar el streaming de audio en tu aplicación Ionic, simplemente sigue los pasos anteriores dentro del componente o servicio donde deseas implementar esta funcionalidad. Asegúrate de importar la biblioteca Howler y configurar el objeto Howl según tus necesidades.

Por ejemplo, en un componente de Ionic:

import { Component } from '@angular/core';
import { Howl } from 'howler';

@Component({
  selector: 'app-audio-player',
  template: `
    <!-- Aquí puedes agregar controles de reproducción, pausa, etc. -->
  `,
})
export class AudioPlayerComponent {
  private sound: Howl;

  constructor() {
    this.sound = new Howl({
      src: ['ruta/al/archivo.mp3'],
      html5: true,
      preload: true,
      autoplay: true,
    });

    this.sound.on('load', () => {
      // Aquí puedes ejecutar acciones adicionales cuando el audio está listo
    });
  }
}

Conclusión

Hacer streaming de audio MP3 en una aplicación web o móvil es sencillo gracias a la biblioteca Howler.js. Con unos pocos pasos, puedes agregar esta funcionalidad a tu proyecto Ionic y proporcionar a tus usuarios una experiencia de reproducción de audio fluida y sin interrupciones. Explora las opciones y capacidades adicionales de Howler.js para personalizar aún más la experiencia de audio en tu aplicación.

Espero que este artículo te haya sido útil para aprender cómo hacer streaming de audio MP3 con Howler.js y cómo integrarlo con Ionic. ¡Disfruta de la reproducción de audio en tiempo real en tu aplicación!

Menú hamburguesa sólo con CSS (fácil)

Gastón Tognola — Sun, 26 Jul 2020 23:14:40 +0000

¡Hola chicos!
Una vez armada nuestra barra de navegación responsive, ir al post, vamos a ver como armar un menú hamburguesa básico sólo con CSS.

HTML

Arranquemos con el código básico para el menú:

<nav>
  <input type="checkbox" id="menu">
  <label for="menu"> Menu </label>
  <ul>
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
    <li>Link 4</li>
  </ul>
</nav>

A tener en cuenta:

Asignar un id al input. <input type="checkbox" id="menu" >
Hacer referencia al id del input en el for del label. <labelfor="menu"> Menu </label>

CSS

Ahora con CSS, vamos a dar la funcionalidad a nuestro menú:

Ocultamos la lista de navegación ul:{display: none;}
Ahora lo importante, con input:checked ~ ul modificamos el estilo de la lista ul cuando el checkbox esté seleccionado (checked), por lo que allí es dónde modificamos el display de la lista, logrando que se visualice cuando el checkbox está marcado.

ul{
  display: none;
}

input:checked  ~ ul{
  display:block;
}

Con ese simple código logramos lo siguiente:

Dando estilo

Ahora lo que queda es dar estilo a nuestro menú hamburguesa:

Ocultamos el input.

 input {
  display: none;
}

Modificamos el label y agregamos una imágen o icono de "hamburguesa".

  <label for="menu"> ☰ </label>

label {
  box-sizing: border-box;
  display: inline-block;
  border: 1px solid black;
  border-radius: 5px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-weight: bold;
  text-align: center;
  user-select: none;
}

Damos estilos a los elementos de la lista.

li {
  display: block;
  background: lightgrey;
  margin: 0;
  padding: 10px;
  list-style: none;
  border-bottom: 1px solid grey;
}

Resultado final:

Barra de navegación responsive (Mobile first)

Gastón Tognola — Sun, 26 Jul 2020 15:09:34 +0000

¡Hola chicos! Vamos a arrancar con un ejemplo de una barra de navegación responsive, usando Mobile First.

Código básico de la barra de navegación:

<header>
  <h1> Titulo </h1>

  <nav>
    <span class="menu-button">☰</span>
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Link 4</li>
    </ul>
  </nav>

</header>

Puntos importantes en el estilo CSS:

Contenedor header:
- display: flex y justify-content: space-between. Para ubicar en extremos opuestos al logo y a la barra de navegación.
Contenedor nav:
- ul: display: none, ya que la idea es hacerlo mobile first, la lista de navegación se visualizará cuando se pase el mouse por arriba o se haga click en el botón del menú.

*{
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

header{
  background-color: grey;
  height: 8vh;
  display: flex;
  justify-content: space-between;
}

header ul{
  display:none;
}

header h1{
  line-height: 8vh;
  margin-left:.5em;
}

.menu-button {
  display: inline-block;
  margin: 1vh;
  height: 6vh;
  width: 6vh;
  border: 1px solid black;
  line-height: 6vh;
  text-align: center;
}

Vista de escritorio:

Dos cosas importantes a hacer ahora son:

Ocultar el botón del menú (.menu-button) con diplay:none
Ahora sí, visualizar la lista*+ con los links de navegación con **display:block.

Todo esto, por supuesto, dentro de un @media query.

@media screen and (min-width: 768px){
  .menu-button{
    display: none;
  }

  nav ul{
    display: block;
  }

  nav ul li{
    list-style: none;
    display: inline-block;
    line-height: 8vh;
    margin: 0 .5em;
  }
}

Resultado

Paso siguiente

Ahora queda dar funcionalidad al menú hamburguesa (sólo con css), ver en este post.