автозапуск аудио работает в Mozilla, Microsoft edge и старом Google Chrome, но не в новом Google Chrome. они заблокировали автовоспроизведение. Есть ли способ сделать это автозапуск аудио в Google Chrome?
Как сделать автозапуск аудио на Chrome
Ответ 1
Решение № 1
Мое решение здесь - создать iframe
<iframe src="audio/source.mp3" allow="autoplay" style="display:none" id="iframeAudio">
</iframe>
и audio также подходят для нехромных браузеров
<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>
хороший источник для mp3 файла silence.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> не будет работать.
Ответ 2
Есть действительно изящная хитрость в использовании функции autoplay тега audio в 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 замечает, что звук был воспроизведен, и дает разрешение на автоматическое воспроизведение в аудиотэгах.
Ответ 3
Просто добавьте этот небольшой скрипт, как показано в 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>
Ответ 4
С апреля 2018 года правила автозапуска Chrome изменились:
"Правила автозапуска Chrome просты:
- Приглушенный автовоспроизведение всегда разрешено.
Автозапуск со звуком разрешен, если:
- Пользователь взаимодействовал с доменом (нажмите, нажмите и т.д.).
- На рабочем столе пользовательское пороговое значение индекса вовлеченности мультимедиа превышено, что означает, что пользователь ранее воспроизводил видео со звуком.
- На мобильном телефоне пользователь добавил сайт на свой домашний экран.
Также
- Верхние кадры могут делегировать разрешение на автозапуск своим фреймам, чтобы разрешить автоигру со звуком. "
Сайт для разработчиков Chrome содержит больше информации, включая примеры программирования, которые можно найти здесь: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Ответ 5
В прошлом месяце 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>
Ответ 6
По крайней мере, вы можете использовать это:
document.addEventListener('click', musicPlay);
function musicPlay() {
document.getElementById('ID').play();
document.removeEventListener('click', musicPlay);
}
Музыка начинается, когда пользователь щелкает в любом месте страницы.
Он также мгновенно удаляет EventListener, поэтому, если вы используете аудиоустановки, пользователь может отключить звук или приостановить его, и музыка не начнется снова, когда он щелкнет где-нибудь еще.
Ответ 7
Вместо этого используйте iframe:
<iframe id="stream" src="YOUTSOURCEAUDIOORVIDEOHERE" frameborder="0"></iframe>
Ответ 8
Сегодня я отмахивался от этого, и я просто хотел добавить небольшой кусочек, который я обнаружил, к обсуждению.
Во всяком случае, я ушел от этого:
<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 раз должно сработать), звук будет воспроизводиться автоматически, а затем он будет проигрываться несколько раз после обновления только для возврата к злым путям. Fantastic!
В объявлении от Google говорится, что для того, чтобы медиа файлы воспроизводились "автоматически", должно происходить взаимодействие между пользователем и сайтом. Поэтому лучшее "решение", которое мне удалось найти, - это добавить кнопку, которая сделает воспроизведение файлов менее автоматическим, но гораздо более стабильным/надежным.
Ответ 9
Вы можете использовать <iframe src="link/to/file.mp3" allow="autoplay">, если у источника есть разрешение автозапуска. Больше информации здесь.
Ответ 10
Я использовал pixi.js и pixi-sound.js для достижения автоматической игры в хром и 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>
он также работает на мобильных устройствах, но пользователь должен прикасаться где-то на экране, чтобы вызвать звук.
Ответ 11
Как я заметил, этот атрибут autoplay удален, HTML5 больше не поддерживает функцию автовоспроизведения, даже если вы проверяете официальную документацию HTML5, вы не найдете ничего, связанного с автозапуском, поскольку они удалили ее из документации.
Ссылка: W3Schools. (2018, 09 07). HTML5 Audio. Источник: www.w3schools.com: https://www.w3schools.com/html/html5_audio.asp
Существуют альтернативные решения с помощью javascript.
Ответ 12
временное исправление
$(document).on('click', "#buttonStarter", function(evt)
{
var context = new AudioContext();
document.getElementById('audioPlayer').play();
$("#buttonStarter").hide()
$("#Game").show()
});
Или используйте пользовательский плеер, чтобы запустить игру http://zohararad.github.io/audio5js/
Примечание: автоигра будет сдана в аренду 31 декабря
Ответ 13
Я добавляю атрибут управления тоже тегом audio, и просто скрываю его в CSS. И все отлично работает в Chrome.
<audio autoplay loop controls id="playAudio">
<source src="audio/source.mp3">
</audio>
Ответ 14
Вам нужно только запустить функцию воспроизведения при инициализации:
var aud = document.getElementById("myAudio");
aud.play(); // this will do the trick :)<audio id="myAudio">
<source src="https://wiki.selfhtml.org/local/Europahymne.mp3" type="audio/mp3">
</audio>Ответ 15
Решение без использования 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>Ответ 16
Атрибут автозапуска HTML5 audio по умолчанию не работает в Chrome, но вы можете включить автозапуск аудио с помощью JavaScript. Попробуй это:
document.getElementById('myAudio').play();
Это работает для меня.