Comment faire en sorte que l'audio joue automatiquement sur chrome

Question

La lecture automatique audio fonctionne dans Mozilla, Microsoft Edge et l'ancien Google Chrome, mais pas dans le nouveau Google Chrome.

Ils ont bloqué la lecture automatique. Y a-t-il un moyen de faire une lecture automatique audio dans Google Chrome ?

Answer 1

Solution n° 1

Ma solution ici est de créer un iframe

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

y audio ainsi que pour les navigateurs non chromatiques

<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() // just to make sure that it will not have 2x audio in the background 
  }

Solution n°2 :

Selon @Leonard, il existe également une autre solution de contournement.

Créer un iframe qui ne joue rien juste pour déclencher l'autoplay au premier chargement.

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

bonne source pour le fichier mp3 silence.mp3

Vous pouvez ensuite lire votre fichier audio réel en toute simplicité.

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

Personnellement, je préfère solution n° 2 parce qu'il s'agit d'une approche plus propre pour ne pas dépendre autant de JavaScript.

Mise à jour : août 2019

Solution #3

Comme alternative, nous pouvons utiliser <embed>

Pour Firefox Il semble que la lecture automatique de l'audio fonctionne et que nous n'ayons pas besoin de l'option de lecture automatique de l'audio. <embed> car il créera un double parcours audio.

// 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 is the duration of your audio which in this case 2 mins.
}

De plus, si vous avez un événement de basculement pour votre audio, assurez-vous de supprimer l'événement créé. <embed> élément pour l'audio.

Note : Après votre basculement, il recommencera depuis le début parce que le bouton <embed> est déjà supprimé et le <audio> l'élément jouera normalement maintenant.

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

    clearInterval(backgroundAudio);
    if (audioPlaying){
        $(".audio1").play();
        // play audio 
    }
    else {
        $(".audio1").pause();
    }

Et maintenant assurez-vous de cacher ces <audio> y <embed> éléments

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

Note : diplay: none y visibility: hidden fera le <embed> ne fonctionne pas.

Answer 2

Il existe une astuce très astucieuse pour utiliser la fonction de lecture automatique de la balise audio dans Chrome.

Ajouter

<iframe src="silence.mp3" allow="autoplay" id="audio"></iframe>

alors que silence.mp3 seulement 0,5 seconde de silence.

Ce site

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

travaille ensuite.

Chrome remarque qu'un son a été joué et donne l'autorisation de lecture automatique dans les balises audio.

Answer 3

Depuis avril 2018, les politiques de lecture automatique de Chrome ont changé :

"Les règles de lecture automatique de Chrome sont simples :

• La lecture automatique en sourdine est toujours autorisée.

La lecture automatique avec son est autorisée si :

• L'utilisateur a interagi avec le domaine (clic, tape, etc.).
• Sur le bureau, le seuil de l'indice d'engagement médiatique de l'utilisateur a été franchi, ce qui signifie que l'utilisateur a déjà lu une vidéo avec du son.
• Sur mobile, l'utilisateur a ajouté le site à son écran d'accueil.

Aussi

• Les cadres supérieurs peuvent déléguer l'autorisation de lecture automatique à leurs iframes pour permettre la lecture automatique avec son. "

Le site des développeurs de Chrome contient plus d'informations, notamment des exemples de programmation, que vous pouvez consulter ici : https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Answer 4

Il suffit d'ajouter ce petit script comme illustré dans https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio

<head>
<script>
window.onload = function() {
  var context = new AudioContext();
}
</script>
</head>

Alors cela fonctionnera comme vous le souhaitez :

<audio autoplay>
      <source src="hal_9000_sorry_dave.mp3">
</audio>

Answer 5

Au moins, tu peux utiliser ça :

document.addEventListener('click', musicPlay);
function musicPlay() {
    document.getElementById('ID').play();
    document.removeEventListener('click', musicPlay);
}

La musique démarre lorsque l'utilisateur clique n'importe où sur la page.

Il supprime aussi instantanément l'EventListener, donc si vous utilisez les contrôles audio, l'utilisateur peut couper le son ou mettre en pause et la musique ne recommence pas quand il clique ailleurs .