Dans cette formation vidéo, vous allez apprendre à créer et personnaliser un player audio HTML5 de A à Z qui pourra ainsi correspondre a la charte graphique de votre site internet ou encore de votre blog.

Fonctionnalités de ce player audio HTML5 :

  • Bouton de contrôle de lecture/pause
  • Affichage du nom de la source audio
  • Affichage de la durée totale de la source audio ainsi que le temps écoulé
  • Une barre de progression cliquable pour se déplacer dans la source audio
  • Gestion du volume sonore
  • Bouton de répétition de la source audio

Au sommaire de ce tuto HTML5

  • Mise en place de notre source audio en HTML5
  • Intégration de l'interface graphique avec CSS et Javascript
  • Mise en place des fonctionnalités du player : lecture, pause, durée et temps écoulé de la source audio, mode répétition ...

Jetez un oeil à ces autres tuto HTML 5, Dreamweaver CS5

Créer une application autour de moi en HTML5Créer une application autour…
Dans ce tuto HTML5 en vidéo, nous allons voir comment créer…

Pack : Créer votre site Internet, les bases pour débutantsPack : Créer votre site Internet,…
Dans ce pack, nous allons vous donner toutes les bases HTML…

Aller plus loin en HTML5 : Le drag and dropAller plus loin en HTML5 :…
Gérez le glissé/déposé avec JavaScript Vous êtes développeur…

Création et montage HTML / CSS d'un thème E-CommerceCréation et montage HTML…
Nous allons apprendre à créer un thème de site qui pourra…

Créer un site One Page complet de A à ZCréer un site One Page complet…
Dans ce tuto vidéo HTML5, CSS3 et jQuery, nous allons voir…

Montage HTML / CSS d'un site Internet ResponsiveMontage HTML / CSS d'un site…
Voici une formation sur le découpage et l'intégration d'un…

Créer un portfolio full responsive en HTML5 et CSS3Créer un portfolio full responsive…
Voici une formation pour apprendre à créer un portfolio full…

Administration en AJAX et HTML5Administration en AJAX et…
Dans ce tuto AJAX en vidéo, nous verrons comment ajouter, supprimer…

Cette formation contient 4 leçons en vidéo pour une durée totale de 1h00.
Voici le programme complet abordé au cours de cette formation :

  • Introduction00:01:11 
  • Partie 100:04:24 
  • Partie 200:20:42 
  • Partie 300:34:36 

Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto HTML 5, Dreamweaver CS5 de 1 heure 0 minute est proposée dans une résolution plus grande que l’extrait suivant :

Partagez cet extrait

Lien vers cet extrait : Embed code :

Infoprog , Formateur



Toutes les formations de Infoprog


Témoignage des clients de Infoprog

Bonjour , ton tuto est génial et facile à suivre. Surtout pour le débutant que je suis. Encore merci;

Bon tuto, bon formateur, convient parfaitement au débutant!

Bonne voix, bonne qualité vidéo. Je conseille ses tutoriels.

Facile à suivre, et beaucoup de points importants sont abordés ce qui permet d'avoir des tutos intéressants.

 

D'autres tuto de Infoprog

Galerie d'images avec son espace d'administrationGalerie d'images avec son espace d'administration
Dans ce tuto Dreamweaver CS5, en vidéo , vous allez apprendre à créer une galerie…

Réaliser un panier d'achat de A à ZRéaliser un panier d'achat de A à Z
Dans ce tuto PHP, en vidéo, vous allez apprendre à réaliser un panier d'achat de A…

Créer un champs de recherche personnalisé en CSS3Créer un champs de recherche personnalisé en CSS3
Dans ce tuto CSS3 en vidéo, vous allez apprendre à créer des champs de recherche personnalisés…

Créez un système d'upload et hébergement d'imagesCréez un système d'upload et hébergement d'images
Ce tuto PHP, réservé aux débutants comme aux utilisateurs moyens vous permettra de…

voir tous les tuto de Infoprog

Notes attribuées par les utilisateurs (1 vote)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (10)

par montagne78
(a acheté ce tuto - 23 septembre 2013)

" Bonjour et merci pour la clarté de votre tuto.

j'ai reprogrammé à l'identique votre player et sur mon pc en local ça marche très bien sur mozilla. Par contre, une fois hébergé sur internet (avec tous les fichiers sources évidemment) le player s'affiche mais ne fonctionne pas.
J'ai essayé également d'héberger vos fichiers sources avec le player fourni, et le problème est identique, bien qu'en local ça fonctionne très bien.

Merci pour votre aide. "

par agorat
(a acheté ce tuto - 11 juin 2013)

" salut infoprog, j'ai pas trouvé ton mail, alors je t'écris ici.
ça serait pas mal aussi de compléter cette formation avec playlist avec les titres qui s'enchainent, sans bdd, ni php, sans administration, un truc simple, avec ogg et mp3 pour que ça marche partout, pc/mac et smartphone/tablette, et bien personnalisable avec le css: afin de pouvoir faire des pages rapides pour des potes musiciens.
quelque chose comme ça http://goo.gl/ZGcRT , mais ya plein de probleme avec audiojs, ça bug souvent! donc un truc dont tu as le savoir faire, avec tes explications sympas en vidéo.
merci d'avance pour ta réponse
"

par Infoprog
(auteur de ce tuto - 27 mars 2013)

" Merci je vais corriger ça au plus vite ! "

par doctor-pixela voté :
(a acheté ce tuto - 27 mars 2013)

" on dirait que les fichiers de la partie 2 et la partie 3 sont inversés....

rien de grave mais ça surprend un peu au début... "

par Infoprog
(auteur de ce tuto - 14 janvier 2013)

" Je viens de finir de tourner la formation, j'envoi tout ça demain ;) Au programme, près d'une heure pour apprendre à créer une playlist pour le player audio avec son espace administrateur. "

par Infoprog
(auteur de ce tuto - 12 janvier 2013)

" Je confirme pour l'espace administration qui sera géré en PHP :) "

par giuseppe
(a acheté ce tuto - 12 janvier 2013)

" l’idéal ce serai en PHP / MySQL ....avec Upload.... ;-)
aller op dans le panier en attendant la 2 partie.

"

par Infoprog
(auteur de ce tuto - 12 janvier 2013)

" Pour compléter cette formation, je vais tourner cette après-midi une autre formation pour créer une playlist ! "

par Infoprog
(auteur de ce tuto - 12 janvier 2013)

" Oui tout à fait, le player fonctionne exactement comme le player audio de base, vous pouvez donc gérer une playlist via une administration ! "

par giuseppe
(a acheté ce tuto - 12 janvier 2013)

" Bonjour

Je voudrai savoir et-il possible de gérer la Playlists audio via une administration ??
merci d'avance "

 

Donnez votre avis ou posez une question au formateur.

Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous

Ce tuto en résumé ...

Ce tuto HTML 5, Dreamweaver CS5 d’une durée de 1 heure 0 minute a été acheté 143 fois et a reçu une note moyenne de 5/5.

Ce tuto a été publié le 11 janvier 2013 par Infoprog, contributeur, ayant reçu une note moyenne de 4,6/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto HTML Audio.

Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.

Cette formation qui se présente sous la forme de plusieurs vidéos, vous expliquera étape par étape, toutes les manipulations présentées par le formateur.

Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.

N'hésitez pas à nous contacter si vous avez la moindre question !