У меня есть анимационный проект, который должен автоматически воспроизводить звук во всех основных браузерах, в том числе на мобильных устройствах. Нам также нужно управлять звуком, чтобы он продолжал воспроизводиться после паузы и повторного воспроизведения. Это означает, что мы не можем использовать iframe
, потому что звук будет воспроизводиться каждый раз. Кроме того, просто узнайте, что iframe
теперь не может автоматически воспроизводиться в Chrome... Будет ли какой-нибудь обходной путь для решения этой проблемы?
Есть ли какой-нибудь обходной путь (или хак) для автоматического воспроизведения звука в Chrome, Firefox и Safari?
Ответы (3)
Все эти браузеры требуют, чтобы ваш пользователь жестом подтвердил, что он действительно хочет, чтобы ваша страница воспроизводила звук.
Поэтому все, что вам нужно сделать, это пригласить своих пользователей сделать это жест пользователя.
Чтобы быть в полной безопасности, вы вызовете метод play()
элемента MediaElement, которым вы хотите управлять, из этого события, инициируемого жестом пользователя (которое фактически требуется для Safari), и тогда вы получите полный контроль над этим элементом MediaElement:
// original samples from wikimedia
// https://en.wikipedia.org/wiki/Category:The_Beatles_audio_samples
const audio = new Audio("https://dl.dropboxusercontent.com/s/0eio842lwj1x5dj/Strawberry_Fields_Forever_%28Beatles_song_-_sample%29.mp3");
audio.repeat = true;
audio.volume = 0;
document.getElementById( 'btn' ).onclick = e => {
document.getElementById( 'splash' ).remove();
audio.play().then( () => {
audio.currentTime = 0;
audio.pause();
audio.volume = 1;
startTimers();
});
};
function startTimers() {
setTimeout( playAudio, 2000 );
setTimeout( pauseAudio, 3000 );
setTimeout( playAudio, 6000 );
setTimeout( changeSrc, 7000 );
setTimeout( pauseAudio, 15000 );
setTimeout( playAudio, 60000 );
setTimeout( pauseAudio, 70000 );
}
function playAudio() {
console.log('playing');
audio.play();
}
function pauseAudio() {
console.log('pausing');
audio.pause();
}
function changeSrc() {
console.log('changing src');
audio.src = "https://dl.dropboxusercontent.com/s/okbnk1ycupxrrb2/_Sgt._Pepper%27s_Lonely_Hearts_Club_Band_by_the_Beatles_1967%20%281%29%20%28online-audio-converter.com%29.mp3";
audio.play();
}
#splash {
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
#splash p { display: inline-block }
<div id="splash">
<button id="btn"><h1>Start the awesome</h1></button>
</div>
В браузерах больше нет автовоспроизведения звука. Я рекомендую прочитать эти.:
статья Google об изменении политики автозапуска
Руководство MDN по автозапуску
Политика автоматического воспроизведения веб-приложений
Есть много полезной информации, почему это работает так, как сейчас, и что с этим делать.
Когда вы пытаетесь автоматически воспроизвести аудио без предварительного взаимодействия пользователя с документом, это вызовет ошибку. Таким образом, ключ в том, чтобы сначала заставить пользователя взаимодействовать с документом.
Что вы можете сделать, так это то, что когда пользователь открывает страницу, он должен сначала щелкнуть где-нибудь или какую-то кнопку, чтобы сделать фактический контент видимым, а затем с этим воспроизвести звук после взаимодействия с кликом.
Информацию об устранении ошибки см. в разделе Расширение элемента DOM, обработка ошибки и изящная деградация.
PS: я заметил, что при переключении вкладки перезагрузите вкладку, на которую вы переключились, и переключитесь обратно + перезагрузите, она просто работает без каких-либо обходных путей. Не решение, мне просто интересно, почему это происходит (я использую последнюю версию Chrome). Он должен инициировать взаимодействие с документом, ничего не делая
make it continue playing after it paused
- но он приостановлен - person Jaromanda X   schedule 19.09.2019