[JavaScript] Cookies zapamiętujący włączenie i wyłączenie muzyki

Dla specjalistów Webmastering
#1

Witam.

Mam problem ze skryptem, który ma tworzyć ciasteczko, gdy ktoś wyłączy muzykę (buttonem) i w zależności od tego czy ciasteczko istnieje dodawać do html kod lub go usuwać.

Kod do odtwarzania muzyki:

<div id="muzyka"><audio controls autoplay><source src="muzyka.mp3" type="audio/mpeg"></audio></div>

Zaznaczam, że w js jestem początkujący.

#2

A jaki jest ten problem ze skryptem?

 

Pokaż co napisałeś.

#3

Właściwie to próbowałem przerobić skrypt informujący o używaniu ciasteczek, bo ma podobne właściwości do oczekiwanych (znika po naciśnięciu przycisku).

function WHCreateCookie(name, value, days) {
    var date = new Date();
    date.setTime(date.getTime() + (days*24*60*60*1000));
    var expires = "; expires=" + date.toGMTString();
	document.cookie = name+"="+value+expires+"; path=/";
}
function WHReadCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0; i < ca.length; i++) {
		var c = ca[i];
		while (c.charAt(0) == ' ') c = c.substring(1, c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
	}
	return null;
}

window.onload = WHCheckCookies;

function WHCheckCookies() {
    if(WHReadCookie('cookies_accepted') != 'T') {
        var message_container = document.createElement('div');
        message_container.id = 'cookies-message-container';
        var html_code = '<div id="muzyka"><audio controls autoplay><source src="muzyka.mp3" type="audio/mpeg"></audio></div>';
        message_container.innerHTML = html_code;
        document.body.appendChild(message_container);
    }
}

function WHCloseCookiesWindow() {
    WHCreateCookie('cookies_accepted', 'T', 365);
    document.getElementById('cookies-message-container').removeChild(document.getElementById('cookies-message'));
}

Kod html przycisku włączającego i wyłączającego:

<a href="javascript:WHCloseCookiesWindow();" id="accept-cookies-checkbox" name="accept-cookies">Muzyka</a>

Wiem, że jest to napewno źle zrobione, ale nie miałem innego pomysłu.

#4 
function WHCreateCookie(name, value, days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
var expires = "; expires=" + date.toGMTString();
    document.cookie = name+"="+value+expires+"; path=/";
}
function WHReadCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

window.onload = WHCheckCookies;

function WHCheckCookies() {
if(WHReadCookie('music') != 'T') {
var container = document.createElement('div');
container.id = 'musiccontainer;
var html_code = '<audio controls autoplay id="muzyka"><source src="muzyka.mp3" type="audio/mpeg"></audio>';
container.innerHTML = html_code;
document.body.appendChild(container);
}
}

function BlockMusic() {
WHCreateCookie('music', 'T', 365);
document.getElementById('muzyka').pause();
document.getElementById('przycisk').style.display = "none";
}

Pamiętaj, by przycisk miał onclick=“BlockMusic()” id=“przycisk”__, czyli:

<button id="przycisk" onclick="BlockMusic()" value="Muzyka off" />
#5

Dodałem twój skrypt do sekcji head w znaczniku <script type=“text/javascript”></script>,a przycisk do mojego menu. Niestety po włączeniu strony muzyka się nie włącza (w kodzie nie ma dodanego odtwarzania muzyki). Wyczyściłem ciasteczka, ale to nie pomogło. I przy okazji co trzeba zrobić, by po ponownym naciśnięciu przycisku muzyka zaczeła znowu lecieć?

#6

jest na pewno mały błąd w syntaktyce skryptu co widać choćby w kolorwaniu składni na forum.

 

Poprawiłeś to czy po prostu zrobiłeś kopiuj wklej?

#7

Dzięki. Nie zauważyłem, a wystarczyło tylko dodać jeden apostrof.

Co do włączania muzyki przerobiłem trochę ten skrypt, ale nie wiem dlaczego nie działa.

    function WHCreateCookie(name, value, days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
var expires = "; expires=" + date.toGMTString();
    document.cookie = name+"="+value+expires+"; path=/";
}
function WHReadCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

window.onload = WHCheckCookies;

function WHCheckCookies() {
if(WHReadCookie('music') != 'T') {
var container = document.createElement('div');
container.id = 'musiccontainer';
var html_code = '<audio controls autoplay id="muzyka"><source src="muzyka.mp3" type="audio/mpeg"></audio>';
container.innerHTML = html_code;
document.body.appendChild(container);
}
}
function Music() {
if(WHReadCookie('music') != 'T') {
WHCreateCookie('music', 'T', 365);
document.getElementById('muzyka').stop();}
else {
WHCreateCookie('music', 'N', 365);}
WHCheckCookies();
}
/*document.getElementById('przycisk').style.display = "none";*/
}

Oczywiście zmieniłem w przycisku onclick=“BlockMusic()” na onclick=“Music()”.

#8

…

Niepoprawnie przerobiłeś skrypt.

function WHCreateCookie(name, value, days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
var expires = "; expires=" + date.toGMTString();
    document.cookie = name+"="+value+expires+"; path=/";
}
function WHReadCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}
 
window.onload = WHCheckCookies;
 
function WHCheckCookies() {
var container = document.createElement('div');
container.id = 'musiccontainer';
var html_code = '<audio controls autoplay id="muzyka"><source src="muzyka.mp3" type="audio/mpeg"></audio>';
container.innerHTML = html_code;
document.body.appendChild(container);
if(WHReadCookie('music') != 'T') {
  document.getElementById('muzyka').pause();
  ReplaceWith(document.getElementById('przycisk'), 'Muzyka on');
} else {
  document.getElementById('muzyka').play();
}
}
function ReplaceWith(object, value) {
object.value = value;
}
function ChangeMusicStateMusic() {
if(WHReadCookie('music') == 'F') {
WHCreateCookie('music', 'T', 365);
document.getElementById('muzyka').play();
ReplaceWith(document.getElementById('przycisk'), 'Muzyka off');
} else {
ReplaceWith(document.getElementById('przycisk'), 'Muzyka on');
document.getElementById('muzyka').pause();
}
}

Elementu audio już nie dawaj, przycisk ma pozostać taki jak wcześniej.

#9 
<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript">
function WHCreateCookie(name, value, days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
var expires = "; expires=" + date.toGMTString();
    document.cookie = name+"="+value+expires+"; path=/";
}
function WHReadCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}
 
window.onload = WHCheckCookies;
 
function WHCheckCookies() {
var container = document.createElement('div');
container.id = 'musiccontainer';
var html_code = '<audio controls autoplay id="muzyka"><source src="muzyka.mp3" type="audio/mpeg"></audio>';
container.innerHTML = html_code;
document.body.appendChild(container);
if(WHReadCookie('music') != 'T') {
  document.getElementById('muzyka').pause();
  ReplaceWith(document.getElementById('przycisk'), 'Muzyka on');
} else {
  document.getElementById('muzyka').play();
}
}
function ReplaceWith(object, value) {
object.value = value;
}
function ChangeMusicStateMusic() {
if(WHReadCookie('music') == 'F') {
WHCreateCookie('music', 'T', 365);
document.getElementById('muzyka').play();
ReplaceWith(document.getElementById('przycisk'), 'Muzyka off');
} else {
ReplaceWith(document.getElementById('przycisk'), 'Muzyka on');
document.getElementById('muzyka').pause();
}
}
</script>
</head>
<body>
<button id="przycisk" onclick="BlockMusic()" value="Muzyka off" />
</body>
</html>

Sorry, że znowu piszę ale męczę się z tym kilka godzin i nic nie działa. Powyżej jest cały kod html. Błagam niech ktoś to sprawdzi i wstawi działający kod, bo ja naprawdę nie wiem co robię źle. Wydaje mi się, że w buttonie w onclick powinno być ChangeMusicStateMusic(), ale jak to zmieniłem to i tak nie działa.

#10

Sory, nie zauważyłem. Tak, zamiast BlockMusic() powinno być ChangeMusicStateMusic().

To drugie Music było z rozpędu więc nazwa trochę dziwna (Change Music State - Music? może tak by to zamienić na normalny :D).