Jak zrobić autoodtwarzanie dźwięku w Chrome

94

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?

Akshay Rathod
źródło
7
Fakt, że Google to zrobił, jest absurdalny. Dosłownie powiedzieli „no cóż, nie ma muzyki do Twojej gry, chyba że użytkownik kliknie Play Music”. Gorszący. Bardzo zły!
Hobbes
2
@Hobbes Zgoda. Przynajmniej powinny być wyjątki. Jak wspomniałem przy innym plakacie, mam stronę „MUZYKA” z linkiem do strony „mymusic.html”, do której można się dostać tylko za pomocą linku / przycisku wyraźnie oznaczonego MOJA MUZYKA. zaskoczony lub zirytowany odtwarzaną tam przykładową muzyką. Zwłaszcza z wyraźnym przyciskiem STOP MUSIC ze stałą pozycją. Ta zasada jest przykładem nadmiernej reakcji na nadużycia.
Randy

Odpowiedzi:

104

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

ajbee
źródło
Jak zrobić pętlę audio?
Kwarrtz
1
Rozwiązanie 2 zadziałało dla mnie. Uwaga: jeśli pracujesz jednocześnie w sieci i Phonegap, Phonegap nie potrzebuje tego obejścia i faktycznie jest to bardzo złe. Jeśli więc masz wspólną bazę kodów dla sieci Web i Phonegap, upewnij się, że znajdziesz sposób na zastosowanie tego obejścia tylko w sieci.
Ignacio Segura
2
Link do pliku ciszy jest martwy, więc znalazłem kilka innych plików ciszy na GitHub: github.com/anars/blank-audio . Używam 1-second-of-silence.mp3do mojego projektu, ale myślę, że każdy plik w tej kolekcji zadziała.
Travis,
13
Wydaje się, że odpadł od Chrome 76.
mightyiam
3
Tak, to już nie działa (jeśli działało w przeszłości)
Julian
28

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.

Leonard Storcks
źródło
5
OK, chociaż to działa, wydaje się, że wykorzystuje błąd lub co najmniej niezamierzone zachowanie. Wyobrażam sobie, że ktoś zgłosi to do Google, więc nie polegałbym na tym, żeby działał długo. Jednak miłe znalezisko!
Neil Bryson,
4
Trochę poza tematem, ale twój silence.mp3 jest dość duży i ma 36,7 KB. Spróbuj tego (216 bajtów) - s3-eu-west-1.amazonaws.com/neilbryson.net.random/silence.mp3
Neil Bryson
3
Silence.mp3 link jest martwy. Możesz stworzyć własne .
idbrii
1
@Toniq Oczywiście, przepraszam wszystkich - s3-eu-west-1.amazonaws.com/omegasquadron.neilbryson.net/…
Neil Bryson
1
Tak, już to robią ... nie działa już ani w Firefoksie, ani w Chrome
Stefan Reich
15

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

deltran
źródło
3
więc mówisz, że nie ma sposobu, abyśmy mogli automatycznie odtwarzać dźwięk w przeglądarce Chrome?
Akshay Rathod
Ponadto w przeglądarce Chrome na Androida jest teraz opcja uprawnień, ponieważ użytkownik może teraz zezwolić na dźwięki w autoodtwarzaniu
zeta,
8

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>
Manuel Alves
źródło
Czy możesz przesłać mi skrzypce do tej realizacji? To będzie naprawdę pomocne
Vikash
5
To już nie działa? Pojawił się komunikat: „Nie zezwolono na uruchomienie kontekstu audio. Musi zostać wznowiony (lub utworzony) po wykonaniu gestu użytkownika na stronie. Developers.google.com/web/updates/2017/09/…
thdoan
Praca w Chrome 81.0.4044.138 na Macu 👍
Mosh Feu
5

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.

Paul Becker
źródło
Uważam, że jest to na dobrej drodze do przestrzegania nowych zasad, które wymagają od NIEKTÓRYCH interakcji użytkownika w celu odtwarzania muzyki. Dodałem to do zdarzenia dotyku, które już dodałem dla przeglądarek mobilnych, oraz do zdarzenia „czasami działającego” onscroll. Niestety zasada „no play ()” nie pozwala na liczenie się kółka myszy jako interakcji użytkownika, ale nad tym też pracuję. Rzecz w tym, że moja strona to strona MUZYKA, dosłownie nazywana „mymusic.html”, do której można przejść pod dobrze oznaczonym przyciskiem MUZYKA. Więc jeśli kiedykolwiek istniała strona, która uzasadniałaby „odtwarzanie” podczas ładowania, to naprawdę powinna!
Randy
@Randy Jestem w bardzo podobnej sytuacji, pracuję nad stroną muzyczną i chcę zaimplementować autoodtwarzanie. Dodanie atrybutu autoplay działało bardzo niekonsekwentnie - ten sam kod działa czasami, ale nie zawsze. Nie mam błędów konsoli ani sieci. Czy rozwiązałeś swoją sytuację?
Powstanie Lazarus
@LazarusRising - Chociaż wydawało się, że wszystko zaczęło się od przeglądarek na telefonach, zauważam, że nowsze wersje przeglądarek na komputery stacjonarne również odrzucają autoodtwarzanie. Muszę jednak powiedzieć, że satysfakcjonuje mnie potrzeba, aby zdarzenie wywołane interakcją użytkownika uruchamiało muzykę. W rzeczywistości nawet ja, jako autor strony, zaczynam się denerwować, gdy wchodzę na moją stronę i włącza się muzyka tylko dlatego, że dotknąłem ekranu. Zaczynam rozumieć logikę, dlaczego autoodtwarzanie jest wycofywane. A ponieważ zaczęło się to zdarzać powszechnie, nie czuję, że moja witryna jest jedyną, która nie może tego zrobić.
Randy
Chrome zgłasza naruszenie za wymuszanie gry.
Gabriel Petersson
2

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.

Murtaza JAFARI
źródło
2

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>
Waleed Aldhahi
źródło
Wydaje się, że nie działa w Chrome w wersji 85.0.4183.83 (oficjalna kompilacja) (wersja 64-bitowa)
MC9000
1

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.

Puto Miké
źródło
3
Poleganie na interakcji użytkownika nie jest odtwarzaniem automatycznym.
mightyiam
0

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.

Akshay Rathod
źródło
0

Użyj iframezamiast tego:

<iframe id="stream" src="YOUTSOURCEAUDIOORVIDEOHERE" frameborder="0"></iframe>
Jessé Mendonça
źródło
0

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

Youssef KH
źródło
To nie jest odpowiedź, ponieważ nie jest to autoodtwarzanie.
mightyiam
1
@mightyiam to obejście, ponieważ nie ma możliwości automatycznego odtwarzania, ponieważ Chrome go zablokował
Youssef KH,
0

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>
Jurij Bojko
źródło
1
Być może, jeśli Twój MEI dla tej witryny umożliwia autoodtwarzanie. W przeciwnym razie nie widzę powodu, dla którego to zadziałałoby.
mightyiam
0

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>
Jego zdaniem
źródło
4
chcę, aby dźwięk był odtwarzany w tle.
Akshay Rathod
13
Wyciszone autoodtwarzanie dźwięku nie może być uznane za odpowiedź.
mightyiam
@Akshay Rathod. Czy znalazłeś rozwiązania?
The Dead Man
0

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>

Juan
źródło
1
Nie. Nie działa w Chrome w wersji 85.0.4183.83 (oficjalna kompilacja) (wersja 64-bitowa)
MC9000
0

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>
Campbell
źródło
-2

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 .

Martin van Houte
źródło
pokazuje kontrolki i nie chcę niczego na stronie. po prostu przycisk odtwarzania i pauzy.
Akshay Rathod
i jak zapętlić dźwięk?
Akshay Rathod
1
@AkshayRathod proszę sprawdzić atrybut pętli HTML <audio> . Natomiast w XHTML minimalizacja atrybutów jest zabroniona, a atrybut pętli musi być zdefiniowany jako <audio loop = "loop">.
hmd
-4

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.

Mahtab Alam
źródło
3
nie chodzi o to, że autoodtwarzanie „nie działa”, ale o to, że podlega zasadom, zgodnie z którymi autoodtwarzanie, jeśli nie będzie działać, jeśli wymagania zasad nie są spełnione. Zobacz developers.google.com/web/updates/2017/09/… . Ten kod nie obejdzie tej zasady. Jeśli to zadziałało, to dlatego, że osiągnąłeś próg i / lub ustawiłeś flagę programisty. Ale jak mówi ta strona, nie można zakładać, że będzie działać dla każdego.
ADyson,
Przynajmniej w FF 66 to też nie zadziała. Nowa zasada polega na blokowaniu funkcji play (), jeśli nie została ona w jakiś sposób wywołana przez interakcję użytkownika.
Randy,