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?

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.

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.

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

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>

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.

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.

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>

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.

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.

Verwenden Sie iframestattdessen:

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

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

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>

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>

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>

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>

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

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.