Ressource HTML-CSS : Player Audio HTML5

Voici une nouvelle ressource HTML5/CSS/PSD/jQuery qui devrait vous plaire. Ce player vous permet de lire des pistes audio directement en utilisant la balise HTML5 audio. Le lecteur a été testé et fonctionne sur Safari, Firefox, Chrome et Opera.
PSD Réalisé par Jeremy

Pour assurer une compatibilité maximale il faut placer des versions .ogg des pistes audio

Démonstration


Télécharger la ressource
(Réservé aux membres)

Après avoir appris sur Internet quoi de plus normal que de partager à son tour ? Passionné par le web depuis un peu plus de 5 ans maintenant j'aime partager mes compétences et mes découvertes avec les personnes qui ont cette même passion pour le web : Vous.

Vous aimerez aussi
22 commentaires
Ajouter un commentaire

Fabrice Theytaz Il y a 2 jours Répondre

>> Après avoir appris sur Internet quoi de plus normal que de partager à son tour ?

On ne doit pas avoir la même notion du partage... Partager contre rémunération, personnellement j'appelle ça vendre !!

leonidas77 Il y a 15 jours Répondre

un grand merci pour tous vos tutos et autres cadeaux précieux.
Grâce à vous, je progresse chaque jour.
Encore merci

coenonympha Il y a 30 jours Répondre

superbe merci

bjmdrx Il y a 2 mois Répondre

A priori ça ne fonctionne pas sur firefox.

Aka13 Il y a 3 mois Répondre

Bonjour,

Serait-il possible de faire en sorte qu'il lis les fichiers audios en streeming qui ne sont donc pas des mp3 (utile pour les webradio) ?

gobman589 Il y a 4 mois Répondre

Bonjour,

Lorsque j'ajoute un fichier .ogg dans ce lecteur, au bout de quelques secondes, la musique se coupe régulièrement. Avez-vous une solution pour corriger ce problème ?

Merci

igors Il y a 4 mois Répondre

C'est sympa comme resource

Kaneim Il y a 5 mois Répondre

Merci, congrat!

brian-du-76 Il y a 6 mois Répondre

Moi j'ai trouver la solution et en entière Enfaîte dans le dossier Que tu as télécharger tu met Parce exemple une musique et tu la renomme en e ou hh ou lp Mais modifier ses image Sans les renommer dans Img Et apres vous avez juste a transferer et voila le travaille

Kinnor Il y a 6 mois Répondre

Gros merci

Doberdan Il y a 6 mois Répondre

Bonjour a tous je suis nv sur ce site, tous d'abord superbe ce site, et un grand merci pour toutes ces formation. continuer comme ça.

petit question peux-t'on m'expliquer comment crypter mes fichier .js pour placer sur mon site svp.

dawink Il y a 6 mois Répondre

Est il possible de mettre un autoplay ???

Merci

Grafikart Il y a 6 mois

Suffit de lancer play() au chargement initial

dawink Il y a 6 mois

Ok je comprends mais où SVP.. ?

Désolé pour ignorance^^

dawink Il y a 6 mois

Personne pour une reponse SVP ?

Merci

dawink Il y a 6 mois - Répondre

J ai trouvé^^
Pour info =>

$('.player').each(function(){
// On stock les différents éléments (pour éviter de rechercher dans le DOM plus tard)
var e = $(this);
var audio = new Audio();
audio.autoplay=true;

Demago Il y a 6 mois Répondre

Merci, c'est un excellent travail !

Karottes Il y a 6 mois Répondre

Ça c'est du bon ! Merci Jo' !

dams20 Il y a 6 mois Répondre

Je me sent particulièrement idiot, quoi que je fasse impossible de faire fonctionner le lecteur sur mon serveur. Même en local ...

dams20 Il y a 6 mois

J'ai trouvé une solution, mettre les fichiers en *.mp3 dans le HTML et mettre les fichiers en *.mp3 ET en *.ogg sur le serveur.

Si il manque l'un des deux fichiers le lecteur ne fonctionne pas, et l’extension *.ogg dans le HTML ne permet pas de lire la playlist.

Résultat les fichiers sont en double et en terme de place c'est pas génial, si quelqu'un à une solution je suis preneur.

Grafikart Il y a 6 mois

Aucune solution car les navigateur ne sont pas tous d'accord sur les formats.Firefox par exemple n'est pas capable de lire du mp3 (pour ça que le player switch en .ogg )
Sur safari c'est l'inverse et c'est l'ogg qui n'est pas reconnu.

Pour le moment aucune autre solution

dams20 Il y a 6 mois

Merci pour l'information

karottes Il y a 6 mois - Répondre

En utilisant VRAIMENT HTML5, il suffirait de proposer plusieurs fichiers (de formats différents, ogg et mp3); le navigateur se charge de choisir le fichier qu'il "préfère". Mais je vois pas une seule trace de HTML5 dans tes sources si ce n'est le doctype ...

renorcht Il y a 6 mois Répondre

Merci c'est terrible de voir les gens qui suivent le mouvement et jouent le jeux de HTML5/CSS3... Et hop en partage sur blog.rdesigns.fr

rejeb01 Il y a 6 mois Répondre

excellent rien à dire.

zebulonbof Il y a 6 mois Répondre

Pas mal le design merci

krim Il y a 6 mois Répondre

Whaou superbe comme d'hab !!

c_jpg Il y a 6 mois Répondre

Good

Dexyne Il y a 6 mois Répondre

Super merci =).

graphiweb Il y a 6 mois Répondre

Super Player Audio HTML5 merci sa seras fort utile

Laisser un commentaire

Si vous avez une question il est conseillé d'utiliser le forum si vous voulez une réponse sûre.