Как реализовать «войти со звуком» и «войти без звука» на сайте?

Как реализовать «войти со звуком» и «войти без звука» на сайте?

Вот картинка, чтоб понятней было. Так же, на след странице (для которой предлагается выбор, собственно) будет тумблер, с помощью которого музыку можно будет включить/выключить (не зависимо что выбрал человек до этого). Не сумела нагуглить решение:(

Дополнительно:

Шта?

  • Запомните, раз и на всегда. Звуки и видео в браузере можно воспроизводить только через отображаемый проигрыватель, который реализуется тегами audio или video (или через iframe на проигрыватель популярного сервиса), с обязательным предоставлением пользователю органов управления на остановку воспроизведения и отключения громкости в пределах отображаемой области тега.
    Все остальные способы как-то подсунуть фоновый медиа-контент, тем более с правами автовоспроизведения, будут сильно мешать приватному пространству пользователя, и если такие способы есть, то они будут блокироваться в новых версиях браузеров.
  • alexalexes, https://unseen.co/ вот сайт где я это увидела. Тут кажется иначе сделано
  • Михаил Р., https://unseen.co/ вот как тут хочу)

    • Ответы:

    решение в лоб, самое простое

    вывести поверх любой страницы сайт перекрывающий блок с этими кнопками.
    кнопки скрывают блок, а синяя еще и музыку включает.

    • Очень хорошая идея, я попробую, спасибо!

    + Заказать

     

    Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

     

      • Как реализовать «войти со звуком» и «войти без звука» на сайте?Есть ответ
      • 07.04.2024
      Ответить

      Для реализации функционала "войти со звуком" и "войти без звука" на сайте, вам потребуется использовать JavaScript в сочетании с HTML.

      Ниже приведен пример кода на JavaScript, который позволит реализовать данную функциональность:

      // Получаем ссылки на кнопки "войти со звуком" и "войти без звука"
const soundOnButton = document.getElementById('soundOn');
const soundOffButton = document.getElementById('soundOff');
 
// Получаем аудио элемент
const audio = new Audio('sound.mp3');
 
// Устанавливаем обработчики событий
soundOnButton.addEventListener('click', function() {
    // Воспроизводим звук
    audio.play();
});
 
soundOffButton.addEventListener('click', function() {
    // Останавливаем воспроизведение звука
    audio.pause();
});

      В данном коде мы создаем две кнопки - "войти со звуком" и "войти без звука" и устанавливаем для них обработчики событий. При нажатии на кнопку "войти со звуком" проигрывается звук, а при нажатии на кнопку "войти без звука" воспроизведение звука останавливается.

      Не забудьте добавить кнопки на ваш сайт и присвоить им соответствующие id (soundOn и soundOff), а также подключить аудиофайл (sound.mp3) для воспроизведения звука.

      Таким образом, вы сможете реализовать функционал "войти со звуком" и "войти без звука" на вашем сайте.

    Оставить комментарий