autoodtwarzanie dźwięku działa również w Mozilli, Microsoft Edge i starym Google Chrome, ale nie w nowym Google Chrome. zablokowali autoodtwarzanie. czy jest jakiś sposób na automatyczne odtwarzanie dźwięku w Google Chrome?

Rozwiązanie nr 1

Moje rozwiązanie polega na utworzeniu pliku iframe

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

i audiotagi również dla przeglądarek innych niż Chrome

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

i w moim 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 
  }

Rozwiązanie nr 2:

Zgodnie z @Leonard istnieje również inne obejście tego problemu

Utwórz, iframektóry nic nie odtwarza, tylko po to, by uruchomić autoodtwarzanie przy pierwszym ładowaniu.

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

dobre źródło pliku mp3 silence.mp3

Następnie z łatwością odtwarzaj swój prawdziwy plik audio.

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

Osobiście wolę rozwiązanie nr 2, ponieważ jest to czystsze podejście, ponieważ nie polega tak bardzo na JavaScript.

Aktualizacja sierpień 2019

Rozwiązanie nr 3

Jako alternatywę możemy użyć <embed>

W przypadku przeglądarki Firefox Wygląda na to, że automatyczne odtwarzanie dźwięku działa, więc nie potrzebujemy tego <embed>elementu, ponieważ utworzy on podwójny dźwięk.

// 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.
}

Również jeśli masz zdarzenie przełączania dla swojego dźwięku, pamiętaj, aby usunąć utworzony <embed>element dla dźwięku.

Uwaga: po przełączeniu nastąpi ponowne uruchomienie od początku, ponieważ element <embed>został już usunięty, a <audio>element będzie teraz odtwarzany normalnie.

$(".toggle-audio").on('click', function(event) {
    audioPlaying = !audioPlaying;
    $("#background-audio").remove();

    clearInterval(backgroundAudio);
    if (audioPlaying){
        $(".audio1").play();
        // play audio 
    }
    else {
        $(".audio1").pause();
    }

A teraz pamiętaj, aby ukryć te <audio>i <embed>elementy

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

Uwaga: diplay: nonei visibility: hiddensprawi, że <embed>element nie będzie działał.

Jest naprawdę fajna sztuczka polegająca na użyciu funkcji autoodtwarzania tagu audio w chrome.

Dodaj

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

natomiast silence.mp3 tylko 0,5 sekundy ciszy.

To

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

działa później.

Chrome zauważa, że ​​dźwięk został odtworzony i zezwala na autoodtwarzanie w tagach audio.

W kwietniu 2018 r. Zmieniły się zasady automatycznego odtwarzania Chrome:

„Zasady automatycznego odtwarzania Chrome są proste:

• Wyciszone autoodtwarzanie jest zawsze dozwolone.

Autoodtwarzanie z dźwiękiem jest dozwolone, jeśli:

• Użytkownik wszedł w interakcję z domeną (kliknięcie, dotknięcie itp.).
• Na komputerach stacjonarnych przekroczono próg indeksu zaangażowania użytkownika w media, co oznacza, że ​​użytkownik wcześniej odtwarzał wideo z dźwiękiem.
• Na telefonie komórkowym użytkownik dodał witrynę do swojego ekranu głównego.

Również

• Górne ramki mogą przekazywać uprawnienia do autoodtwarzania do swoich ramek iframe, aby umożliwić autoodtwarzanie z dźwiękiem. "

Witryna programistów Chrome zawiera więcej informacji, w tym kilka przykładów programowania, które można znaleźć tutaj: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Po prostu dodaj ten mały skrypt, jak pokazano na https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio

<head>
<script>
window.onload = function() {
  var context = new AudioContext();
}
</script>
</head>

To będzie działać tak, jak chcesz:

<audio autoplay>
      <source src="hal_9000_sorry_dave.mp3">
</audio>

Przynajmniej możesz tego użyć:

document.addEventListener('click', musicPlay);
function musicPlay() {
    document.getElementById('ID').play();
    document.removeEventListener('click', musicPlay);
}

Muzyka zaczyna się, gdy użytkownik kliknie w dowolnym miejscu strony.

Usuwa również natychmiast EventListener, więc jeśli użyjesz elementów sterujących dźwiękiem, użytkownik może go wyciszyć lub wstrzymać, a muzyka nie zacznie się ponownie, gdy kliknie gdzie indziej.

Przeglądarki zmieniły swoją prywatność na automatyczne odtwarzanie wideo lub audio z powodu reklam, które są irytujące. Możesz więc po prostu oszukać poniższym kodem.

W ramce iframe można umieścić dowolny cichy dźwięk.

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

Po prostu dodaj niewidoczną ramkę iframe z plikiem .mp3 jako źródłem i pozwól = "autoplay" przed elementem audio. W rezultacie przeglądarka zostaje nakłoniona do uruchomienia dowolnego kolejnego pliku audio. Lub automatycznie odtwarzaj film, który nie jest wyciszony.

Możesz po prostu użyć (.autoplay = true;) w następujący sposób (przetestowano na pulpicie Chrome):

<audio id="audioID" loop> <source src="path/audio.mp3"  type="audio/mp3"></audio>

<script>
var myaudio = document.getElementById("audioID").autoplay = true;
</script>

Jeśli chcesz dodać przyciski zatrzymania / odtwarzania:

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

Jeśli chcesz, aby zatrzymywanie / odtwarzanie było jednym przyciskiem:

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

Jeśli chcesz wyświetlić zatrzymanie / odtwarzanie na tym samym przycisku:

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

W niektórych przeglądarkach dźwięk może nie działać poprawnie, więc spróbuj dodać element iframe przed kodem:

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

Dzisiaj się tym zajmowałem i chciałem tylko dodać trochę ciekawostki, którą odkryłem do dyskusji.

W każdym razie odszedłem od tego:

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

To:

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

I wreszcie to „rozwiązanie”, które jest nieco poza zakresem, jeśli wolisz po prostu wygenerować własną rzecz (co robimy):

<script src='https://code.responsivevoice.org/responsivevoice.js'></script>
<input onclick='responsiveVoice.speak("Hello World");' type='button' value='Play' />

Odkrycie, którego dokonałem, a także naprawdę zabawna (dziwna? Dziwna? Absurdalna?) Część jest taka, że ​​w przypadku dwóch pierwszych, możesz faktycznie pokonać system, nadając f5 odpowiednie uderzenie; jeśli wciśniesz powtarzające się bardzo szybko odświeżanie (około 5-10 razy powinno załatwić sprawę), dźwięk zostanie automatycznie odtworzony, a następnie odtworzy się kilka razy po każdym odświeżeniu tylko po to, aby powrócić na swoje złe ścieżki. Fantastyczny!

W komunikacie od Google jest napisane, że aby pliki multimedialne odtwarzały się „automatycznie”, musiała mieć miejsce interakcja między użytkownikiem a witryną. Dlatego najlepszym „rozwiązaniem”, jakie udało mi się do tej pory wymyślić, jest dodanie przycisku, dzięki któremu odtwarzanie plików będzie mniej niż automatyczne, ale znacznie bardziej stabilne / niezawodne.

Użyłem pixi.js i pixi-sound.js, aby uzyskać automatyczne odtwarzanie w Chrome i 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>

działa również na urządzeniach mobilnych, ale użytkownik musi dotknąć gdzieś na ekranie, aby wywołać dźwięk.

Użyj iframezamiast tego:

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

poprawka tymczasowa

$(document).on('click', "#buttonStarter", function(evt)
{
var context = new AudioContext();
document.getElementById('audioPlayer').play();
$("#buttonStarter").hide()
$("#Game").show()
});

Lub użyj niestandardowego odtwarzacza, aby uruchomić grę http://zohararad.github.io/audio5js/

Uwaga: autoodtwarzanie zostanie wznowione 31 grudnia

Dodałem też atrybut controls, oznaczam dźwięk i po prostu ukrywam go w CSS. I wszystko działa dobrze w Chrome.

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

Google zmienił swoje zasady w zeszłym miesiącu dotyczące automatycznego odtwarzania w Chrome. Zobacz to ogłoszenie .

Zezwalają jednak na automatyczne odtwarzanie, jeśli osadzasz wideo i jest ono wyciszone. Możesz dodać tę mutedwłaściwość i powinna umożliwić rozpoczęcie odtwarzania wideo.

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

Rozwiązanie bez użycia iframe lub 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>

Dzięki temu rozwiązaniu unika się również okna dialogowego otwierania / zapisywania programu Internet Explorer.

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

Tag wideo może również odtwarzać dźwięk. Biorąc pod uwagę, że tag audio nie działa tak, jak powinien, możesz po prostu użyć tagu wideo dla dźwięku:

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

Możesz użyć <iframe src="link/to/file.mp3" allow="autoplay">, jeśli źródło ma pozwolenie na autoodtwarzanie. Więcej informacji tutaj .

Domyślny audioatrybut autoodtwarzania HTML5 nie działa w Chrome, ale możesz wymusić autoodtwarzanie dźwięku, używając JavaScript. Spróbuj tego:

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

To działa dla mnie.