Показать сообщение отдельно
  #8 (permalink)  
Старый 04.03.2024, 21:17
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,737

По сути, единственное, что требуется от пользователя - кликнуть по странице, чтобы разрешить проигрывать аудио.
Если очень хочется запустить медиа на странице, то почему не сделать как-то так?

<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>

Последний раз редактировалось Nexus, 04.03.2024 в 21:25.
Ответить с цитированием