it-swarm.com.de

So erstellen Sie Audio-Autoplay auf Chrom

audio-Autoplay funktioniert auch in Mozilla, Microsoft Edge und altem Google Chrome, jedoch nicht im neuen Google Chrome. Sie haben das Autoplay blockiert. Gibt es eine Möglichkeit, Audio in Google Chrome automatisch zu spielen?

21
Akshay Rathod

Lösung # 1

Meine Lösung hier ist das Erstellen einer iframe

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

und audio-Tag sowie für Nicht-Chrome-Browser

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

und in meiner 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 auch eine andere Problemumgehung

Erstellen Sie eine iframe, die nichts spielt, nur um das Autoplay 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 problemlos Ihre echte Audiodatei ab.

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

Persönlich bevorzuge ich Lösung # 2, weil es sauberer ist, weil man sich nicht so sehr auf JavaScript verlässt.

50
jt25

Es ist ein wirklich toller Trick, die Autoplay-Funktion des Audio-Tags in Chrome zu verwenden.

Hinzufügen

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

wohingegen silence.mp3 nur 0,5 Sekunden Stille ist.

Diese 

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

arbeitet danach.

Chrome erkennt, dass ein Sound abgespielt wurde, und erteilt die Berechtigung für die automatische Wiedergabe in Audio-Tags.

Sehen Sie es in Aktion: http://deinesv.cf/

10
Leonard Storcks

Ab April 2018 wurden die Autoplay-Richtlinien von Chrome geändert:

"Die Autoplay-Richtlinien von Chrome sind einfach:

  • Eine stummgeschaltete Autoplay-Funktion ist immer zulässig.

Autoplay mit Sound ist erlaubt, wenn:

  • Der Benutzer hat mit der Domäne interagiert (klicken, tippen usw.).
  • Auf dem Desktop wurde der Schwellenwert für den Media Engagement Index des Benutzers Überschritten. Dies bedeutet, dass der Benutzer zuvor Videos mit Ton abgespielt hat.
  • Auf dem Handy hat der Benutzer die Website zu seinem Startbildschirm hinzugefügt.

Ebenfalls

  • Top-Frames können Autoplay-Berechtigungen an ihre Iframes delegieren, um Autoplay mit Sound . Zu erlauben. "

Die Entwicklerseite von Chrome enthält weitere Informationen, einschließlich einiger Programmierbeispiele, die hier zu finden sind: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

4
deltran

Fügen Sie dieses kleine Skript einfach wie in https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio

<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>
2
Manuel Alves

Google hat im letzten Monat seine Richtlinien bezüglich der automatischen Wiedergabe in Chrome geändert. Bitte sehen Sie diese Ankündigung .

Sie erlauben jedoch die automatische Wiedergabe, wenn Sie ein Video einbetten und es stummgeschaltet ist. 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>
1
drpcken

Ich habe mich heute damit beschäftigt, und ich wollte nur ein kleines Kuriosum hinzufügen, das ich zur Diskussion gefunden habe.

Wie auch immer, ich bin davon abgegangen:

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

Diese:

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

Und zum Schluss noch eine "Lösung", die etwas außerhalb der Grenzen liegt, wenn Sie 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 witzige (seltsame? Komische? Lächerliche?) Teil besteht darin, dass Sie im Fall der früheren zwei das System tatsächlich schlagen können, indem Sie f5 ein richtiges Stampfen geben. Wenn Sie wiederholt sehr schnell auf Aktualisieren klicken (einige 5-10 Mal müssen Sie den Trick ausführen), wird das Audio automatisch abgespielt und dann bei einer Sigle-Aktualisierung ein paar Mal abgespielt, nur um wieder zu den bösen Wegen zurückzukehren.

In der Ankündigung von Google heißt es, dass für eine "automatische" Wiedergabe von Mediendateien eine Interaktion zwischen dem Nutzer und der Site stattfinden muss. Die beste "Lösung", die ich bisher gefunden habe, ist das Hinzufügen einer Schaltfläche, wodurch das Abspielen von Dateien weniger automatisch erfolgt, jedoch wesentlich stabiler/zuverlässiger.

1
Puto Miké

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 irgendwo auf die Seite klickt.

Der EventListener wird auch sofort entfernt. Wenn Sie die Audio-Steuerelemente verwenden, kann der Benutzer ihn stummschalten oder anhalten, und die Musik wird nicht erneut gestartet, wenn Sie an einer anderen Stelle klicken.

1
Paul Becker

Das Standard-HTML5 audio Das Autoplay-Attribut funktioniert in Chrome nicht, aber Sie können die automatische Audiowiedergabe mit JavaScript erzwingen. Versuche dies:

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

Das funktioniert bei mir.

1
Mahtab Alam

Sie müssen die Play-Funktion nur bei init auslösen:

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

Verwenden Sie stattdessen iframe:

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

Ich füge Steuerelemente Attribut zu Tag-Audio hinzu und verstecke es einfach in CSS . Und alles funktioniert in Chrome.

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

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 das Spiel auszulösen http://zohararad.github.io/audio5js/

Hinweis: Die automatische Wiedergabe wird am 31. Dezember wieder aktiviert

0
Youssef KH