Comment implémenter la lecture audio automatique dans le navigateur Chrome

Question

La lecture automatique audio fonctionne dans Mozilla, Microsoft Edge et les anciennes versions de Google Chrome, mais ne peut pas être lu automatiquement dans Google Chrome 67+ en raison de modifications apportées à la politique de lecture automatique.

Ils ont bloqué la lecture automatique (jusqu'à ce que certaines conditions de session spécifiées dans l'article de blog lié soient remplies). Comment implémenter la lecture automatique audio dans Google Chrome 67+ ?

Answer 1

Solution #1

Ma solution était de créer un iframe

<iframe src="audio/source.mp3" allow="autoplay" style="display:none" id="iframeAudio">
</iframe>

Balises

et audio pour les navigateurs non Chrome

<audio autoplay loop  id="playAudio">
    <source src="audio/source.mp3">
</audio>

et dans mon script

var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
  if (!isChrome){
      $('#iframeAudio').remove()
  }
  else {
      $('#playAudio').remove() // 为了确保背景中不会有两个音频
  }

Solution n°2 :

Selon @Leonard, il existe une autre solution

Créez-en un iframe qui ne lit rien, juste pour déclencher la lecture automatique au premier chargement.

<iframe src="silence.mp3" allow="autoplay" id="audio" style="display: none"></iframe>

Bonne source de fichier mp3 : silence.mp3

Ensuite, lisez facilement vos vrais fichiers audio.

<audio id="player" autoplay loop>
    <source src="audio/source.mp3" type="audio/mp3">
</audio>

Personnellement, je préfère la Solution #2 car c'est une approche plus propre et moins dépendante de JavaScript.

Mise à jour en août 2019

Solution #3

Comme une autre option, nous pouvons utiliser <embed>

Pour Firefox Il semble que la lecture automatique audio fonctionne, nous n'avons donc pas besoin de l'élément <embed> car cela créera deux audios exécutés en même temps.

// index.js
let audioPlaying = true,
    backgroundAudio, browser;
browser = navigator.userAgent.toLowerCase();
$('<audio class="audio1" src="audio.mp3" loop></audio>').prependTo('body');
if (!browser.indexOf('firefox') > -1) {
    $('<embed id="background-audio" src="audio.mp3" autostart="1"></embed>').prependTo('body');
    backgroundAudio = setInterval(function() {
        $("#background-audio").remove();
        $('<embed id="background-audio" src="audio.mp3"></embed>').prependTo('body');
    }, 120000); // 120000是你的音频持续时间，本例中为2分钟。
}

Si votre audio comporte un événement bascule, assurez-vous de supprimer l'élément <embed> que vous avez créé.

REMARQUE : Après le changement, il recommencera à zéro, et depuis que <embed>已经被删除，<audio> a été supprimé, l'élément <audio> sera désormais lu normalement.

$(".toggle-audio").on('click', function(event) {
    audioPlaying = !audioPlaying;
    $("#background-audio").remove();

    clearInterval(backgroundAudio);
    if (audioPlaying){
        $(".audio1").play();
        // 播放音频
    }
    else {
        $(".audio1").pause();
    }

Assurez-vous maintenant de masquer ces <audio> et <audio>和<embed>éléments

audio, embed {
    position: absolute;
    z-index: -9999;
}

Remarque : diplay : aucun et visibilité : cachée empêcheront l'élément diplay: none和visibility: hidden会使<embed> de fonctionner.