Comment faire une lecture automatique audio sur Chrome


94

la lecture automatique audio fonctionne également dans Mozilla, Microsoft Edge et l'ancien Google Chrome, mais pas dans le nouveau Google Chrome. ils ont bloqué la lecture automatique. existe-t-il un moyen de le faire en lecture automatique audio dans Google Chrome?


7
Le fait que Google ait fait cela est absurde. Ils ont littéralement dit "pas de musique pour votre jeu à moins qu'un utilisateur clique sur Play Music". Inacceptable. Tellement en colère!
Hobbes

2
@Hobbes d'accord. Au moins, il devrait y avoir des exceptions. Comme je l'ai mentionné sur une autre affiche, j'ai une page "MUSIQUE", avec un lien vers le site "mymusic.html", auquel vous ne pouvez accéder qu'avec un lien / bouton clairement étiqueté MA MUSIQUE ". Quelqu'un irait là-bas et serait surpris ou ennuyé par un échantillon de musique qui y est joué. Surtout avec un bouton clair «position fixe» STOP MUSIC. Cette politique est un cas de réaction excessive à des pratiques abusives.
Randy

Réponses:


104

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> 

et audiobalise aussi 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() // 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 un iframequi ne joue rien juste 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

Ensuite, lisez 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 la solution n ° 2 car c'est une approche plus propre pour ne pas trop compter sur JavaScript.

Mise à jour août 2019

Solution n ° 3

Comme alternative, nous pouvons utiliser <embed>

Pour Firefox Il semble que la lecture automatique audio fonctionne, nous n'avons donc pas besoin de l' <embed>élément car il créera un double audio en cours d'exécution.

// 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' <embed>élément créé pour l'audio.

Remarque: après votre bascule, il redémarrera depuis le début car le <embed>est déjà supprimé et l' <audio>élément sera lu 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 masquer ces éléments <audio>et<embed>

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

Remarque: diplay: noneet visibility: hiddenfera que l' <embed>élément ne fonctionnera pas.


Comment faites-vous la boucle audio?
Kwarrtz

1
La solution 2 a fonctionné pour moi. Note de bas de page: si vous travaillez pour le Web et Phonegap en même temps, Phonegap n'a pas besoin de cette solution de contournement et cela prend en fait assez mal. Donc, si vous avez une base de code commune pour le Web et Phonegap, assurez-vous de trouver un moyen d'appliquer cette solution de contournement sur le Web uniquement.
Ignacio Segura

2
Le lien vers le fichier de silence est mort, j'ai donc trouvé d'autres fichiers de silence sur GitHub: github.com/anars/blank-audio . J'utilise 1-second-of-silence.mp3pour mon projet, mais n'importe quel fichier de cette collection fonctionnerait, je suppose.
Travis

13
Semble éclaté à partir de Chrome 76.
mightyiam

3
Ouais, cela ne fonctionne plus (si cela a fonctionné dans le passé)
Yulian

28

Il existe une astuce vraiment intéressante 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.mp3seulement 0,5 seconde de silence.

Ce

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

fonctionne ensuite.

Chrome remarque qu'un son a été lu et autorise la lecture automatique dans les balises audio.


5
OK, bien que cela fonctionne, on a aussi l'impression d'exploiter un bogue, ou à tout le moins, un comportement involontaire. J'imagine que quelqu'un rapportera cela à Google afin que je ne compte pas sur le fait que cela fonctionne longtemps. Bonne trouvaille cependant!
Neil Bryson

4
Légèrement hors sujet, mais votre silence.mp3 est assez grand à 36,7k. Essayez ceci (216 octets) - s3-eu-west-1.amazonaws.com/neilbryson.net.random/silence.mp3
Neil Bryson

3
Le lien silence.mp3 est mort. Vous pouvez créer le vôtre .
idbrii

1
@Toniq Bien sûr, toutes mes
Neil Bryson

1
Ouais, ils sont dessus ... ne fonctionne plus dans Firefox ou Chrome
Stefan Reich

15

En avril 2018, les règles 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 (cliquez, appuyez, etc.).
  • Sur le bureau, le seuil de l'indice d'engagement médiatique de l'utilisateur a été dépassé, 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 le son. "

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


3
Alors vous dites qu'il n'y a pas moyen de lire automatiquement l'audio dans le navigateur Chrome?
Akshay Rathod

En outre, il existe une option d'autorisation dans le navigateur Chrome sous Android maintenant que l'utilisateur peut choisir d'autoriser les sons en lecture automatique
zeta

8

Ajoutez simplement 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>

Ensuite, cela fonctionnera comme vous le souhaitez:

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

Pouvez-vous m'envoyer un violon pour cette implémentation? Ce sera vraiment utile
Vikash

5
Ça ne marche plus? Vous avez ce message: « Le AudioContext n'a pas été autorisé à commencer Il doit être repris (ou créé) après un geste d'utilisateur sur la page.. Developers.google.com/web/updates/2017/09/... »
thdoan

Travailler sur Chrome 81.0.4044.138 sur mac 👍
Mosh Feu

5

Au moins, vous pouvez utiliser ceci:

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 également instantanément EventListener, donc si vous utilisez les commandes audio, l'utilisateur peut le désactiver ou le mettre en pause et la musique ne recommence pas quand il clique ailleurs.


Je crois que c'est sur la bonne voie, pour obéir aux nouvelles politiques exigeant une certaine interaction de l'utilisateur pour jouer de la musique. J'ai ajouté ceci à l'événement tactile que j'ai déjà ajouté pour les navigateurs mobiles et à un événement onscroll "parfois fonctionnel". Malheureusement, la politique "no play ()" ne semble pas laisser un défilement de la souris compter comme une interaction de l'utilisateur, mais je travaille là-dessus aussi. Le fait est que ma page est une page MUSIQUE, littéralement appelée "mymusic.html", à laquelle vous accédez en suivant un bouton MUSIC bien étiqueté. Si jamais il y avait une page pour justifier «jouer» au chargement », celle-là devrait vraiment!
Randy

@Randy Je suis dans une situation très similaire, je travaille sur une page de musique et je souhaite implémenter la lecture automatique. L'ajout de l'attribut de lecture automatique a fonctionné de manière très incohérente - le même code fonctionne parfois, mais pas toujours. Je n'ai aucune erreur de console ou de réseau. Avez-vous résolu votre situation?
Lazarus Rising

@LazarusRising - Bien que tout cela semble commencer avec les navigateurs de téléphone, je remarque que les nouvelles versions des navigateurs de bureau refusent également la lecture automatique. Je dois dire cependant que je suis satisfait de la nécessité qu'un événement déclenché par l'interaction de l'utilisateur démarre la musique. En fait, même moi, en tant qu'auteur de la page, je commence à me sentir ennuyé d'aller sur ma page et de faire démarrer la musique simplement parce que j'ai touché l'écran. Je commence à voir la logique de la disparition progressive de la lecture automatique. Et depuis que cela commence à arriver universellement, je n'ai pas l'impression que mon site est le seul à ne pas pouvoir le faire.
Randy

Chrome jette une violation pour forcer le jeu.
Gabriel Petersson

2

Les navigateurs ont modifié leur confidentialité pour la lecture automatique de la vidéo ou de l'audio en raison de publicités, ce qui est ennuyeux. Vous pouvez donc simplement tromper avec le code ci-dessous.

Vous pouvez mettre n'importe quel audio silencieux dans l'iframe.

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

Ajoutez simplement un iframe invisible avec un .mp3 comme source et allow = "autoplay" avant l'élément audio. En conséquence, le navigateur est amené à démarrer tout fichier audio ultérieur. Ou lire automatiquement une vidéo qui n'est pas désactivée.


2

Vous pouvez simplement utiliser (.autoplay = true;) comme suit (testé sur Chrome Desktop):

<audio id="audioID" loop> <source src="path/audio.mp3"  type="audio/mp3"></audio>

<script>
var myaudio = document.getElementById("audioID").autoplay = true;
</script>

Si vous devez ajouter des boutons d'arrêt / lecture:

<button onclick="play()" type="button">playbutton</button>
<button onclick="stop()" type="button">stopbutton</button>

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

<script>
var myaudio = document.getElementById("audioID");

function play() { 
return myaudio.play(); 
};

function stop() {
return myaudio.pause(); 
};
</script>

Si vous voulez que l'arrêt / lecture soit un seul bouton:

<button onclick="PlayStop()" type="button">button</button>


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

<script>
var myaudio = document.getElementById("audioID");

function PlayStop() { 
return myaudio.paused ? myaudio.play() : myaudio.pause();
};
</script>

Si vous souhaitez afficher stop / play sur le même bouton:

<button onclick="PlayStop()" type="button">Play</button>


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

<script>
var myaudio = document.getElementById("audioID");

function PlayStop() { 
if (elem.innerText=="Play") {
    elem.innerText = "Stop";
}
else {
    elem.innerText = "Play";
}
return myaudio.paused ? myaudio.play() : myaudio.pause();
};`
</script>

Dans certains navigateurs, l'audio peut ne pas fonctionner correctement, alors essayez d'ajouter une iframe avant votre code:

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

<button onclick="PlayStop()" type="button">Play</button>


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

<script>
var myaudio = document.getElementById("audioID");

function button() { 
if (elem.innerText=="Play") {
    elem.innerText = "Stop";
}
else {
    elem.innerText = "Play";
}
return myaudio.paused ? myaudio.play() : myaudio.pause();
};
</script>

Ne semble pas fonctionner dans Chrome Version 85.0.4183.83 (version officielle) (64 bits)
MC9000 le

1

J'étais en train de cogner là-dessus aujourd'hui, et je voulais juste ajouter un peu de curiosité que j'ai découvert à la discussion.

Quoi qu'il en soit, je suis parti de ceci:

<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 quelque peu hors limites si vous préférez simplement générer votre propre truc (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 réellement battre le système en donnant à f5 un martèlement approprié; si vous appuyez sur Actualiser de manière répétée très rapidement (environ 5 à 10 fois devraient faire l'affaire), l'audio sera lu automatiquement, puis il jouera plusieurs fois lors d'un rafraîchissement du sigle pour revenir à ses mauvaises voies. Fantastique!

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


3
S'appuyer sur une interaction de l'utilisateur n'est pas une lecture automatique.
mightyiam

0

J'ai utilisé pixi.js et pixi-sound.js pour réaliser la lecture automatique dans Chrome et Firefox.

<script>

            PIXI.sound.Sound.from({
            url: 'audios/tuto.mp3',
            loop:true,
            preload: true,
            loaded: function(err, sound) {
                    sound.play();

            document.querySelector("#paused").addEventListener('click', function() {
            const paused = PIXI.sound.togglePauseAll();

            this.className = this.className.replace(/\b(on|off)/g, '');
            this.className += paused ? 'on' : 'off';

            });
            }
            });

</script>

HTML:

<button class="btn1 btn-lg off" id="paused">
    <span class="glyphicon glyphicon-pause off"></span>
    <span class="glyphicon glyphicon-play on"></span>
</button>

cela fonctionne également sur les appareils mobiles, mais l'utilisateur doit toucher quelque part sur l'écran pour déclencher le son.


0

Utilisez à la iframeplace:

<iframe id="stream" src="YOUTSOURCEAUDIOORVIDEOHERE" frameborder="0"></iframe>

0

correction de température

$(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 la lecture http://zohararad.github.io/audio5js/

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


Ce n'est pas une réponse, car ce n'est pas une lecture automatique.
mightyiam

1
@mightyiam c'est une solution de contournement car il n'y a aucun moyen de jouer automatiquement car le chrome l'a bloqué
Youssef KH

0

J'ajoute un attribut de contrôle à l'audio et le cache simplement dans CSS. Et tout fonctionne bien dans Chrome.

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

1
Peut-être si votre MEI pour ce site autorise la lecture automatique. Sinon, je ne vois pas de raison pour laquelle cela fonctionnerait.
mightyiam

0

Google a modifié ses politiques le mois dernier concernant la lecture automatique dans Chrome. Veuillez consulter cette annonce .

Cependant, ils autorisent la lecture automatique si vous intégrez une vidéo et qu'elle est désactivée. Vous pouvez ajouter la mutedpropriété 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>

4
je veux que l'audio soit lu en arrière-plan.
Akshay Rathod

13
La lecture automatique audio en sourdine ne peut pas être considérée comme une réponse.
mightyiam

@Akshay Rathod avez-vous trouvé des solutions?
The Dead Man

0

Solution sans utiliser iframe ou javascript:

<embed src="silence.mp3" type="audio/mp3" autostart="true" hidden="true">
        <audio id="player" autoplay controls><source src="source/audio.mp3" type="audio/mp3"></audio>

Avec cette solution, la boîte de dialogue Ouvrir / Enregistrer d'Internet Explorer est également évitée.

   <embed src="http://deinesv.cf/silence.mp3" type="audio/mp3" autostart="true" hidden="true">
        <audio id="player" autoplay controls><source src="https://freemusicarchive.org/file/music/ccCommunity/Mild_Wild/a_Alright_Okay_b_See_Through/Mild_Wild_-_Alright_Okay.mp3" type="audio/mp3"></audio>


1
Nan. Ne fonctionne pas dans Chrome Version 85.0.4183.83 (version officielle) (64 bits)
MC9000 le

0

La balise vidéo peut également lire de l'audio. Étant donné que la balise audio ne semble pas se comporter comme il se doit, vous pouvez simplement utiliser la balise vidéo pour l'audio:

<video autoplay muted id="audio1" src="your.mp3" type="audio/mp3">
    Your browser does not support the <code>video</code> element.
</video>
<script>
    unmuteButton.addEventListener('click', function() 
        { 
            if ( unmuteButton.innerHTML == "unmute" )
            {
                unmuteButton.innerHTML = "mute";
                audio1.muted = false; 
            } else {
                unmuteButton.innerHTML = "unmute";
                audio1.muted = true; 
            }
        });
</script>

-2

Vous pouvez utiliser <iframe src="link/to/file.mp3" allow="autoplay">, si l'origine a une autorisation de lecture automatique. Plus d'infos ici .


il montre des contrôles et je ne veux rien sur la page. il suffit de jouer et de mettre en pause le bouton.
Akshay Rathod

et comment boucler l'audio?
Akshay Rathod

1
@AkshayRathod veuillez vérifier l' attribut de boucle HTML <audio> . Alors qu'en XHTML, la minimisation d'attribut est interdite et l'attribut de boucle doit être défini comme <audio loop = "loop">.
hmd

-4

L' audioattribut de lecture automatique HTML5 par défaut ne fonctionne pas dans Chrome, mais vous pouvez forcer la lecture automatique audio à l'aide de JavaScript. Essaye ça:

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

Cela fonctionne pour moi.


3
ce n'est pas que la lecture automatique "ne fonctionne pas", c'est qu'elle est soumise à une politique selon laquelle la lecture automatique ne fonctionnera pas si les exigences de la politique ne sont pas remplies. Voir developer.google.com/web/updates/2017/09/… . Ce code ne contournera pas cette politique. Si cela a fonctionné pour vous, c'est parce que vous avez atteint le seuil et / ou défini un indicateur de développeur. Mais comme le dit cette page, vous ne pouvez pas supposer que cela fonctionnera pour tout le monde.
ADyson

Au moins dans FF 66, cela ne fonctionnera pas non plus. La nouvelle politique est de bloquer le play () s'il n'a pas été déclenché d'une manière ou d'une autre par une interaction de l'utilisateur.
Randy le
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.