Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML5
Code

Los 15 Mejores Reproductores HTML5 de Audio

by
Length:LongLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Afortunadamente, HTML5 se ha convertido en un estándar en el diseño web multimedia. Quedan lejos los días de quebraderos de cabeza con Flash y el plugin Silverlight, gracias a que HTML5 ya admite el uso de elementos de página para audio y vídeo y esto ha creado un nuevo estándar válido para todas las plataformas, por no mencionar los beneficios que proporciona al SEO y al caheado offline.

Otra ventaja del uso de HTML5 es que se adapta fácilmente a las distintas plataformas. Esto hace que el diseño, el desarrollo y la elaboración de reproductores de audio personalizado sea mucho más fácil que en el pasado, además estos funcionarán en tanto en ordenadores de sobremesa como en dispositivos móviles, y serán independientes de los distintos sistemas operativos.

Los siguientes 15 mejores reproductores de audio disponibles en Envato son ejemplos excelentes de cuan avanzados pueden llegar a ser estos reproductores, manteniendo al mismo tiempo amplias posibilidades de personalización para adaptarse a tus necesidades en lo que respecta al diseño.

1. Audio Waveform Player with Playlist

Audio Waveform Player with Playlist is one of my favorite HTML5 audio players. It borrows some design elements from the SoundCloud player and throws in some additional features that are useful for those hosting their own audio.

Audio Waveform Player with Playlist

Este reproductor de audio es totalmente responsivo y personalizable incluye además útiles opciones, aquí te indicamos algunas:

  • tiempo de inicio y de fin
  • descarga de audio
  • velocidad de reproducción
  • posibilidad de compartir en redes sociales
  • lista de reproducción
  • “tooltips” o bocadillos emergentes de ayuda
  • y mucho más

Una excelente solución para podcasts, bandas de música, y similares, para audio alojado de forma privada en Google Drive, Amazon S3, e incluso SoundCloud.

Con su robusta API y callbacks, descubrirás que Audio Waveform Player with Playlist es potente además de estar bien diseñado.

2. HTML5 Audio Player with Playlist

HTML5 Audio Player with Playlist es otra potente opción.

Con una API poderosa y diseños ilimitados para el reproductor, podrás usar este reproductor de audio HTML5 en cualquier forma que te puedas imaginar.

HTML5 Audio Player with Playlist

Características que incluye:

  • admite listas de reproducción en formato XML, HTML o en la base de datos
  • crea listas de reproducción automáticamente a partir de carpetas
  • ordena y añade elementos a la lista mediante simplemente arrastrándolos
  • combina múltiples listas o canciones
  • admite múltiples instancias
  • Alternativa en formato Flash para plataformas que no admitan HTML
  • y mucho más

Tanto en forma como en función, este reproductor de audio tiene muchas opciones, estupenda opción para podcasts, SoundCloud, y much más.

HTML5 Audio Player with Playlist posiblemente sea el reproductor de audio responsivo HTML5 definitivo.

3. MP3 Sticky Player

Lo mejor de MP3 Sticky Player es que… ¡su posición se puede fijar!

Este potente, responsivo y totalmente personalizable reproductor de audio HTML puede añadirse fácilmente a la parte superior o inferior de tu página web, y funciona perfectamente en los principales navegadores y dispositivos móviles.

MP3 Sticky Player

Entre otras importantes características que incluye están las siguientes:

  • es compatible con Google Drive, Amazon S3 y todos los servicios y servidores que permiten el acceso de mp3 a través de streaming
  • carga listas de reproducción vía XML, HTML, carpetas mp3, podcasts, YouTube o SoundCloud
  • además admite vídeos en mp4 y de YouTube
  • admite la mezcla de listas de reproducción
  • deeplinking opcional
  • y mucho más

Encontrarás infinitas opciones y seis diseños distintos de interfaz con archivos PSD incluidos.

MP3 Sticky Player podría ser el reproductor HTML5 fijo ideal a fijar en tu sitio web.

4. sPlayer - Super HTML5 Music Player

sPlayer - Super HTML5 Music Player diluye la línea que separa los reproductores de sitios web y los de escritorio:

sPlayer - Super HTML5 Music Player

"sPlayer lleva HTML5 al límite, es ciertamente el primer reproductor de música HTML5 de su clase, lo que lo convierte en la librería JavaScript para audio con mayor número de características y funciones."

Características que incluye:

  • admite múltiples listas de reproducción
  • retransmisión de radio y en tiempo real
  • grupo de iconos para géneros de música
  • búsqueda en tiempo real
  • enlaces para compartir

Puedes incluso importar música almacenada localmente con etiquetas ID3 y mucho, mucho más.

Desde la web al ordenador, totalmente responsivo, admite además varios formatos de audio distintos (mp3, ogg, oga, aac, m4a, y mp4), sPlayer - Super HTML5 Music Player está preparado para que lo personalices y hagas tuyo.

5. All in One Audio and Radio Player

All in One Audio and Radio Player está preparado para las retransmisiones, con independencia de que lo que quieras sea difundir una canción, crear una lista de reproducción, o emitir audio en tiempo real.

All in One Audio and Radio Player

Este atractivo reproductor admite:

  • transmisión de los formatos AAC y AAC+
  • SoundCloud
  • Shoutcast
  • Icecast
  • Spotify
  •  iTunes
  • MP3
  • OGG
  • Wav

Con diferentes temas y potente API, usted puede personalizar este reproductor de audio HTML5 en cualquier tipo de forma que puedas imaginar.

Algunas de sus características:

  • Gestos táctiles en móvil y control mediante teclado
  • Imagen de fondo y soporte degradado CSS
  • Potente API y documentación detallada
  • Utilizar varias instancias en una sola página
  • Y mucho más

All in One Audio and Radio Player es una opción impresionante para reproductores de audio de HTML5.

6. Responsive HTML5 Audio Player PRO With Playlist

La respuesta HTML5 Audio Player PRO con lista de reproducción es una opción sólida. Con una interfaz totalmente personalizable, podrás integrar este reproductor de audio perfectamente en tu diseño de página web.

También tiene una versión para WordPress.

Responsive HTML5 Audio Player PRO With Playlist

Entre algunas de sus características están las siguientes:

  • Opciones descargar y shuffle
  • Funciones para compartir en redes sociales
  • Categorías para las listas de reproducción
  • Opción de búsqueda
  • Y mucho más

Haz algo de seguimiento con Google Analytics y configura la creación automática de listas de reproducción basadas en la organización de la carpeta, estarás en funcionamiento en un momento.

Si quieres un sólido HTML reproductor de audio que se pueda personalizar para coincidir con tu propio diseño, échale un vistazo a Responsive HTML5 Audio Player PRO With Playlist.

7. ProgressionPlayer - Responsive Audio/Video Player

Si necesitas incluir vídeo junto con tu audio, querrás usar el ProgressionPlayer - Responsive Audio/Video Player. Es muy sencillo modificarlo, es totalmente responsivo, e incluye todas las características básicas que podrías desear en un reproductor de audio HTML5.

ProgressionPlayer - Responsive AudioVideo Player
"Flash personalizado y reproductores Silverlight que imitan la API del elemento media de HTML5 para los navegadores más antiguos."

Características que incluye:

  • ilimitadas instancias de audio por página
  • cinco diseños de apariencia o “skins”
  • Listas de reproducción de audio
  • Preparado para pantallas retina
  • Y mucho más

ProgressionPlayer - Responsive Audio/Video Player es perfecto para crear múltiples instancias en una misma página, ya que los reproductores se detienen automáticamente cuando se activa otro.

Hay una versión disponible para WordPress.

8. Single jQuery Audio Player (Music and Radio)

Con su limpio diseño y singulares características, Single jQuery Audio Player (Music and Radio) es una excelente solución para la retransmisiones en vivo y para los artistas dedicados a la música.

Cada instancia del reproductor puede configurarse de forma distinta usando la útil API del plugin.

  • Descarga directa
  • Música de Apple y de Amazon
  • Edita el título, el nombre del artista, y la ilustración del audio
Single jQuery Audio Player Music and Radio

Entre algunas de sus útiles características se encuentran:

  • Admite el streaming en vivo/radio, Shoutcast, Icecast y SoundCloud
  • Admite los formatos MP3, OGG, y WAV
  • Detallada documentación
  • Amigable a los gestos táctiles
  • Y mucho más

Lo mejor de todo, entra en pausa automáticamente y detiene la reproducción cuando se un nuevo reproductor se inicia en la misma página.

Con su minimalista diseño y su potente API, Single jQuery Audio Player (Music and Radio) es uno de los mejores reproductores HTML5 de audio que existen para músicos y para las transmisiones en vivo.

9. DS SoundCloud Custom Music Player

Si amas SoundCloud, pero quieres usar un reproductor con tu propio diseño, lo que estás buscando es Custom Music Player.

DS SoundCloud Custom Music Player
“DS SoundCloud Custom Music Player es un plugin jQuery dinámico diseñado para permitir la transmisión en vivo de audio nativo en sitios web, usando HTML5 y jQuery. Está diseñado basándose en la tecnología de SoundCloud y puede usarse como un sustituto a los reproductores incrustados de SoundCloud.”

Características que incluye:

  • Es ligero, basado en la nube y no usa Flash
  • Carga automáticamente datos de SoundCloud
  • Se integra con Facebook y Twitter
  • Admite listas de reproducción personalizadas
  • Y mucho más

DS SoundCloud Custom Music Player es una alternativa viable al reproductor predeterminado de SoundCloud, con algo extra añadido.

10. Clean HTML Audio Player with Playlist

Limpio y simple.

Clean HTML Audio Player with Playlist es precisamente eso.

Clean HTML Audio Player with Playlist

Este reproductor puede gestionar audio alojado de forma privada o transmitido.

Algunas de sus otras características son las siguientes:

  • Admite listas de reproducción y múltiples instancias
  • Sencilla inicialización HTML con atributos para los datos
  • Totalmente responsivo y preparado para dispositivos retina
  • Y mucho más

Clean HTML Audio Player with Playlist es sencillo, directo y tal y como proclama su nombre, limpio.

11. Easy Audio Player

Easy Audio Player es un reproductor de audio sólido, con lo esencial y bien acabado que puedes personalizar a tu gusto.

Incluye completo soporte de la API y está optimizado para dispositivos móviles.

Easy Audio Player

Otras características que incluye:

  • Todos los botones son opcionales, configúralos a tu gusto
  • Animaciones de inicio opcionales
  • Documentación detallada
  • Cuatro “skins” con archivos PSD
  • Alternativa Flash para navegadores antiguos
  • Y mucho más

Easy Audio Player es fácil de configurar, de usar y una alternativa sencilla.

12. tPlayer - audio player (with playlist) v1.5

En caso buscar un reproductor de audio HTML5 con un aspecto moderno y un buen diseño, the tPlayer - audio player (with playlist) v1.5 sería mi elección.

Su exclusivo botón SVG, sus animaciones, su elástico lateral para la portada y su barra deslizadora son como caramelos para los ojos en este limpio reproductor.

tPlayer - audio player with playlist v15

Aquí tienes algunas de sus características:

  • Botones para compartir en Facebook, Twitter, Google+ y Tumblr
  • Tiene un modo compacto y puedes ocultar la lista de reproducción para conseguir un aspecto más limpio
  • Incluye enlaces para compra y para descarga
  • Puedes usarlo en modo de reproductor único o con lista de reproducción
  • Puedes cambiar los esquemas de color de su diseño
  • Y mucho más

tPlayer - audio player (with playlist) v1.5 es un reproductor con un aspecto excelente, y también está disponible en WordPress.

13. ZoomSounds - Neat HTML5 Audio Player

ZoomSounds - Neat HTML5 Audio Player es un reproductor superventas por una buena razón.

Con un diseño similar a SoundCloud, ofrece distintos estilos y “skins” que hacen que sea muy fácil diseñar tu propio reproductor como más te guste.

ZoomSounds - Neat HTML5 Audio Player

Características que incluye:

  • Amigable para el SEO
  • Optimizado para gestos táctiles
  • Retransmite audio de YouTube
  • Totalmente responsivo con una alternativa Flash
  • Admite reproducciones de SoundCloud con clave de la API
  • Y mucho más

Con ZoomSounds - Neat HTML5 Audio Player, tu reproductor tendrá mejor aspecto que nunca.

14. Chameleon HTML5 Audio Player With/Without Playlist

Chameleon HTML5 Audio Player With/Without Playlist se adaptará dócilmente a tu sitio gracias a sus esquemas de color personalizables y a los elementos de su interfaz.

Chameleon HTML5 Audio Player WithWithout Playlist

Características adicionales que incluye:

  • Genera listas de reproducción a partir de carpetas con archivos en formato mp3
  • Admite múltiples instancias
  • Más de 35 opciones JS
  • Amigable para dispositivos móviles
  • Y mucho más

Chameleon HTML5 Audio Player With/Without Playlist también pueden ser adquirido para WordPress.

15. HTML5 Vinyl-styled Music Player

Como amante de los vinilos,  el reproductor HTML5 Vinyl-styled Music Player puede que sea fácilmente uno de mis favoritos.

No solo extrae el disco de la estantería con las portadas, la animación que hace girar el disco actúa como funciona como una plato real.

Brillante.

HTML5 Vinyl-styled Music Player

Algunas otras características que te podrían interesar son:

  • Crea listas de reproducción o elige el modo aleatorio
  • Optimizado para el control mediante gestos y totalmente responsivo
  • Cambia la velocidad, establece la repetición o el modo aleatorio
  • Carga las etiquetas y portadas de forma automática
  • Y mucho más

HTML5 Vinyl-styled Music Player es posiblemente el reproductor de audio más cool que puedas encontrar.

Conclusión

Estos reproductores HTML5 de audio brillan tanto en forma como en función, la mayoría de ellos permiten una personalización completa para adaptarse a las necesidades de diseño de tu web. Si estás buscando algo distinto, puedes considerar realizar modificaciones a uno de los reproductores que acabamos de mencionar o puedes construir uno propio desde cero.

En Envato Tuts+ encontrarás todo tipo de útiles recursos para aprender HTML5, como por ejemplo tutoriales de HTML5, eBooks de código y vídeo cursos sobre código. Aprende ¿Qué es HTML5?, iníciate con Decodificando HTML5, y aprovecha los cursos de HTML5 avanzado.

¿Qué reproductores de audio HTML5 son más importantes para ti?

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.