автовоспроизведение звука также работает в Mozilla, Microsoft Edge и старом Google Chrome, но не в новом Google Chrome. они заблокировали автовоспроизведение. есть ли способ сделать его автовоспроизведением звука в Google Chrome?
html
google-chrome
html5-audio
Акшай Ратод
источник
источник
Ответы:
Решение # 1
Мое решение здесь - создать
iframe
<iframe src="audio/source.mp3" allow="autoplay" style="display:none" id="iframeAudio"> </iframe>
и
audio
пометьте также для браузеров без Chrome<audio autoplay loop id="playAudio"> <source src="audio/source.mp3"> </audio>
и в моем
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 }
Решение №2:
По словам @Leonard, есть еще один способ обхода этого.
Создайте файл,
iframe
который ничего не воспроизводит, только для запуска автовоспроизведения при первой загрузке.<iframe src="silence.mp3" allow="autoplay" id="audio" style="display: none"></iframe>
хороший исходник для мп3 файла тишина.mp3
Затем с легкостью воспроизведите свой настоящий аудиофайл.
<audio id="player" autoplay loop> <source src="audio/source.mp3" type="audio/mp3"> </audio>
Лично я предпочитаю решение №2, потому что это более чистый подход, позволяющий не полагаться на JavaScript.
Обновление за август 2019 г.
Решение # 3
В качестве альтернативы мы можем использовать
<embed>
Для Firefox Кажется, что автовоспроизведение звука работает, поэтому нам не нужен этот
<embed>
элемент, потому что он создаст двойной запуск звука.// 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. }
Также, если у вас есть событие переключения для звука, не забудьте удалить созданный
<embed>
элемент для звука.Примечание: после переключения он перезапустится с самого начала, потому
<embed>
что<audio>
элемент уже удален, и теперь элемент будет воспроизводиться как обычно.$(".toggle-audio").on('click', function(event) { audioPlaying = !audioPlaying; $("#background-audio").remove(); clearInterval(backgroundAudio); if (audioPlaying){ $(".audio1").play(); // play audio } else { $(".audio1").pause(); }
А теперь убедитесь , чтобы скрыть это
<audio>
и<embed>
элементыaudio, embed { position: absolute; z-index: -9999; }
Примечание:
diplay: none
иvisibility: hidden
сделает<embed>
элемент неработающим.источник
1-second-of-silence.mp3
для своего проекта, но, думаю, подойдет любой файл из этой коллекции.Есть действительно хитрый трюк, чтобы использовать функцию автовоспроизведения аудиотэга в Chrome.
Добавить
<iframe src="silence.mp3" allow="autoplay" id="audio"></iframe>
тогда как
silence.mp3
тишина всего 0,5 секунды.Этот
<audio id="player" autoplay controls><source src="0.mp3" type="audio/mp3"></audio>
работает потом.
Chrome замечает, что был воспроизведен звук, и дает разрешение на автовоспроизведение в аудио тегах.
источник
С апреля 2018 года правила автоматического воспроизведения Chrome изменились:
"Политика автоматического воспроизведения Chrome проста:
Автовоспроизведение со звуком разрешено, если:
Также
На сайте разработчика Chrome есть дополнительная информация, включая некоторые примеры программирования, которые можно найти здесь: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
источник
Просто добавьте этот небольшой скрипт, как показано на странице https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio.
<head> <script> window.onload = function() { var context = new AudioContext(); } </script> </head>
Тогда это будет работать так, как вы хотите:
<audio autoplay> <source src="hal_9000_sorry_dave.mp3"> </audio>
источник
По крайней мере, вы можете использовать это:
document.addEventListener('click', musicPlay); function musicPlay() { document.getElementById('ID').play(); document.removeEventListener('click', musicPlay); }
Музыка начинается, когда пользователь щелкает в любом месте страницы.
Он также мгновенно удаляет EventListener, поэтому, если вы используете элементы управления звуком, пользователь может отключить или приостановить его, и музыка не запускается снова, когда он щелкает в другом месте.
источник
Браузеры изменили свою конфиденциальность на автовоспроизведение видео или звука из-за раздражающей рекламы. Таким образом, вы можете просто обмануть код ниже.
В iframe можно поместить любой беззвучный звук.
<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>
Просто добавьте невидимый iframe с .mp3 в качестве источника и allow = "autoplay" перед элементом audio. В результате браузер обманом запускает любой последующий аудиофайл. Или автовоспроизведение видео без звука.
источник
Вы можете просто использовать (.autoplay = true;) следующим образом (проверено на Chrome Desktop):
<audio id="audioID" loop> <source src="path/audio.mp3" type="audio/mp3"></audio> <script> var myaudio = document.getElementById("audioID").autoplay = true; </script>
Если вам нужно добавить кнопки остановки / воспроизведения:
<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>
Если вы хотите, чтобы стоп / воспроизведение было одной кнопкой:
<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>
Если вы хотите отображать стоп / воспроизведение на той же кнопке:
<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>
В некоторых браузерах звук может работать некорректно, поэтому попробуйте добавить iframe перед кодом:
<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>
источник
Сегодня я уже много думал об этом, и я просто хотел добавить в обсуждение небольшой интересный факт, который я обнаружил.
Во всяком случае, я ушел от этого:
<iframe src="silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe> <audio id="audio" autoplay> <source src="helloworld.mp3"> </audio>
Этот:
<audio id="myAudio" src="helloworld.mp3"></audio> <script type="text/javascript"> document.getElementById("myAudio").play(); </script>
И, наконец, это «решение», которое несколько выходит за рамки, если вы предпочитаете просто сгенерировать свою собственную вещь (что мы и делаем):
<script src='https://code.responsivevoice.org/responsivevoice.js'></script> <input onclick='responsiveVoice.speak("Hello World");' type='button' value='Play' />
Открытие, которое я сделал, а также поистине забавная (странная? Странная? Нелепая?) Часть состоит в том, что в случае первых двух вы действительно можете обыграть систему, применив надлежащий удар f5; если вы нажмете «Обновить» очень быстро (примерно 5-10 раз), звук будет воспроизводиться автоматически, а затем он будет воспроизводиться несколько раз при обновлении сигла только для того, чтобы вернуться к своим злым путям. Фантастика!
В объявлении от Google говорится, что для «автоматического» воспроизведения медиафайлов должно иметь место взаимодействие между пользователем и сайтом. Итак, лучшее «решение», которое мне удалось придумать до сих пор, - это добавить кнопку, которая делает воспроизведение файлов менее автоматическим, но намного более стабильным / надежным.
источник
Я использовал pixi.js и pixi-sound.js, чтобы добиться автоматического воспроизведения в Chrome и 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>
он также работает на мобильных устройствах, но пользователь должен коснуться любого места на экране, чтобы включить звук.
источник
iframe
Вместо этого используйте :<iframe id="stream" src="YOUTSOURCEAUDIOORVIDEOHERE" frameborder="0"></iframe>
источник
временное исправление
$(document).on('click', "#buttonStarter", function(evt) { var context = new AudioContext(); document.getElementById('audioPlayer').play(); $("#buttonStarter").hide() $("#Game").show() });
Или используйте собственный проигрыватель для запуска воспроизведения http://zohararad.github.io/audio5js/
Примечание. Автовоспроизведение будет возобновлено 31 декабря.
источник
Я добавляю атрибут управления к тегу audio и просто скрываю его в CSS. И все отлично работает в Хроме.
<audio autoplay loop controls id="playAudio"> <source src="audio/source.mp3"> </audio>
источник
В прошлом месяце Google изменил свою политику в отношении автоматического воспроизведения в Chrome. См. Это объявление .
Однако они разрешают автоматическое воспроизведение, если вы встраиваете видео, и оно отключено. Вы можете добавить
muted
свойство, и оно должно позволить начать воспроизведение видео.<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>
источник
Решение без использования iframe или 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>
Благодаря этому решению также избегается диалоговое окно открытия / сохранения 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>
источник
Тег видео также может воспроизводить звук. Учитывая, что тег audio не работает должным образом, вы можете просто использовать тег video для звука:
<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>
источник
Вы можете использовать
<iframe src="link/to/file.mp3" allow="autoplay">
, если у источника есть разрешение на автовоспроизведение. Больше информации здесь .источник
audioАтрибут автозапуска HTML5 по умолчанию не работает в Chrome, но вы можете принудительно включить автозапуск звука с помощью JavaScript. Попробуй это:
document.getElementById('myAudio').play();
У меня это работает.
источник