По сути, единственное, что требуется от пользователя - кликнуть по странице, чтобы разрешить проигрывать аудио.
Если очень хочется запустить медиа на странице, то почему не сделать как-то так?
<style>
.overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, .7);
z-index: 1;
}
</style>
<div class="overlay">
<button type="button" disabled>
Loading...
</button>
</div>
<button type="button" data-role="play-pause-button">
Pause
</button>
<script>
document.addEventListener('DOMContentLoaded', () => {
const audio = new Audio();
const play = () => {
audio.play().catch(e => {
alert(e.message);
});
};
audio.addEventListener('canplaythrough', () => {
const button = document.querySelector('.overlay button');
if (!button) {
return;
}
button.textContent = 'Start';
button.disabled = false;
button.addEventListener('click', () => {
document.querySelector('.overlay')?.remove();
audio.muted = false;
audio.loop = true;
audio.volume = 1;// 0..1
play();
}, {once: true});
});
audio.addEventListener('error', () => {
alert(audio.error?.message ?? 'Something went wrong');
});
audio.src = 'https://mp3bob.ru/download/muz/Rick_Astley_-_Never_Gonna_Give_You_Up_[www.mp3pulse.ru].mp3';
document.querySelector('[data-role="play-pause-button"]')?.addEventListener('click', e => {
const button = e.target;
if (audio.paused) {
button.textContent = 'Pause';
play();
} else {
button.textContent = 'Play';
audio.pause();
}
});
});
</script>