7
  1. При входе на сайт создаётся элемент greetings = document.createElement("audio"); greetings.src = "sounds/greetings.mp3";
  2. Потом в звук включается в window.onload. window.onload() { greeting.play(); }
  3. Выскакивает ошибка: Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

Как бороться?

  • Пробовал задавать onfocus на window - не помогло.
  • Пробовал greetings.pause(); greetings.currentTime = 0; greetings.play(); - не помогло.
  • Пробовал совмещать первый и второй способ - не помогло.
  • От безысходности пробовал:

    var greetingsStatus = setInterval(function() {
        try {
            greeting.play();
            clearInterval(greetingsStatus);
            greetingsStatus = null;
        } catch(e) {
            console.log(e);
        }
    }, 200);
    

Ошибка также: Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

Люди добрые, помогите: что сделать, что бы звук играл сразу после открытия страницы? Даже если она открыта через ctrl или колёсико мыши. (Пользователь еще не зашёл на страницу, но звук уже играет).

P.S Google Chrome Версия 66.0.3359.139 (Официальная сборка), (64 бит)

P.S.3 Пока выбирал метки для вопроса: всплыла подсказка: web-audio. Это о audio API. Я его пока не знаю. Может знает кто: будет ли с ним мою задачу проще решить?


Ошибка возникает только при запуске сайта на локальном сервере. При переходе с сайта stack overflow на мой сайт всё работает отлично. Объясните тогда, как так устроен chrome, что сайтам, запущенным с локального сервера chrome не доверяет, а сайтам в интернете - очень даже.

Если у вас другой браузер, или chrome другой версии, и у вас не включается звук или появляется ошибка в консоли - отпишитесь.

8
  • 1
    У вас такой код не будет также работать в Сафари. Это своеобразная защита, что бы звук не играл до дех пор, пока пользователь не сделает страницу активной. Web-audio поможет в хроме, но не поможет в Сафари. 7 мая 2018 в 7:40
  • @StepanKasyanenko ошибка появляется только при запуске с локального сервера. Если перейти на сайт, который на хостинге, ошибка не возникает. Странно, что браузер не доверяет сайтам, запущенным с локального сервера, а сайтам в интернете - доверяет. здесь 7 мая 2018 в 8:15
  • Нет, не доверяет. prntscr.com/jepb6u 7 мая 2018 в 8:23
  • Большинство пользователей сразу закрывает подобные шумящие вкладки, подумайте, действительно ли это то, что вам нужно.
    – vp_arth
    7 мая 2018 в 8:26
  • Здесь, кстати, вполне хорошо описано, почему так, зачем так и как надо developers.google.com/web/updates/2017/09/… 7 мая 2018 в 8:28

4 ответа 4

2

Звуки не будут автовоспроизводиться, пока пользователь не взаимодействует со страницей. Сделайте так чтобы пользователь захотел щелкнуть по странице в скором времени после того как зашел на сайт. Например во Вконтакте сложно долго не взаимодействовать. И когда щелкнет первый раз, можете сразу воспроизвести звук (при необходимости конечно)

0

Используйте jQuery trigger. К примеру у вас есть 2 кнопки на сайте play и pause. можно сделать так чтобы при загрузки страницы в хроме сымитировался клик на кнопку play

Вот HTML:

<div class="musicPlayer">
    <audio class="listen" preload="none" data-size="50" src="music_url" id="audio0"></audio>
    <button class="playerButtons playMusic"><i class="fas fa-play"></i></button>
    <button class="playerButtons pauseMusic"><i class="fas fa-pause"></i></button>
</div>

Вот jS

$(window).on('load', function(){

    $(".playMusic").trigger('click');

})
3
  • лично мне это не помогло 29 окт 2018 в 14:34
  • @ВиталийФесюра Всё зависит от браузера. Если браузер запретил по умолчанию включение, то скрипт вам не поможет. 10 апр 2019 в 20:30
  • Это уже давно не работает с аудио. Запуск аудио возможен только после действий пользователя
    – Get-Web
    30 апр 2020 в 22:11
0

Установите вашему тегу audio атрибут autoplay:

    greetings = document.createElement("audio");
    greetings.src = "sounds/greetings.mp3";
    greetings.autoplay = true;

и не забудьте вставить этот элемент в html. Подробнее о атрибуте: http://htmlbook.ru/html/audio/autoplay

1
0
HTML:
    <body id="body">
    <a href="ваша ссылка" id="link">страница</a>
    </body>

JavaScript:

    document.querySelector("#link").onclick = () => {
      setTimeout(function () {
      let audio = 
      document.createElement("audio");
      audio.src = "твой аудио";
 
    document.querySelector("#body").appendChild(audio)
       audio.play();
    }, 1000);
    }
1
  • добро пожаловать на Stack Overflow на русском! пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 25 окт 2021 в 11:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.