Audioplay2 reproductor de música en linea que funciona en HTML5

Audioplay2 es un sencillo reproductor de música en linea compatible con HTML5 que podemos agregar a cualquier plataforma web → gratis ✅.

audioplay2 reproductor de música en linea HTML5 - Portada

➕Tabla de contenidos

Hola AprendicesWEB con esta entrada abriré la sección de Audio del blog 👌 y traeré más formas de agregar música en MP3 a sus webs. Antes de comenzar la entrada quiero comentarles que este reproductor en compatible con Blogger, Wordpress, Joomla, Páginawebgratis.es y muchas más.

¿Qué es Audioplay2?

Es una nueva versión importante de Audioplay (reproductor de audio de un botón). Fue escrito en JavaScript y es compatible con todos los navegadores HTML5 (incluso móviles).

De manera similar al primer Audioplay, es muy liviano y su apariencia es totalmente personalizable. Puede cambiar la máscara del botón, el modo de reproducción, etc. Sin descarga, sin instalación complicada.

Es perfecto para todos los sitios web con muestras de audio, demos de bandas de música, aprendizaje de idiomas o simplemente como un reproductor de música de fondo.

¿Como utilizar el reproductor de música en linea?

Tenemos dos códigos que lo muestran de diferentes formas por defecto e implementarlo es muy sencillo ahora te enseño como y además dejare demostraciones funcionales del reproductor. Este reproductor no necesita instalar nada en tu plantilla se aplica directa en la entrada, post o articulo que lo quieras insertar.

Opción 1 (Para fondos claros)

Utilizamos el siguiente código para añadirlo:

<div class="audioplay-object">
  <div class="audioplay-button"></div>
  <audio class="audioplay-player">
    <source src=" music.ogg" />
    <source src=" music.mp3" />
    Tú navegador no soporta este elemento de audio.
  </audio>
</div>
<script src="https://strangecube.com/audioplay2/player/js/audioplay-2.0.0.min.js"></script>

Demostración 

Audioplay Tema Wonder (Libre de Copyright)

Opción 2 (Para fondos oscuros)

El código es el siguiente:

<div class="audioplay-object">
  <div class="audioplay-button"></div>
  <audio class="audioplay-player" data-apskin="classic">
    <source src="music.ogg" />
    <source src="music.mp3" />
    Tú navegador no soporta este elemento de audio.
  </audio>
</div>
<script src="https://strangecube.com/audioplay2/player/js/audioplay-2.0.0.min.js"></script>

Personalizar el reproductor en linea Audioplay2

Darle algunos atributos extras a este reproductor es simple solo debemos agregar distintos estilos a la etiqueta <audio class="audioplay-player">. A continuación te muestro las distintas formas de personalizarlo.

Cambiar el icono de stop por pause

A la etiqueta  <audio class="audioplay-player"> le agregamos data-apmode="playpause". Por lo que los códigos anteriores quedarian de la siguiente manera:

Para fondos claros
 <audio class="audioplay-player" data-apmode="playpause">

Para fondos oscuros
 <audio class="audioplay-player" data-apskin="classic" data-apmode="playpause">

De esta forma deben agregar los códigos que les mostrare más adelante.

Comenzar en un tiempo determinado

Estos tiempo se miden en milisegundos (ms), es decir, 1 segundo = 1000 ms, entonces si deseamos que la canción comience al primer minuto escribiríamos 60000. Utilizamos data-apstarttime="1000" (No funciona muy bien por el momento).

Desvanecer el volumen

La función también se mide en milisegundos con data-apfadeintime="3000".

Cambiar el ancho y el alto

Se mide en pixeles por defecto el ancho y el alto son 30px. Para el ancho se utiliza data-apwidth="30px" y el alto data-apheight="30px". No creo que necesite demostración ya que estos atributos lo hacen más pequeño o grande solamente.

Reproducción automática

Como el título lo indica que la canción se reproduzca sola 😆. Utilizamos el atributo data-apautoplay

Carga anticipada

Este atributo permite decir si queremos que la canción MP3 o OGG se cargue en segundo plano y así cuando le den al botón play se reproduzca de inmediato. Lo podemos hacer con el atributo data-aploop="yes" (por defecto es no)

Conclusión

Es una buena opción para tener en cuenta para los que no utilizamos muy a menudo reproductores de audio en las entradas, ya que no requiere una modificación de la plantilla. El reproductor lo conozco hace ya años y lo utilice en algunas ocasiones en algunos blogger funciona perfecto, se adapta a los móviles y carga rápido.

Lo malo es que solo acepta un reproductor por página, de lo contrario tiene un bug donde funcionara solo 1 siempre.

En fin me despido recuerda que comentar o compartir me ayuda mucho. Saludos.

Comentarios

Estas cordialmente invitado a compartir tu ideas y comentarios.