Javascript / HTML5 - Экономьте звук на локальном хранилище

Question

Javascript / HTML5 - Экономьте звук на локальном хранилище

1

Я создаю 5 игр с javascript и html5, и я использую звук. У меня есть кнопка отключения звука, которая активирует функцию ниже. Дело в том, что я хочу сделать так, чтобы, если я нажму кнопку отключения звука, и я перейду на другую страницу, она все равно будет отключена, но я не могу понять, как ее интегрировать в эту функцию. Если кто-то может мне помочь, отредактировав код, я бы действительно его оценил: D

function init(){
    audio = new Audio();
    audio.src = "sound/paint_Music.mp3";
    audio.loop = true;
    audio.autoplay = true;

    mutebtn = document.getElementById("mutebtn");
    mutebtn.addEventListener("click", mute);

function mute(){
    if (audio.muted){
        audio.muted = false;
        document.getElementById("mutebtn").src = "img/soundON.png";
    } else {
        audio.muted = true;
        document.getElementById("mutebtn").src = "img/soundOFF.png";


        }

    }
}

Bruno Filipe 04 июнь 2017, в 00:06

Источник

Теги:

javascript

audio

html5

button

local-storage

2 ответа

0

Добавьте приглушенное значение в ваш localStorage в localStorage "mute".

function mute(){
        ...
        audio.muted = false;
        localStorage.setItem('muted', 'false');
    } else {
        audio.muted = true;
        localStorage.setItem('muted', 'true');
    }
}

}

Затем в init localStorage значение localStorage или значение по умолчанию false если оно не было установлено ранее.

function init(){
    audio = new Audio();
    audio.src = "sound/paint_Music.mp3";
    audio.loop = true;
    audio.autoplay = true;
    var isMuted = (localStorage.getItem("muted") && localStorage.getItem("muted") == 'true') || false

    audio.muted = isMuted;
    mutebtn = document.getElementById("mutebtn");
    mutebtn.addEventListener("click", mute);
}

jswaldon 03 июнь 2017, в 20:25

0

localStorage.getItem("muted") => "false" => true который не всегда дает желаемый результат. Другими словами, непустые строки неявно преобразуются в true независимо от их содержимого.
Teedeez 03 июнь 2017, в 22:19
0

Спасибо вам за помощь. Но при этом звук всегда отключается при загрузке страницы: s
Bruno Filipe 04 июнь 2017, в 00:04

Ещё вопросы

localStorage.getItem("muted") => "false" => true который не всегда дает желаемый результат. Другими словами, непустые строки неявно преобразуются в true независимо от их содержимого.
Спасибо вам за помощь. Но при этом звук всегда отключается при загрузке страницы: s

Dummy · Accepted Answer · 2017-06-03T20-03-00.000Z

Измените свою функцию следующим образом:

function init() {
    audio = new Audio();
    audio.src = "sound/paint_Music.mp3";
    audio.loop = true;
    audio.autoplay = true;
    var muteState = localStorage.getItem('muteState');
    if (!muteState || muteState !== 'true') {
        audio.muted = false;
        document.getElementById("mutebtn").src = "img/soundON.png";
    }
    else {
        audio.muted = true;
        document.getElementById("mutebtn").src = "img/soundOFF.png";
    }
    mutebtn = document.getElementById("mutebtn");
    mutebtn.addEventListener("click", mute);

    function mute() {
        if (audio.muted) {
            audio.muted = false;
            document.getElementById("mutebtn").src = "img/soundON.png";
        } else {
            audio.muted = true;
            document.getElementById("mutebtn").src = "img/soundOFF.png";
        }
        localStorage.setItem('muteState', String(audio.muted));
    }

}

Прежде всего, спасибо за вашу помощь. Это было почти идеально для того, что я хотел. Звук отключается на следующей странице, если я нажимаю кнопку отключения звука, но функция отключения звука также меняет источник изображения, поэтому, когда звук отключен, он показывает одно изображение (soundOFF), а когда его нет, показывает другое изображение (звучать на). Дело в том, что когда я нажимаю кнопку отключения звука и захожу на следующую страницу, звук отключается, но он показывает мне неправильное изображение. Вы знаете, как я мог это изменить?
Вау, большое спасибо! Именно то, что я хотел! Хорошего дня!