communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

Audio HTML5 (audio)

La fonction audio de HTML5 est déjà très puissante. La lecture, le saut, la mise en mémoire tampon et d'autres fonctions qui n'étaient auparavant possibles qu'avec Flash peuvent être facilement gérées par l'audio de HTML5.

Mais jusqu'à présent, il n'existait aucune norme pour la lecture audio sur les pages Web.


Syntaxe audio, propriétés et méthodes

Utiliser la syntaxe
< src="song.mp3" controles="controls" loop="loop" autoplay="autoplay"> Cher, votre navigateur ne prend pas en charge la balise audio de l'attribut html5</audio>

src est le chemin de la chanson
controls Playback control Si vous écrivez CONTROLS="controls" dans la balise, la page Web affichera les commandes de lecture fournies avec l'audio. Si elles ne sont pas écrites, elles ne seront pas affichées.<🎜. >loop La boucle de la chanson est dans la balise Ajoutez cet attribut à la boucle de la chanson Si vos chansons sont récupérées depuis l'arrière-plan, vous pouvez également définir loop=true/false en ajax pour la contrôler
la lecture automatique sera automatiquement jouée lorsque la chanson ; est chargé, mais seul le côté PC peut implémenter le côté mobile. Non (les navigateurs PC sont beaucoup plus complets que les navigateurs mobiles, et la prise en charge de certains attributs sera bien meilleure)
Les attributs ci-dessus sont dans les balises. peut également être utilisé comme attributs d'objet pour appeler et contrôler auido.*

L'audio n'est pas seulement une étiquette, c'est aussi un objet sous la fenêtre. L'objet a des propriétés et des méthodes. En tant qu'objet, quelles sont ses propriétés. méthodes couramment utilisées ?

Propriétés de l'objet :

currentTime Obtenez la durée de lecture actuelle
durée Obtenez la durée totale de la chanson
la lecture si elle est en cours de lecture renvoie vrai/faux
la pause si il est en pause et renvoie true/false
Méthode Object :
play() joue la chanson
pause() met la chanson en pause
load() recharge les chansons

Trois formats de base en HTML5 :

1. Code minimal

<audio src="song.ogg" CONTROLS="Controls"> </audio>

2. Code avec rappel d'incompatibilité

<audio src="song.ogg" CONTROLS="Controls">Votre navigateur ne prend pas en charge la balise audio.
</audio>

3. Essayez d'être compatible avec l'écriture du navigateur

<. ;contrôles audio="contrôles"><source src="song.ogg" type="audio/ogg" >
<source src="song.mp3" type="audio/mpeg ">
Votre navigateur ne prend pas en charge la balise audio.
</audio>
 

<!doctype html>
<html>
    <head> 
    <meta charset="utf-8"> 
    <title>php.cn</title> 
    </head>
    <body>
        <audio controls>
           <source src="horse.ogg" type="audio/ogg">
           <source src="horse.mp3" type="audio/mpeg">
             您的浏览器不支持 audio 元素。
        </audio>
    </body>
</html>


Formation continue
||
<!Doctype html> <html> <head> <title>HTML5多媒体</title> <meta charset="utf-8"/> <script> function onInputFileChange() { var file = document.getElementById('file').files[0]; var url = URL.createObjectURL(file); console.log(url); document.getElementById("audio_id").src = url; } </script> </head> <body> <input type="file" id="file" onchange="onInputFileChange()"> <audio id="audio_id" controls autoplay loop>Your browser can't support HTML5 Audio</audio> </body> </html>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492784 joue