Advertisement
  1. Web Design
  2. HTML/CSS
  3. HTML

Les 15 meilleurs lecteurs audio HTML5

Scroll to top
Read Time: 9 min

() translation by (you can also view the original English article)

Heureusement, HTML5 est devenu la norme pour le design des sites Web multimédias. Fini les casse-tête des plug-ins Flash et Silverlight, car la prise en charge HTML5 des éléments de page audio et vidéo a apporté un standard sur toutes les plateformes, sans oublier les avantages du "SEO" (l'optimisation des moteurs de recherche) et de la mise en cache hors ligne.

Un autre avantage de HTML5 est sa facilité d'adaptation à différentes plateformes. Cela rend la conception, le développement et le déploiement de lecteurs audio personnalisés beaucoup plus facile par rapport au passé; ainsi que les faire fonctionner sur les desktops, les mobiles et divers systèmes d'exploitation.

Les 15 meilleurs lecteurs audio HTML5 suivants sur Envato sont d'excellents exemples de la perfection de ces lecteurs, tout en étant faciles à personnaliser en fonction de vos besoins.

1. Audio Waveform Player with Playlist

"Audio Waveform Player with Playlist" est l'un de mes lecteurs audio HTML5 préférés. Il emprunte certains éléments de design au lecteur SoundCloud et ajoute quelques fonctionnalités supplémentaires utiles pour ceux qui hébergent leur propre audio.

Audio Waveform Player with PlaylistAudio Waveform Player with PlaylistAudio Waveform Player with Playlist

Ce lecteur entièrement réactif et personnalisable comprend également d'autres options utiles telles que :

  • temps de début et de fin
  • téléchargement du son
  • vitesse de lecture
  • partage dans les réseaux sociaux
  • playlists
  • infobulles
  • et beaucoup plus

Une excellente solution pour les podcasts, les bandes, et plus, pour l'audio qui est auto-hébergé sur Google Drive, Amazon S3, et même SoundCloud.

Avec son robuste API et ses rappels, vous allez trouver "Audio Waveform Player with Playlist" à la fois bien conçu et puissant.

2. HTML5 Audio Player with Playlist

"The HTML5 Audio Player with Playlist" est une autre option efficace.

Avec une API puissante et une apparence de lecteur illimitée, vous pouvez utiliser ce lecteur audio HTML5 à peu près de n'importe quelle manière que vous pouvez imaginer.

HTML5 Audio Player with PlaylistHTML5 Audio Player with PlaylistHTML5 Audio Player with Playlist

Fonctionnalités :

  • support des playlists XML, HTML ou base de données
  • autocréation des playlists à partir de dossiers
  • trie et déplacement des items de votre playlist
  • mixage de plusieurs playlists/chansons
  • support des instances multiples
  • fallback du flash
  • et beaucoup plus 

Dans la forme et la fonction, ce lecteur audio a beaucoup d'options et il est un excellent lecteur pour les podcasts, SoundCloud, et plus encore.

HTML5 Audio Player with Playlist peut très bien être l'ultime lecteur audio HTML5 reactif.

3. MP3 Sticky Player

La meilleure chose à propos de "MP3 Sticky Player" c'est qu'il est ... sticky (collant) !

Ce lecteur audio HTML puissant, réactif et entièrement personnalisable peut être facilement ajouté en haut ou en bas de votre page Web, et fonctionne parfaitement sur tous les principaux navigateurs et appareils mobiles.

MP3 Sticky PlayerMP3 Sticky PlayerMP3 Sticky Player

Quelques autres caractéristiques importantes sont :

  • support de Google Drive, Amazon S3, et tous les services et serveurs qui permettent l'accès aux flux mp3
  • chargement des playlists via XML, HTML, dossier mp3, podcasts, YouTube ou SoundCloud
  • support de le mp4 et les vidéos Youtube
  • support des mixtes playlists 
  • deep linking optionel
  • et beaucoup plus

Vous trouverez beaucoup d'options et six options de design différentes avec des fichiers PSD inclus.

MP3 Sticky Player peut être le parfait lecteur audio HTML5 pour le coller sur votre site web.

4. sPlayer - Super HTML5 Music Player

"sPlayer - Super HTML5 Music Player" brouille la frontière entre les lecteurs audio de site web site Web et ceux de bureau :

sPlayer - Super HTML5 Music PlayersPlayer - Super HTML5 Music PlayersPlayer - Super HTML5 Music Player

"SPlayer pousse le HTML5 à la limite, il est certainement le premier lecteur audio HTML5 de son genre, ce qui en fait la bibliothèque audio JavaScript la plus riche en fonctionnalités."

Fonctionnalités :

  • playlists multiples
  • radio et streaming en direct
  • icônes de genre de musique
  • recherche en directe
  • partage de liens

Vous pouvez même importer de la musique locale avec des tags ID3 et bien plus encore.

Du Web au desktop, avec le support mobile complet et avec différents formats audio pris en charge (mp3, ogg, oga, aac, m4a et mp4), le lecteur sPlayer - Super HTML5 Music Player est prêt à vous être confié.

5. All in One Audio and Radio Player

Que vous souhaitiez écouter une chanson, créer une playlist ou diffuser du son, "All in One Audio and Radio Player" est prêt à la diffusion.

All in One Audio and Radio PlayerAll in One Audio and Radio PlayerAll in One Audio and Radio Player

Ce joli lecteur supporte :

  • AAC and AAC+ streaming
  • SoundCloud
  • Shoutcast
  • Icecast
  • Spotify
  • iTunes
  • MP3
  • OGG
  • Wav

Avec des thèmes différents et une API puissante, vous pouvez personnaliser ce lecteur audio HTML5 de n'importe quelle manière que vous pouvez imaginer.

Quelques fonctionnalités :

  • support du controle par clavier
  • support de l'image de fond et de dégradé CSS
  • API puissante et documentation détaillée
  • multiples instances sur une seule page
  • et beaucoup plus

All in One Audio and Radio Player est une option impressionnante pour les lecteurs audio HTML5.

6. Responsive HTML5 Audio Player PRO With Playlist

"Responsive HTML5 Audio Player PRO With Playlist" est un choix solide. Avec son interface entièrement personnalisable, vous pouvez intégrer ce lecteur audio parfaitement dans le design de votre site web.

Il est disponible également en version WordPress.

Responsive HTML5 Audio Player PRO With PlaylistResponsive HTML5 Audio Player PRO With PlaylistResponsive HTML5 Audio Player PRO With Playlist

Certaines de ses principales fonctionnalités :

  • options de téléchargement et de lecture aléatoire
  • partage dans les réseaux sociaux
  • catégories de playlist
  • option de recherche
  • et plus

Accédez à un suivi Google Analytics et configurez la création automatique de playlists en fonction de l'organisation de votre répertoire, et vous serez opérationnel en un rien de temps.

Pour un lecteur audio HTML solide qui peut être personnalisé pour correspondre à votre propre design, regardez de plus près le Responsive HTML5 Audio Player PRO With Playlist.

7. ProgressionPlayer - Responsive Audio/Video Player

Si vous avez besoin d'inclure de la vidéo avec votre audio, vous aurez besoin d'utiliser le "ProgressionPlayer - Responsive Audio/Video Player". Il est facile à personnaliser, totalement réactif et inclut toutes les fonctionnalités de base que vous aurez besoin dans un lecteur audio HTML5.

ProgressionPlayer - Responsive AudioVideo PlayerProgressionPlayer - Responsive AudioVideo PlayerProgressionPlayer - Responsive AudioVideo Player
"Des lecteurs Flash et Silverlight personnalisés qui imitent l'API HTML5 MediaElement pour les anciens navigateurs"

Fonctionnalités  :

  • Nombre illimité d'instances de lecteurs par page
  • comprend cinq thèmes
  • playlists audio
  • support du retina display
  • et plus

ProgressionPlayer - Responsive Audio/Video Player  est parfait pour plusieurs instances sur la même page, car les lecteurs s'arrêtent automatiquement lorsque les autres lecteurs sont activés.

Une version WordPress a également été mise à disposition.

8. Single jQuery Audio Player (Music and Radio)

Avec son magnifique design et ses caractéristiques uniques, "Single jQuery Audio Player (Music and Radio)" est une excellente solution pour les streaming en direct et les artistes de musique.

Chaque instance de lecteur peut être configurée différemment en utilisant son API plugin :

  • téléchargement direct
  • Musique d'Apple et d'Amazon
  • modifier le titre, le nom de l'artiste et l'image de l'illustration
Single jQuery Audio Player Music and RadioSingle jQuery Audio Player Music and RadioSingle jQuery Audio Player Music and Radio

Certaines de ses autres fonctionnalités utiles comprennent :

  • Shoutcast, Icecast, SoundCloud, et la radio/direct streaming supportés
  • supporte MP3, OGG et WAV
  • documentation détaillée
  • effleurement de l'écran
  • et plus

Le meilleur de tous, il s'arrête automatiquement et arrête la lecture quand un nouveau lecteur est initié sur la même page.

Avec son design minimaliste et sa puissante API, Single jQuery Audio Player (Music and Radio) est l'un des meilleurs lecteurs audio HTML5 pour les musiciens et le streaming en direct.

9. DS SoundCloud Custom Music Player

Si vous aimez SoundCloud, mais vous voulez utiliser votre propre lecteur stylisé, vous avez donc besoin de "DS SoundCloud Custom Music Player".

DS SoundCloud Custom Music PlayerDS SoundCloud Custom Music PlayerDS SoundCloud Custom Music Player
"DS SoundCloud Music Player est un plugin jQuery dynamique conçu pour permettre le streaming audio natif sur les sites web en utilisant HTML5 et jQuery. Il est conçu sur la base de la technologie SoundCloud et peut être utilisé en remplacement des lecteurs intégrés de SoundCloud."

Fonctionnalités :

  • léger, basé sur le cloud, et pas de Flash
  • récupération automatique des données de SoundCloud
  • Intégration de Facebook et Twitter
  • support de playlist personnalisé
  • et plus

DS SoundCloud Custom Music Player est une alternative viable au lecteur SoundCloud par défaut, avec un petit supplément ajouté.

10. Clean HTML Audio Player with Playlist

Propre et simple.

"Clean HTML Audio Player with Playlist" est exactement ça.

Clean HTML Audio Player with PlaylistClean HTML Audio Player with PlaylistClean HTML Audio Player with Playlist

Auto-hébergement ou broadcast, ce lecteur peut le gérer.

Les fonctionnalités :

  • support du playlist et des instabces multiples
  • init HTML simple avec des attributs de données
  • entièrement interactif et supporte le retina display
  • et plus

Clean HTML Audio Player with Playlist est simple, direct, et comme le dit le titre, clean (propre)..

11. Easy Audio Player

"Easy Audio Player" est un lecteur audio solide et complet qui peut être personnalisé selon vos besoins.

Il comprend un support complet de l'API et est optimisé pour les mobiles.

Easy Audio PlayerEasy Audio PlayerEasy Audio Player

Fonctionnalités :

  • tous les boutons sont optionnels, configurez comme vous voulez
  • animation d'intro optionnelle
  • documentation détaillée
  • quatre thèmes avec les fichiers PSD
  • fallback d'Adobe Flash
  • et plus

Easy Audio Player est facile à configurer, facile à utiliser et c'est un choix facile.

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

Pour un lecteur audio HTML5 au design moderne, "tPlayer - audio player (with playlist) v1.5" est l'un de mes top choix.

Son bouton SVG exclusif, ses animations et son curseur de recherche apportent un joli coup d'œil à ce propre lecteur.

tPlayer - audio player with playlist v15tPlayer - audio player with playlist v15tPlayer - audio player with playlist v15

Fonctionnalités :

  • partage Facebook, Twitter, Google+ et Tumblr
  • mode compact et cacher la playlist pour une vue plus propre
  • inclut des liens d'achat ou de téléchargement
  • modes solo et playlist
  • changer les schémas de couleurs
  • et beaucoup plus

tPlayer - audio player (with playlist) v1.5 est un super lecteur, et il est également disponible dans WordPress.

13. ZoomSounds - Neat HTML5 Audio Player

"ZoomSounds - Neat HTML5 Audio Player" est un lecteur très vendu pour une bonne raison.

Avec son design penchant vers SoundCloud, il offre plusieurs styles et thèmes qui facilitent la conception de votre lecteur comme vous le souhaitez.

ZoomSounds - Neat HTML5 Audio PlayerZoomSounds - Neat HTML5 Audio PlayerZoomSounds - Neat HTML5 Audio Player

Fonctionnalités :

  • SEO friendly
  • tactile optimisé
  • diffuse l'audio de Youtube
  • entièrement réactif avec la backup d'Adobe Flash
  • supporte les flux SoundCloud avec la clé API
  • et beaucoup plus

Avec ZoomSounds - Neat HTML5 Audio Player, votre audio n'a jamais été aussi bien.

14. Chameleon HTML5 Audio Player With/Without Playlist

"The Chameleon HTML5 Audio Player With/Without Playlist" s'intégrera facilement dans votre site web grâce à ses couleurs personnalisables et à ses éléments on-screen.

Chameleon HTML5 Audio Player WithWithout PlaylistChameleon HTML5 Audio Player WithWithout PlaylistChameleon HTML5 Audio Player WithWithout Playlist

Fonctionnalités :

  • générer des playlists à partir des répertoires avec des fichiers mp3
  • supporte les instances multiples
  • + de 35 options de JS
  • mobile friendly
  • et plus

Chameleon HTML5 Audio Player With/Without Playlist peut également être acquis pour WordPress.

15. HTML5 Vinyl-styled Music Player

Comme quelqu'un qui aime les disques vinyle, "HTML5 Vinyl-styled Music Player" est facilement l'un de mes favoris de cette liste.

Non seulement le disque sort de la pochette de l'album, mais le disque animé tourne comme une roue de frottement.

Brilliant.

HTML5 Vinyl-styled Music PlayerHTML5 Vinyl-styled Music PlayerHTML5 Vinyl-styled Music Player

Autres fonctionnalités qui pourraient vous intéresser :

  • créer une playlist ou choisir le mode aléatoire
  • tactile optimisé et entièrement réactif
  • changer la vitesse et régler la répétition ou le mode aléatoire
  • charge les étiquettes et les couvertures automatiquement
  • et plus

HTML5 Vinyl-styled Music Player est facilement le lecteur audio HTML5 le plus cool que vous allez trouver.

Conclusion

Ces lecteurs audio HTML5 brillent dans la forme et la fonction, avec une grande majorité d'entre eux permettant une personnalisation complète pour répondre aux besoins de design de votre site web. Si vous recherchez quelque chose de différent, vous pouvez envisager d'apporter des modifications à l'un des lecteurs audio mentionnés précédemment ou de créer le vôtre à partir de zéro.

Sur Envato Tuts+, vous trouverez toutes sortes de ressources utiles pour apprendre le HTML5, comme HTML5 tutorialscode eBooks, et video code courses. Apprenez What Is HTML5?, découvrez Decoding HTML5 et suivez des cours HTML5 avancés.

Quelles fonctionnalités du lecteur audio HTML5 sont les plus importantes pour vous?

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.