À partir de Firefox 3.5, Chrome 3, Opera 10.5 et Safari 4, nous pouvons tirer parti de nombreuses nouvelles fonctionnalités de HTML 5, y compris la prise en charge audio native sans avoir besoin de Flash. Comme vous le constaterez, nous ne faisons que créer le nouveau
L'élément audio
L'élément audio accepte une poignée d'attributs, notamment:
lecture automatique : Lit immédiatement le fichier lorsque la page est chargée.
les contrôles : Affiche le lecteur sur la page.
précharge: Commence immédiatement la mise en mémoire tampon du fichier. (valeurs = aucune, auto, métadonnées)
src: Le chemin d'accès au nom de fichier. Il est préférable de charger le fichier via l'élément "source" de l'enfant à la place..
Mozilla et Webkit ne s'entendent pas très bien pour le format audio. Firefox voudra voir un fichier .ogg, alors que les navigateurs Webkit fonctionneront parfaitement avec l'extension .mp3 commune. Cela signifie que, du moins pour l'instant, vous devez créer deux versions de l'audio. Je vous recommande d'utiliser un outil en ligne simple et rapide, appelé Media.io, pour convertir votre mp3 au format ogg.
Lorsque Safari charge la page, il ne reconnaît pas le format .ogg. Il saute la page et passe à la version mp3, en conséquence. Veuillez noter que IE, comme d’habitude, ne le supporte pas, et Opera 10 et versions antérieures ne peuvent fonctionner qu'avec des fichiers .wav..
Chargement de l'audio avec jQuery
// Légèrement modifié depuis la version vidéo. $ (document) .ready (function () // Créez un élément audio, définissez-le sur autoplay, // et indiquez au lecteur le moment du chargement de la page. var audio = $ ('', autoPlay:' autoplay ', contrôles:' contrôles '); // Appelez notre fonction addSource et transmettez l'élément audio // et le ou les chemins d'accès à votre fichier audio. addSource (audio, 'audioFile.ogg'); addSource (audio, 'audioFile.mp3'); // Lorsqu'un événement est déclenché… $ ('a'). Click (function () // Ajoute les éléments audio + source à la page. Audio.appendTo ('body'); // Fadeout la balise d'ancrage à conserver l'utilisateur de cliquer à nouveau dessus. $ (this) .fadeOut ('slow'); return false;); // Ajoute un élément source et l'ajoute à l'élément audio, représenté // par elem. fonction addSource (elem, path) $ ('') .attr (' src ', chemin) .appendTo (elem); );
Veuillez noter que nous pouvons aller beaucoup plus loin avec ceci, y compris comment arrêter l'audio, modifier le volume, etc. Ce conseil rapide de trois minutes est juste pour vous donner l'appétit. Si vous souhaitez approfondir, faites-le nous savoir et je planifierai un didacticiel complet de trente minutes sur le sujet.!
Suivez-nous sur Twitter ou abonnez-vous au fil RSS Nettuts + pour obtenir les meilleurs tutoriels de développement Web sur le Web..
Share
Accentsconagua
