Audio-Autoplay funktioniert auch in Mozilla, Microsoft Edge und altem Google Chrome, jedoch nicht in neuem Google Chrome. Sie haben die automatische Wiedergabe blockiert. Gibt es eine Möglichkeit, die automatische Wiedergabe von Audio in Google Chrome zu aktivieren?
html
google-chrome
html5-audio
Akshay Rathod
quelle
quelle
Antworten:
Lösung Nr. 1
Meine Lösung hier ist, eine zu erstellen
iframe
<iframe src="audio/source.mp3" allow="autoplay" style="display:none" id="iframeAudio"> </iframe>
und
audio
Tag auch für Nicht-Chrome-Browser<audio autoplay loop id="playAudio"> <source src="audio/source.mp3"> </audio>
und in meinem
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 }
Lösung 2:
Laut @Leonard gibt es dafür auch eine andere Problemumgehung
Erstellen Sie eine
iframe
, die nichts spielt, nur um die automatische Wiedergabe beim ersten Laden auszulösen.<iframe src="silence.mp3" allow="autoplay" id="audio" style="display: none"></iframe>
gute Quelle für die MP3-Datei Silence.mp3
Spielen Sie dann ganz einfach Ihre echte Audiodatei ab.
<audio id="player" autoplay loop> <source src="audio/source.mp3" type="audio/mp3"> </audio>
Persönlich bevorzuge ich Lösung Nr. 2, weil es ein sauberer Ansatz ist, wenn man sich nicht so sehr auf JavaScript verlässt.
Update August 2019
Lösung Nr. 3
Als Alternative können wir verwenden
<embed>
Für Firefox Es scheint, dass die automatische Audiowiedergabe funktioniert, sodass wir das
<embed>
Element nicht benötigen , da dadurch doppeltes Audio ausgeführt wird.// 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. }
Auch wenn Sie ein Umschaltereignis für Ihr Audio haben, müssen Sie das erstellte
<embed>
Element für Audio entfernen .Hinweis: Nach dem Umschalten wird es von Anfang an neu gestartet, da das
<embed>
bereits gelöscht wurde und das<audio>
Element jetzt wie gewohnt abgespielt wird.$(".toggle-audio").on('click', function(event) { audioPlaying = !audioPlaying; $("#background-audio").remove(); clearInterval(backgroundAudio); if (audioPlaying){ $(".audio1").play(); // play audio } else { $(".audio1").pause(); }
Und jetzt stellen Sie sicher, dass Sie diese
<audio>
und<embed>
Elemente ausblendenaudio, embed { position: absolute; z-index: -9999; }
Hinweis:
diplay: none
undvisibility: hidden
bewirkt, dass das<embed>
Element nicht funktioniert.quelle
1-second-of-silence.mp3
für mein Projekt, aber jede Datei in dieser Sammlung würde funktionieren, denke ich.Es gibt einen wirklich netten Trick, um die Autoplay-Funktion des Audio-Tags in Chrom zu verwenden.
Hinzufügen
<iframe src="silence.mp3" allow="autoplay" id="audio"></iframe>
wohingegen
silence.mp3
nur 0,5 Sekunden Stille sind.Dies
<audio id="player" autoplay controls><source src="0.mp3" type="audio/mp3"></audio>
arbeitet danach.
Chrome bemerkt, dass ein Sound abgespielt wurde, und gibt die Erlaubnis zur automatischen Wiedergabe in Audio-Tags.
quelle
Ab April 2018 wurden die Richtlinien für die automatische Wiedergabe von Chrome geändert:
"Die Autoplay-Richtlinien von Chrome sind einfach:
Autoplay mit Ton ist zulässig, wenn:
Ebenfalls
Auf der Entwickler-Website von Chrome finden Sie weitere Informationen, einschließlich einiger Programmierbeispiele. Diese finden Sie hier: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
quelle
Fügen Sie einfach dieses kleine Skript hinzu, wie in https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio dargestellt
<head> <script> window.onload = function() { var context = new AudioContext(); } </script> </head>
Dann funktioniert das wie Sie wollen:
<audio autoplay> <source src="hal_9000_sorry_dave.mp3"> </audio>
quelle
Zumindest können Sie dies verwenden:
document.addEventListener('click', musicPlay); function musicPlay() { document.getElementById('ID').play(); document.removeEventListener('click', musicPlay); }
Die Musik beginnt, wenn der Benutzer auf eine beliebige Stelle auf der Seite klickt.
Der EventListener wird ebenfalls sofort entfernt. Wenn Sie also die Audiosteuerung verwenden, kann der Benutzer ihn stummschalten oder anhalten, und die Musik wird nicht erneut gestartet, wenn er auf eine andere Stelle klickt.
quelle
Die Browser haben ihre Privatsphäre aufgrund von Anzeigen, die ärgerlich sind, auf automatische Wiedergabe von Video oder Audio geändert. Sie können also einfach mit dem folgenden Code tricksen.
Sie können jedes stille Audio in den Iframe einfügen.
<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>
Fügen Sie einfach einen unsichtbaren Iframe mit einer MP3-Datei als Quelle hinzu und lassen Sie = "Autoplay" vor dem Audioelement zu. Infolgedessen wird der Browser dazu verleitet, nachfolgende Audiodateien zu starten. Oder spielen Sie ein nicht automatisch stummgeschaltetes Video automatisch ab.
quelle
Sie können einfach (.autoplay = true;) wie folgt verwenden (auf Chrome Desktop getestet):
<audio id="audioID" loop> <source src="path/audio.mp3" type="audio/mp3"></audio> <script> var myaudio = document.getElementById("audioID").autoplay = true; </script>
Wenn Sie Stop / Play-Schaltflächen hinzufügen müssen:
<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>
Wenn Sie möchten, dass Stop / Play eine einzige Taste ist:
<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>
Wenn Sie Stop / Play auf derselben Taste anzeigen möchten:
<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>
In einigen Browsern funktioniert Audio möglicherweise nicht richtig. Versuchen Sie daher als Trick, iframe vor Ihrem Code hinzuzufügen:
<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>
quelle
Ich habe mich heute damit beschäftigt und wollte der Diskussion nur ein kleines Kuriosum hinzufügen, das ich entdeckt habe.
Wie auch immer, ich habe mich davon verabschiedet:
<iframe src="silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe> <audio id="audio" autoplay> <source src="helloworld.mp3"> </audio>
Dies:
<audio id="myAudio" src="helloworld.mp3"></audio> <script type="text/javascript"> document.getElementById("myAudio").play(); </script>
Und schließlich eine "Lösung", die etwas außerhalb der Grenzen liegt, wenn Sie lieber nur Ihr eigenes Ding generieren möchten (was wir tun):
<script src='https://code.responsivevoice.org/responsivevoice.js'></script> <input onclick='responsiveVoice.speak("Hello World");' type='button' value='Play' />
Die Entdeckung, die ich gemacht habe, und auch der wirklich lustige (seltsame? Seltsame? Lächerliche?) Teil ist, dass man im Fall der beiden ersteren das System tatsächlich schlagen kann, indem man f5 ein richtiges Stampfen gibt; Wenn Sie wiederholt sehr schnell auf "Aktualisieren" klicken (etwa 5 bis 10 Mal sollten Sie den Trick ausführen), wird das Audio automatisch wiedergegeben und bei einer einzelnen Aktualisierung einige Male abgespielt, um zu den bösen Methoden zurückzukehren. Fantastisch!
In der Ankündigung von Google heißt es, dass eine Interaktion zwischen dem Nutzer und der Website stattgefunden haben muss, damit Mediendateien "automatisch" abgespielt werden können. Die beste "Lösung", die ich bisher gefunden habe, ist das Hinzufügen einer Schaltfläche, die das Abspielen von Dateien weniger als automatisch, aber viel stabiler / zuverlässiger macht.
quelle
Ich habe pixi.js und pixi-sound.js verwendet, um die automatische Wiedergabe in Chrome und Firefox zu erreichen.
<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>
Es funktioniert auch auf Mobilgeräten, aber der Benutzer muss irgendwo auf dem Bildschirm berühren, um den Ton auszulösen.
quelle
Verwenden Sie
iframe
stattdessen:<iframe id="stream" src="YOUTSOURCEAUDIOORVIDEOHERE" frameborder="0"></iframe>
quelle
Temp Fix
$(document).on('click', "#buttonStarter", function(evt) { var context = new AudioContext(); document.getElementById('audioPlayer').play(); $("#buttonStarter").hide() $("#Game").show() });
Oder verwenden Sie einen benutzerdefinierten Player, um die Wiedergabe auszulösen. Http://zohararad.github.io/audio5js/
Hinweis: Die automatische Wiedergabe wird am 31. Dezember wieder aktiviert
quelle
Ich füge Steuerelementattribute hinzu, um Audio zu markieren, und verstecke es einfach in CSS. Und alles funktioniert gut in Chrome.
<audio autoplay loop controls id="playAudio"> <source src="audio/source.mp3"> </audio>
quelle
Google hat im letzten Monat seine Richtlinien bezüglich der automatischen Wiedergabe in Chrome geändert. Bitte beachten Sie diese Ankündigung .
Sie ermöglichen jedoch die automatische Wiedergabe, wenn Sie ein Video einbetten und es stummschalten. Sie können die
muted
Eigenschaft hinzufügen, damit das Video abgespielt werden kann.<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>
quelle
Lösung ohne Verwendung von Iframe oder 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>
Mit dieser Lösung wird auch das Öffnen / Speichern des Dialogs von Internet Explorer vermieden.
<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>
quelle
Das Video-Tag kann auch Audio wiedergeben. Da sich das Audio-Tag nicht so zu verhalten scheint, wie es sein sollte, können Sie das Video-Tag einfach für Audio verwenden:
<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>
quelle
Sie können verwenden
<iframe src="link/to/file.mp3" allow="autoplay">
, wenn der Ursprung über eine Autoplay-Berechtigung verfügt. Mehr Infos hier .quelle
Das Standardattribut für die automatische audioWiedergabe von HTML5 funktioniert nicht in Chrome, Sie können jedoch die automatische Wiedergabe von Audio mithilfe von JavaScript erzwingen. Versuche dies:
document.getElementById('myAudio').play();
Das funktioniert bei mir.
quelle