BALISE HTML5 <audio> : le son sur une page web

Slides:



Advertisements
Présentations similaires
S'initier au HTML et aux feuilles de style CSS
Advertisements

HTML 4 et CSS 2 Cours 2 Faire acquérir à l'étudiant des connaissances de niveau intermédiaire en programmation HTML et de l'initier aux feuille de style.
SRT 2 NTP. Nécessité ● Les ordinateurs utilisent des horloges à quartz – Peu de précision – Tendance à dériver – Parfois plusieurs secondes par jour.
Tutoriel : faire le montage des enregistrement audio des p’tit déj’ Contact Ce tutoriel est conçu pour le logiciel libre Audacity, téléchargeable gratuitement.
GCstar Gestionnaire de collections personnelles Christian Jodar (Tian)
QuickPlace de LOTUS Logiciel générateur de SITE WEB : Installé sur un serveur (grenet), Permet de créer / gérer / utiliser un site privé, De donner des.
LOGICIEL DOCUMENTAIRE PMB TUTORIEL A L'USAGE DES ELEVES ET DES ENSEIGNANTS Merci à Mme BATBIE, professeur-documentaliste – Collège Charloun Rieu – Saint-Martin.
OptiMail Jipiciel ©. Optimiser les listes de diffusion et éviter les redondances de mails. Optimiser les listes de diffusion et éviter les redondances.
Outils et scénarios d’édition collaborative en Haute École Étienne Vandeput Projet HETICE © CRIFA - ULg.
Présentation LabPlus v3. Solution novatrice en Technologies de l’information Solution novatrice en Technologies de l’information Application pour la Gestion.
Le référencement par les moteurs Favoriser la bonne indexation de nos sites.
Les profils du SEDA confection de profil avec Agape.
Made with OpenOffice.org 1 Travailler en réseau intranet à l'école Un réseau : pourquoi ? Architecture du réseau Partager un dossier Enregistrer en réseau.
Cours de HTML suite. Sommaire...  Tableaux : le chevauchement de cellules (avec colspan et rowspan). Tableaux : le chevauchement de cellules (avec colspan.
Formation Utilisateur Nouveautés de la V3.2 de PRODIGE Eric Bleuzet Philippe Terme Catherine Chamard-Bois.
Utilisation du process marché  l ’objectif est d ’avoir un seul document de référence permettant de maîtriser chaque étape de la commande publique  ce.
Logiciel Assistant Gestion d’Événement Rémi Papillie (Chef d’équipe) Maxime Brodeur Xavier Pajani Gabriel Rolland David St-Jean.
ROYAUME DU MAROC Ministère de l'Éducation Nationale, de l'Enseignement Supérieur, de la Formation des Cadres et de la Recherche Scientifique Département.
1 Gestion Electronique de documents (GED) ✔ Définition Efficacité d'une entreprise dépend de la capacité à traiter et consulter les informations qu'elle.
1 TER 2012 Engilberge, Lludice, M'rah Flex Web Roster /32.
29 Octobre P. 1 SNL Yvelines – projet de site Internet Projet de site internet à l’usage des membres actifs Présentation aux GLS.
GOOGLE MAPS ANDROID API V2. INTRODUCTION TO THE GOOGLE MAPS ANDROID API V2.
Modèles économiques liés aux logiciels libres Association GUILDE
Cours de HTML suite 3. Sommaire...  Les formulaires. Les formulaires.  Structure basique du formulaire, balise. Structure basique du formulaire, balise.
Guide d’utilisation d’Europresse. Europresse : Qu’est-ce que c’est Un portail d’archives de presse Plus de 3000 sources disponibles dont environ 650 en.
Baladodiffusion Sandra Laine, Service national du RÉCIT Domaine des langues Source image: Wikimedia CommonsWikimedia Commons.
Utiliser le nouveau site internet du lycée niort/
Cahier des charges.
Premiers pas avec PowerPoint
Traitement de texte : notions avancées
Recherche Summon - HINARI (Module 3)
SOLUTIONS E-COMMERCE SHOPUSH.COM.
Google analytics.
Publication site AROEVEN
La Bibliothèque numérique élève: Prisecariu mihaela classe – la Xe a professeur coordinateur: Bengescu otiliA.
Séminaire Novembre 2006 Zephir : Déploiement et supervision des serveurs Eole.
Envoie et Reception d’sms via les commande AT
BEN AMMAR Mouadh Master 2 PLS IHM
Veille technologique Nassima Mahcer 17 MAI 2017.
Javadoc et débogueur Semaine 03 Version A16.
Présentation de JQUERY
Asynchronous Javascript And Xml
Nouvelles balises de structure
Le CSS Principe de séparation du contenu et de la mise en forme
1ers pas des utilisateurs migrés
Création Et Modification De La Structure De La Base De Données
Présentation initiale
Cours N°10: Algorithmiques Tableaux - Matrices
Guide Utilisateur. Guide Utilisateur.
Structuration du contenu
La facture électronique
Faire preuve de professionnalisme au quotidien.
Portail de saisie et de restitution
5 Analyse avec Designer d'Oracle
La facture électronique
Exploiter le WEB Etape no6.
Utilisation d’ATRIUM : Retour d’expérience au CC
Portail de saisie et de restitution
7 Contraintes d’intégrité en SQL
Faire preuve de professionnalisme au quotidien.
Présentation générale
7- Nouveaux services pédagogiques pour les élèves
Groupement d’Employeurs Profession Sport et Loisirs en Picardie
Exploiter le Web Etape 3.
Présenté par Viviane Lévesque
Patrick Poulingeas (CRI de Limoges)
STSWEB Rattacher Services et ARE Gestion des pondérations
Accès et utilisation des ressources e-Bug
Site web, Ce qu’il faut savoir ?
Traitement de TEXTE 2 Stage – Semaine 3.
Transcription de la présentation:

BALISE HTML5 <audio> : le son sur une page web L'élément HTML <audio> est disponible depuis le HTML5, standard actuel (https://www.w3.org/html/). Il est compatible avec tous les navigateurs actuels. Il permet d'intégrer un contenu sonore dans un document (page web). Les balises d‘ouverture (<audio>) et de fermeture (</audio>) sont obligatoires. Les formats de fichier (et de flux) les plus courants sont .mp3 et .ogg. Certains navigateurs (IE) ne sont compatibles qu‘avec le .mp3. C‘est donc le format conseillé et le celui utilisé par les points de diffusion sur le serveur. Structure minimale : Cas d‘un flux radio : Cas d‘un podcast : Rien n‘est visible sur la page dans ce cas... Le flux ou le fichier devra donc être joué dès le chargement de la page par l‘ajout de autoplay. Cette implémentation, très minimale, est rare. Il est en général préférable de proposer un contrôle au visiteur. <audio src="http://webradio.ac-toulouse.fr:8000/point-de-diffusion.mp3" autoplay> Votre navigateur ne supporte pas l'élément <code>audio</code>. </audio> <audio src="http://le_serveur/lechemin/verslefichier.mp3" autoplay> Votre navigateur ne supporte pas l'élément <code>audio</code>. </audio>

BALISE HTML5 <audio> : le son sur une page web Attributs et contrôles : Le visiteur doit avoir la possibilité de jouer, ou pas, le fichier ou le flux et d‘en contrôler le volume. Le lecteur html5 intègre nativement les contrôles nécessaires. Pour faciliter l‘identification du type de fichier ou de flux par certains navigateurs (certaines versions de Firefox) , il est conseillé de préciser le type MIME ( type="audio/mpeg" pour le mp3 ou type="audio/ogg" pour le .ogg ). On peut également déclarer le codec : type="audio/ogg; codecs=vorbis" ou type="audio/mpeg; codecs=MPEG-3". Ce n‘est généralement pas nécessaire avec les format standard (.mp3 ou .ogg). Lecteur minimal flux radio avec attributs et contrôles : Lecteur minimal podcast avec attributs et contrôles : Donne à l‘affichage de la page : <audio controls> <source="http://webradio.ac-toulouse.fr:8000/point-de-diffusion.mp3" type="audio/mpeg" /> </audio> <audio controls> <source="http://le_serveur/lechemin/verslefichier.mp3" type="audio/mpeg" /> </audio>

BALISE HTML5 <audio> : le son sur une page web Contrôles et attributs supplémentaires : Il existe un certain nombre d‘attributs à la balise <audio>. Ils se placent au sein de la balise d‘ouverture <audio> Ex : <audio controls autoplay> Les principaux attributs et leurs valeurs : controls : propose un contrôle du volume, un bouton pause / lecture et les durée et durée restante du flux ou fichier. autoplay : lance la lecture automatiquement. loop : lance la lecture en boucle. preload : s‘utilise avec auto, metadata ou none sous la forme preload="none". Il permet, le cas échéant, un pré-chargement automatique du fichier (podcast) à l‘ouverture de la page. src : spécifie l‘adresse du fichier ou flux audio. Deux notations possibles pour l‘adresse source : ou Plus claire, cette seconde notation est préférable. <audio src="http://webradio.ac-toulouse.fr:8000/point-de-diffusion.mp3" controls type="audio/mpeg"> Votre navigateur ne supporte pas l'élément <code>audio</code>. </audio> <audio controls> Votre navigateur ne supporte pas l'élément <code>audio</code>. <source="http://webradio.ac-toulouse.fr:8000/point-de-diffusion.mp3" type="audio/mpeg" /> </audio>

BALISE HTML5 <audio> : le son sur une page web En savoir plus : Il existe beaucoup de didacticiels HTML5 en ligne dont les classiques : https://www.w3schools.com/html/ https://developer.mozilla.org/fr/docs/Web/HTML Vous y trouverez des explications détaillées et des exemples. Le lecteur audio HTML5 peut également être personnalisé avec le JavaScript et les CSS3 : De bons exemples et tutoriels ici : https://openclassrooms.com/forum/sujet/personnaliser-un-lecteur-mp3 On trouve aussi un certain nombre de lecteurs "clé en main", gratuits ou pas, à l‘intéret inégal. Des exemples ici : http://www.web-geek.fr/10-lecteurs-audio-en-html5/