Блог

Проблема, которую я пытаюсь решить: на моем веб-сайте я пытаюсь создать способ для пользователя изменить громкость на вкл / выкл и сохранить ее на разных страницах. Поэтому, когда пользователь переходит к index.html и about.html Я хочу, чтобы настройки были сохранены.

Мое мышление: в настоящее время я пытаюсь решить эту проблему, сохранив класс active в localstorage и добавив его к кнопке #MyElement , которую я использую для переключения звука. Затем .active класс на #MyElement кнопке определяет, будет ли воспроизводиться аудио или нет.

Кроме того, у меня есть javascript для воспроизведения аудиофайла при наведении курсора мыши на .box разделы (1 и 2 в codepen). Однако эта часть, похоже, работает так, как я хочу: когда страница загружается (я обновляю страницу, и предыдущая настройка была .active ), звук не воспроизводится! Затем мне нужно снова переключить его на .active , и только тогда он будет воспроизводиться. Похоже, что этот фрагмент кода не распознает другую часть.

Как мне убедиться, что звуковая часть прослушивает сохраненный класс localstorage? Я полагаю, что мой код также частично использует jQuery и частично собственный javascript. Я совсем новичок в этом и в основном пытаюсь учиться на других фрагментах кода и медленно внедрять вещи, однако я застрял на этом сейчас на некоторое время.

 // Playing audio based on .active

document.querySelectorAll("[data-sound]").forEach(function (element) {
  // Play associated audio
  element.addEventListener("mouseenter", function (event) {
    // element = $("body");'
    if ($("#MyElement").is(".active")) var soundKey = element.dataset.sound;
    var audioElement = document.querySelector("#"   soundKey);

    if (!audioElement) return;

    audioElement.currentTime = 0;
    audioElement.play();
  });
});

// Saving classes to localstorage

$("#MyElement").addClass(localStorage.getItem("ClassName"));

$("#MyElement").on("click", function () {
  if ($(this).hasClass("active")) {
    $(this).removeClass("active").addClass("inactive");
    localStorage.setItem("ClassName", "inactive");
  } else {
    $(this).removeClass("inactive").addClass("active");
    localStorage.setItem("ClassName", "active");
  }
});
  

https://codepen.io/lucvanloon/pen/LYNLeEw

Спасибо, что взглянули! Люк

Создайте sessionStorage следующим образом:

 sessionStorage.setItem("audio", "active");

document.getElementById("result").innerHTML = sessionStorage.getItem("audio");
  

Я обнаружил, что codepen не работает из-за политики в Google Chrome:https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

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