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?

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.

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.

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

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>

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.

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.

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>

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.

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.

Utilisez à la iframeplace:

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

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

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>

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>

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>

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>

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

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.