Pour atteindre la lecture automatique et l'affichage de la barre de contr?le de l'audio dans les pages Web, vous devez utiliser correctement les attributs HTML et gérer les politiques du navigateur. Tout d'abord, ajoutez des attributs de contr?les à la balise audio pour afficher la barre de contr?le, écrite sous forme

L'intégration de l'audio dans les pages Web et la réalisation de la lecture automatique sont une exigence commune pour de nombreux sites Web de musique ou projets multimédias. HTML fournit des balises audio natives pour prendre en charge la lecture audio, mais pour implémenter l'affichage de la barre de contr?le et les fonctions de lecture automatique, il est nécessaire de traiter à la fois les niveaux de politique HTML et du navigateur.

Comment utiliser correctement l'attribut de contr?les des balises audio

Pour afficher la barre de contr?le du lecteur audio (tel que play, pause, barre de progression, etc.) sur une page Web, vous devez ajouter controls dans la balise audio . La méthode d'écriture est la suivante:

 <audio src = "music.mp3" Contr?les> </ audio>

De cette fa?on, le navigateur rendra un lecteur audio par défaut. controls sont une propriété booléenne que le navigateur affiche le contr?le tant qu'il existe. Il convient de noter que les styles affichés par différents navigateurs peuvent être légèrement différents.

Si vous souhaitez personnaliser l'apparence du joueur, vous pouvez faire des controls , puis créer votre propre interface de contr?le via des éléments JavaScript et HTML.

Choses à noter lors de la réalisation de la lecture audio automatique

Les navigateurs modernes limitent le comportement de lecture automatique de l'audio par défaut pour l'expérience utilisateur. Pour que l'audio joue automatiquement lorsque la page se charge, l'une des conditions suivantes doit être remplie:

• Les utilisateurs ont interagi avec la page (comme les clics, les touches, etc.)
• L'audio est silencieux

Les implémentations courantes sont les suivantes:

 <audio src = "music.mp3" Autoplay muetted> </ audio>

Ce code fera jouer l'audio automatiquement après le chargement et silencieux. Si vous souhaitez réactiver à réactiver la lecture, vous pouvez le contr?ler via JavaScript:

 const Audio = document.QuerySelector ('Audio');
Audio.play ();
Audio.muted = false;

Cependant, il convient de noter que cette opération est mieux effectuée après que l'utilisateur a déclenché un événement (comme cliquer sur un bouton), sinon il peut toujours être intercepté par le navigateur.

FAQ et solutions

La lecture automatique a échoué

• Restrictions des paramètres du navigateur : certains navigateurs permettent aux utilisateurs de se définir mondialement pour interdire la lecture automatique, ce qui ne peut inciter l'utilisateur à jouer manuellement.
• Problèmes de ressources inter-domaines : si le fichier audio provient d'un autre domaine, vous devez vous assurer que le serveur est configuré avec les autorisations COR correctes.
• L'interaction utilisateur n'est pas utilisée correctement : si vous souhaitez jouer automatiquement sans muet, play() doit être appelée la première fois que l'utilisateur clique sur la page.

Les restrictions de lecture mobile sont plus strictes

Les navigateurs mobiles ont généralement des exigences plus strictes pour la lecture automatique, et même si muted est défini, une interaction utilisateur peut être nécessaire pour jouer. L'approche recommandée est:

• La page ne joue pas en premier, mais fournit un bouton "play"
• L'utilisateur clique sur le bouton avant de commencer à lire l'audio
• La lecture peut être déclenchée et non approuvée via l'événement de clic de bouton

Compatibilité du format audio

Les formats audio pris en charge par différents navigateurs sont légèrement différents, et les formations communes telles que MP3, WAV et OGG ont leurs propres gammes de compatibilité. Il est recommandé de fournir plusieurs formats de sources audio, en utilisant source :

 <Audio AutoPlay Mointed>
  <source src = "music.mp3" type = "audio / mpeg">
  <source src = "music.ogg" type = "audio / ogg">
  Votre navigateur ne prend pas en charge la lecture audio.
</ audio>

Cela améliore la compatibilité dans différents navigateurs.

Fondamentalement, c'est tout. La mise en ?uvre de la lecture audio et de la lecture automatique n'est en fait pas compliquée, mais il est facile de causer des problèmes en raison des restrictions du navigateur. Comprendre ces restrictions et répondre raisonnablement est la clé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!