web-dev-qa-db-fra.com

Comment faire une lecture automatique audio sur chrome

la lecture automatique des fichiers audio fonctionne également dans Mozilla, Microsoft Edge et Google Chrome, mais pas dans Google Chrome. ils ont bloqué la lecture automatique. y at-il un moyen de le faire lecture automatique audio dans Google Chrome?

html5google-chromehtml5-audio
21
Akshay Rathod

Solution n ° 1

Ma solution ici est de créer une iframe

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

et audio tag aswell pour les navigateurs non-chrome

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

et dans ma 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: 

Il existe également une autre solution de contournement pour cela, selon @Leonard.

Créez une iframe qui ne lit rien pour déclencher la lecture automatique lors du premier chargement.

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

bonne source pour le fichier mp3 silence.mp3

Puis jouez votre vrai fichier audio à l'aise.

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

Personnellement, je préfère solution n ° 2 car c'est une approche plus propre pour ne pas trop compter sur JavaScript.

50
jt25

Il est très astucieux d’utiliser la fonction de lecture automatique de la balise audio en chrome.

Ajouter

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

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

Ce 

<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.

Voir en action: http://deinesv.cf/

10
Leonard Storcks

À compter d'avril 2018, les stratégies de lecture automatique de Chrome ont été modifiées:

"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 (cliquez, appuyez sur, etc.).
  • Sur le bureau, le seuil d’indice d’engagement du média de l’utilisateur a été Franchi, ce qui signifie que l’utilisateur a déjà lu la vidéo avec du son.
  • Sur le mobile, l'utilisateur a ajouté le site à son écran d'accueil.

Également

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

Le site pour développeurs de Chrome contient plus d'informations, y compris des exemples de programmation, disponibles à l'adresse suivante: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

4
deltran

Ajoutez simplement ce petit script comme indiqué 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 voulez:

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

Le mois dernier, Google a modifié sa politique en matière de lecture automatique dans Chrome. S'il vous plaît voir cette annonce .

Cependant, ils autorisent la lecture automatique si vous intégrez une vidéo en mode muet. Vous pouvez ajouter la propriété muted et cela devrait permettre à la vidéo de commencer à jouer.

<video autoplay controls muted>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
1
drpcken

Je me suis fait avoir aujourd’hui, et je voulais juste ajouter une petite curiosité que j’ai découverte à la discussion.

En tout cas, je suis parti de ça:

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

Ce:

<audio id="myAudio" src="helloworld.mp3"></audio>
<script type="text/javascript">
  document.getElementById("myAudio").play();
</script>

Et enfin ceci, une "solution" qui est un peu hors de portée si vous préférez générer votre propre chose (ce que nous faisons):

<script src='https://code.responsivevoice.org/responsivevoice.js'></script>
<input onclick='responsiveVoice.speak("Hello World");' type='button' value='Play' />

La découverte que j'ai faite et aussi la partie vraiment drôle (étrange? Étrange? Ridicule?) Est que, dans le cas des deux premiers, vous pouvez en réalité vaincre le système en donnant à f5 un véritable martèlement; si vous appuyez sur la touche de rafraîchissement répétitive très rapidement (environ 5 à 10 fois devraient faire l'affaire), la lecture audio se jouera automatiquement et ensuite, elle sera diffusée plusieurs fois lors d'un rafraîchissement de sigle seulement pour revenir à ses mauvaises manières .. Fantastique!

Dans l'annonce de Google, il est indiqué que pour que les fichiers multimédias soient lus "automatiquement", une interaction entre l'utilisateur et le site doit avoir eu lieu. La meilleure "solution" que j’ai pu trouver jusqu’à présent consiste donc à ajouter un bouton, rendant la lecture des fichiers moins qu’automatique, mais beaucoup plus stable/fiable.

1
Puto Miké

Au moins, vous pouvez utiliser ceci: 

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

La musique commence lorsque l'utilisateur clique n'importe où sur la page.

Il supprime aussi instantanément EventListener. Ainsi, si vous utilisez les commandes audio, l'utilisateur peut le mettre en sourdine ou le mettre en pause et la musique ne reprend pas lorsqu'il clique ailleurs.

1
Paul Becker

Le HTML5 par défaut audio L’attribut autoplay ne fonctionne pas en chrome, mais vous pouvez forcer la lecture automatique des données audio à l’aide de JavaScript. Essaye ça:

document.getElementById('myAudio').play();

Cela fonctionne pour moi.

1
Mahtab Alam

Il suffit de déclencher la fonction play sur init:

var aud = document.getElementById("myAudio");
aud.play(); // this will do the trick :)
<audio id="myAudio">
  <source src="https://wiki.selfhtml.org/local/Europahymne.mp3" type="audio/mp3">
</audio>

0
J. Sadi

Utilisez iframe à la place:

<iframe id="stream" src="YOUTSOURCEAUDIOORVIDEOHERE" frameborder="0"></iframe>
0
Jessé Mendonça

J'ajoute des commandes qui attribuent aussi une balise audio et la cache simplement en CSS .

<audio autoplay loop controls id="playAudio">
  <source src="audio/source.mp3">
</audio>
0
Yuriy Boyko

correctif temporaire

$(document).on('click', "#buttonStarter", function(evt)
{
var context = new AudioContext();
document.getElementById('audioPlayer').play();
$("#buttonStarter").hide()
$("#Game").show()
});

Ou utilisez un lecteur personnalisé pour déclencher le jeu http://zohararad.github.io/audio5js/

Remarque: la lecture automatique sera réactivée le 31 décembre.

0
Youssef KH