So machen Sie Audio-Autoplay auf Chrom

94

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?

Akshay Rathod
quelle
7
Die Tatsache, dass Google dies getan hat, ist absurd. Sie sagten buchstäblich nur "Nun, keine Musik für Ihr Spiel, es sei denn, ein Benutzer klickt auf Musik abspielen". Inakzeptabel. So wütend!
Hobbes
2
@Hobbes einverstanden. Zumindest sollte es Ausnahmen geben. Wie ich bereits auf einem anderen Poster erwähnt habe, habe ich eine "MUSIC" -Seite mit einem Site-Link "mymusic.html", den Sie nur mit einem Link / Button erreichen können, der eindeutig mit "MY MUSIC" gekennzeichnet ist. Ziemlich absurd, dass jemand dorthin gehen und dort sein würde überrascht oder verärgert über die dort gespielte Beispielmusik. Besonders mit einer klaren STOP MUSIC-Taste für "feste Position". Diese Richtlinie ist ein Fall von Überreaktion auf missbräuchliche Praktiken.
Randy

Antworten:

104

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 audioTag 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 ausblenden

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

Hinweis: diplay: noneund visibility: hiddenbewirkt, dass das <embed>Element nicht funktioniert.

Ajbee
quelle
Wie macht man die Audio-Schleife?
Kwarrtz
1
Lösung 2 hat bei mir funktioniert. Nebenbemerkung: Wenn Sie gleichzeitig für Web und Phonegap arbeiten, benötigt Phonegap diese Problemumgehung nicht und es dauert tatsächlich ziemlich schlecht. Wenn Sie also eine gemeinsame Codebasis für Web und Phonegap haben, stellen Sie sicher, dass Sie eine Möglichkeit finden, diese Problemumgehung nur im Web anzuwenden.
Ignacio Segura
2
Der Link zur Stille-Datei ist tot, daher habe ich auf GitHub einige andere Stille-Dateien gefunden: github.com/anars/blank-audio . Ich verwende es 1-second-of-silence.mp3für mein Projekt, aber jede Datei in dieser Sammlung würde funktionieren, denke ich.
Travis
13
Scheint ab Chrome 76
kaputt zu sein
3
Ja, das funktioniert nicht mehr (wenn es in der Vergangenheit funktioniert hat)
Yulian
28

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

Leonard Storcks
quelle
5
OK, während dies funktioniert, fühlt es sich auch so an, als würde es einen Fehler ausnutzen oder zumindest unbeabsichtigtes Verhalten. Ich kann mir vorstellen, dass jemand dies Google melden wird, damit ich mich nicht darauf verlassen kann, dass es lange funktioniert. Schöner Fund!
Neil Bryson
4
Etwas abseits des Themas, aber Ihre Stille.mp3 ist mit 36,7 KB ziemlich groß. Versuchen Sie dies (216 Bytes) - s3-eu-west-1.amazonaws.com/neilbryson.net.random/silence.mp3
Neil Bryson
3
Silence.mp3 Link ist tot. Sie können Ihre eigenen erstellen .
idbrii
1
@ Toniq Natürlich entschuldigt sich alle - s3-eu-west-1.amazonaws.com/omegasquadron.neilbryson.net/…
Neil Bryson
1
Ja, sie sind dran ... funktioniert weder in Firefox noch in Chrome mehr
Stefan Reich
15

Ab April 2018 wurden die Richtlinien für die automatische Wiedergabe von Chrome geändert:

"Die Autoplay-Richtlinien von Chrome sind einfach:

  • Die stummgeschaltete automatische Wiedergabe ist immer zulässig.

Autoplay mit Ton ist zulässig, wenn:

  • Der Benutzer hat mit der Domain interagiert (klicken, tippen usw.).
  • Auf dem Desktop wurde der Schwellenwert für den Media Engagement Index des Benutzers überschritten, was bedeutet, dass der Benutzer zuvor Videos mit Ton abgespielt hat.
  • Auf Mobilgeräten hat der Benutzer die Site zu seinem Startbildschirm hinzugefügt.

Ebenfalls

  • Top-Frames können Autoplay-Berechtigungen an ihre Iframes delegieren, um Autoplay mit Sound zu ermöglichen. ""

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

Deltran
quelle
3
Sie sagen also, dass wir das Audio im Chrome-Browser nicht automatisch wiedergeben können?
Akshay Rathod
Außerdem gibt es in Chrome Browser in Android jetzt eine Berechtigungsoption, mit der der Benutzer auswählen kann, ob Sounds in Autoplay zugelassen werden sollen
zeta
8

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>
Manuel Alves
quelle
Können Sie mir eine Geige für diese Implementierung schicken? Es wird wirklich hilfreich sein
Vikash
5
Es funktioniert nicht mehr? Diese Meldung wurde angezeigt: "Der AudioContext durfte nicht gestartet werden. Er muss nach einer Benutzergeste auf der Seite fortgesetzt (oder erstellt) werden. Developers.google.com/web/updates/2017/09/… "
thdoan
Arbeiten an Chrome 81.0.4044.138 auf Mac 👍
Mosh Feu
5

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.

Paul Becker
quelle
Ich glaube, dies ist auf dem richtigen Weg, um den neuen Richtlinien zu folgen, die EINIGE Benutzerinteraktionen zum Abspielen von Musik erfordern. Ich habe dies zu dem Touch-Ereignis hinzugefügt, das ich bereits für mobile Browser hinzugefügt habe, und zu einem "manchmal funktionierenden" Onscroll-Ereignis. Leider scheint die "no play ()" -Richtlinie nicht zuzulassen, dass ein Mausrad-Bildlauf als Benutzerinteraktion zählt, aber ich arbeite auch daran. Die Sache ist, meine Seite ist eine MUSIC-Seite, wörtlich "mymusic.html" genannt, die Sie einer gut beschrifteten MUSIC-Schaltfläche folgen können. Wenn es also jemals eine Seite gab, die das Spielen beim Laden rechtfertigte, sollte dies wirklich der Fall sein!
Randy
@ Randy Ich bin in einer sehr ähnlichen Situation, ich arbeite an einer Musikseite und möchte Autoplay implementieren. Das Hinzufügen des Autoplay-Attributs funktionierte sehr uneinheitlich - der gleiche Code funktioniert gelegentlich, aber nicht immer. Ich habe keine Konsolen- oder Netzwerkfehler. Hast du deine Situation gelöst?
Lazarus steigt
@LazarusRising - Während dies alles mit Telefonbrowsern zu beginnen schien, stelle ich fest, dass neuere Versionen von Desktop-Browsern auch die automatische Wiedergabe ablehnen. Ich muss jedoch sagen, dass ich mit der Notwendigkeit zufrieden bin, dass ein durch Benutzerinteraktion ausgelöstes Ereignis die Musik startet. Tatsächlich ärgere ich mich sogar als Seitenautor, wenn ich auf meine Seite gehe und Musik starte, nur weil ich den Bildschirm berührt habe. Ich fange an zu verstehen, warum das automatische Abspielen eingestellt wird. Und da dies allgemein geschieht, habe ich nicht das Gefühl, dass meine Website die einzige ist, die dies nicht kann.
Randy
Chrome wirft eine Verletzung, um das Spielen zu erzwingen.
Gabriel Petersson
2

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.

Murtaza JAFARI
quelle
2

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>
Waleed Aldhahi
quelle
Scheint in Chrome Version 85.0.4183.83 (Official Build) (64-Bit)
MC9000
1

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.

Puto Miké
quelle
3
Sich auf eine Benutzerinteraktion zu verlassen, ist keine automatische Wiedergabe.
Mightyiam
0

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.

Akshay Rathod
quelle
0

Verwenden Sie iframestattdessen:

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

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

Youssef KH
quelle
Dies ist keine Antwort, da es sich nicht um eine automatische Wiedergabe handelt.
Mightyiam
1
@mightyiam Dies ist eine Problemumgehung, da es keine Möglichkeit zum automatischen Abspielen gibt, da Chrome es blockiert hat
Youssef KH
0

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>
Yuriy Boyko
quelle
1
Vielleicht, wenn Ihre MEI für diese Site die automatische Wiedergabe zulässt. Ansonsten sehe ich keinen Grund, warum dies funktionieren würde.
Mightyiam
0

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 mutedEigenschaft 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>
Es ist ausgesprochen
quelle
4
Ich möchte, dass Audio im Hintergrund abgespielt wird.
Akshay Rathod
13
Die automatische Wiedergabe stummgeschalteter Audiodaten kann nicht als Antwort angesehen werden.
Mightyiam
@Akshay Rathod hast du Lösungen gefunden?
Der Tote
0

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>

Juan
quelle
1
Nee. Funktioniert nicht in Chrome Version 85.0.4183.83 (Official Build) (64-Bit)
MC9000
0

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>
Campbell
quelle
-2

Sie können verwenden <iframe src="link/to/file.mp3" allow="autoplay">, wenn der Ursprung über eine Autoplay-Berechtigung verfügt. Mehr Infos hier .

Martin van Houte
quelle
Es zeigt Steuerelemente und ich möchte nichts auf der Seite. einfach spielen und pausieren.
Akshay Rathod
und wie man das Audio schleift?
Akshay Rathod
1
@AkshayRathod Bitte überprüfen Sie das HTML <audio> -Schleifenattribut . Während in XHTML die Attributminimierung verboten ist und das Schleifenattribut als <audio loop = "loop"> definiert werden muss.
hmd
-4

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.

Mahtab Alam
quelle
3
Es ist nicht so, dass die automatische Wiedergabe "nicht funktioniert", sondern dass sie einer Richtlinie unterliegt, bei der die automatische Wiedergabe nicht funktioniert, wenn die Richtlinienanforderungen nicht erfüllt werden. Siehe developer.google.com/web/updates/2017/09/… . Dieser Code umgeht diese Richtlinie nicht. Wenn es für Sie funktioniert hat, liegt es daran, dass Sie den Schwellenwert erreicht und / oder ein Entwickler-Flag gesetzt haben. Aber wie diese Seite sagt, können Sie nicht davon ausgehen, dass es für alle funktioniert.
ADyson
Zumindest in FF 66 wird dies auch nicht funktionieren. Die neue Richtlinie besteht darin, play () zu blockieren, wenn es nicht durch eine Benutzerinteraktion ausgelöst wurde.
Randy