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?
html
google-chrome
html5-audio
Akshay Rathod
źródło
źródło
Odpowiedzi:
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
audio
tagi 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,
iframe
któ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>
elementyaudio, embed { position: absolute; z-index: -9999; }
Uwaga:
diplay: none
ivisibility: hidden
sprawi, że<embed>
element nie będzie działał.źródło
1-second-of-silence.mp3
do mojego projektu, ale myślę, że każdy plik w tej kolekcji zadział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.
źródło
W kwietniu 2018 r. Zmieniły się zasady automatycznego odtwarzania Chrome:
„Zasady automatycznego odtwarzania Chrome są proste:
Autoodtwarzanie z dźwiękiem jest dozwolone, jeśli:
Również
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
źródło
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>
źródło
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.
źródło
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.
źródło
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>
źródło
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.
źródło
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.
źródło
Użyj
iframe
zamiast tego:<iframe id="stream" src="YOUTSOURCEAUDIOORVIDEOHERE" frameborder="0"></iframe>
źródło
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
źródło
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>
źródło
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ę
muted
wł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>
źródło
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>
źródło
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>
źródło
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 .źródło
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.
źródło