Geek asks and answers

HTML and Javascript mute sound

I try to create a background sound (works), and then when I activate the mute button, the sound should be muted (in JavaScript). Muting does not work.

Short version:

<audio id="MuzikaPlayer" loop autoplay>
  <source src="Slike/FunMusic.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
<script>
var IvanCar = document.getElementById('MuzikaPlayer');
if(volume==true)
            {
            IvanCar.muted = false;
            }
        else
            {
            IvanCar.muted = true;
            }
</script>

I tried setting document.getElementById ("MuzikaPlayer"); Muting will not work. The music works.

Here is the full version of the code:

var brojEkrana=1;
var i=0; //Brojac stavki u meniju,0 jer je prva slika, pocetna 0.
var URL; //URL adresa do XML fajla
var svePutanjeSlika= [];
var svePutanjeAudio= [];
var sviNatpisiCir= [];
var sviNatpisiLat = [];
var br=1;
var ukupnoStavki;
var pojam;
var k=0;//stavka u podesavanjima
var prethodniEkran=0;

//na dole su promenljive za zelena dugmica na podesavanju
var volume=true;
var random=false;
var color=false;
var letter=false;

var IvanCar = document.getElementById('MuzikaPlayer');

window.onload=function(e) //window onload = kad se ocita stranica pocni da hvatas dogadjaje koji se dogadjaju na toj stranici
{
		document.addEventListener('keyup', function(e)
				{
					switch(e.keyCode) //keyCode je broj dugmeta koji je pretisnut, svako dugme ima svoj keyCode
					{
					case 13: //ENTER sifra
						switch(brojEkrana)
						{
						case 1: 
							KeyHandlerSplash();
						break;
						
						case 2:
							KeyHandlerMenuEnter();
							//BrojEkrana++; //Malo b ne sme...
						break;
						
						case 4:
							KeyHandlerSettingsEnter();
						break;
						}
						break;
					
					case 37: //LEFT sifra
						switch(brojEkrana)
						{
							case 2: //druga stranica. nema case 1 jer nam ne treba na prvu stranicu
								KeyHandlerMenuLeft();
							break;
							case 3:
								KeyHandlerMenuLeft3();
								
							break;
						}
						break;
					
					case 39: //RIGHT sifra
						switch(brojEkrana)
						{
							case 2: //druga stranica. nema case 1 jer nam ne treba na prvu stranicu
								KeyHandlerMenuRight();
							break;
							case 3:
								KeyHandlerMenuRight3();
							break;
						}
						break;
						
					case 38: //UP sifra
						switch(brojEkrana)
						{
							case 2: //druga stranica. nema case 1 jer nam ne treba na prvu stranicu
								KeyHandlerMenuUp();
								KeyHandlerHighlightUp();
							break;
							case 3:
								KeyHandlerHighlightUp();
							break;
							case 4:
								KeyHandlerSettingsUp();
							break;
						}
						break;
						
					case 40: //DOWN sifra
						switch(brojEkrana)
						{
							case 2: //druga stranica. nema case 1 jer nam ne treba na prvu stranicu
								KeyHandlerMenuDown();
								KeyHandlerHighlightDown();
							break;
							case 4:
								KeyHandlerSettingsDown();
							break;
						}
						break;
						
					case 10009: //BACK sifra
						switch(brojEkrana)
						{
							case 2: //Ovo je za podesavanja, da nestane
								KeyHandlerMenuBackDis();
							break;
							case 3: //samo na trecom stranici mozemo da se vratimo na drugu stranicu
								KeyHandlerMenuBack();
								KeyHandlerMenuBackDis();
							break;
							case 4: //samo na trecom stranici mozemo da se vratimo na drugu stranicu
								brojEkrana = prethodniEkran;
								document.getElementById("settings-form").style.visibility="hidden";
								document.getElementById("info-form").style.visibility="hidden";
								PodesiHelpBar();
								PodesiHelpBarDva();
							break;	
						}
						break;
						
					case 10135: //TOOLS (podesavanja) sifra
						switch(brojEkrana)
						{
						case 2:
							prethodniEkran=2;
							brojEkrana = 4;
							document.getElementById("settings-form").style.visibility="visible";
							
						break;
						case 3:
							prethodniEkran=3;
							brojEkrana = 4;
							document.getElementById("settings-form").style.visibility="visible";
							
						break;
						}										
						break;	
						
					case 457: //INFO sifra
						switch(brojEkrana)
						{
						case 2:
							prethodniEkran=2;
							brojEkrana = 4;
							document.getElementById("info-form").style.visibility="visible";
						break;
						case 3:
							prethodniEkran=3;
							brojEkrana = 4;
							document.getElementById("info-form").style.visibility="visible";
						break;
						}
						break;
						
					}
				});
			
}

var KeyHandlerSplash=function() //sakriva prvu stranu i prelazi na drugi ekran
{
	document.getElementById("splash-form").style.visibility="hidden";
	brojEkrana++;
};


var KeyHandlerMenuLeft=function()
{
	console.log("Left je ok!"); //provera da vidimo gde smo. u zagradi pisemo sta konzola izbaci.
		if(i>0) //kad je bilo koja slika osim prve
		{
			document.getElementById("group"+i).style.backgroundImage="url(slike/g"+i+".png)"; //stavi sliku bez senke. style.back.. jer menjamo css.
			i--; //umanji brojac
			document.getElementById("group"+i).style.backgroundImage="url(slike/g"+i+"H.png)"; //stavi sliku sa senkom
		}
		
		else if(i==0) //kad je prva slika
		{
			document.getElementById("group"+i).style.backgroundImage="url(slike/g"+i+".png)";
			i=i+7; //idi na zadnju sliku
			document.getElementById("group"+i).style.backgroundImage="url(slike/g"+i+"H.png)";
		}
};

var KeyHandlerMenuRight=function()
{
	console.log("Right je ok!"); //provera da vidimo gde smo. u zagradi pisemo sta konzola izbaci.
		if(i<7) //ako je bilo koja slika
		{
			document.getElementById("group"+i).style.backgroundImage="url(slike/g"+i+".png)"; //stavi sliku bez senke. style.back.. jer menjamo css.
			i++; //dodaj sliku
			document.getElementById("group"+i).style.backgroundImage="url(slike/g"+i+"H.png)"; //stavi sliku sa senkom
		}
		
		else if(i==7) //kad je zadnja slika
		{
			document.getElementById("group"+i).style.backgroundImage="url(slike/g"+i+".png)";
			i=i-7; //idi na prvu
			document.getElementById("group"+i).style.backgroundImage="url(slike/g"+i+"H.png)";
		}
};

var KeyHandlerMenuUp=function()
{
	console.log("Up je ok!"); //provera da vidimo gde smo. u zagradi pisemo sta konzola izbaci.
		if(i>3) //ako nije prvih 4 slika
		{
			document.getElementById("group"+i).style.backgroundImage="url(slike/g"+i+".png)"; //stavi sliku bez senke. style.back.. jer menjamo css.
			i=i-4; //idi nazad za 4 slike
			document.getElementById("group"+i).style.backgroundImage="url(slike/g"+i+"H.png)"; //stavi sliku sa senkom
		}
		
};

var KeyHandlerMenuDown=function()
{
	console.log("Down je ok!"); //provera da vidimo gde smo. u zagradi pisemo sta konzola izbaci.
		if(i<4) //ako nije zadnjih 4 slika
		{
			document.getElementById("group"+i).style.backgroundImage="url(slike/g"+i+".png)"; //stavi sliku bez senke. style.back.. jer menjamo css.
			i=i+4; //idi napred za 4 slike
			document.getElementById("group"+i).style.backgroundImage="url(slike/g"+i+"H.png)"; //stavi sliku sa senkom	
		}
};

var KeyHandlerMenuBack=function()
{
	console.log("Back je ok!"); //provera da vidimo gde smo. u zagradi pisemo sta konzola izbaci.
	document.getElementById("select-form").style.visibility="hidden";
	brojEkrana--;
	document.getElementById("group-form").style.visibility="visible";

};

//Sve pre ovog vazi za prvu i drugu stranicu. Kasnije se neke funkcije pozivaju i u trecu stranicu.

var KeyHandlerMenuEnter=function() //Za ulazak u trecu stranu
{
	document.getElementById("group-form").style.visibility="hidden";
	document.getElementById("select-form").style.visibility="visible";
	brojEkrana++;
	
			var group_form = "group" + i;
			switch(group_form)
			{
			case "group0":
				URL="http://appxmlpod.vtsnis.edu.rs/PrveReci/g00.xml";
			break;
			
			case "group1":
				URL="http://appxmlpod.vtsnis.edu.rs/PrveReci/g1.xml";
			break;
			
			case "group2":
				URL="http://appxmlpod.vtsnis.edu.rs/PrveReci/g2.xml";
			break;
			
			case "group3":
				URL="http://appxmlpod.vtsnis.edu.rs/PrveReci/g3.xml";
			break;
			
			case "group4":
				URL="http://appxmlpod.vtsnis.edu.rs/PrveReci/g4.xml";
			break;
			
			case "group5":
				URL="http://appxmlpod.vtsnis.edu.rs/PrveReci/g5.xml";
			break;
			
			case "group6":
				URL="http://appxmlpod.vtsnis.edu.rs/PrveReci/g6.xml";
			break;
			
			case "group7":
				URL="http://appxmlpod.vtsnis.edu.rs/PrveReci/g7.xml";
			break;
			}
			
			konekcija(URL).done(function(xmlResult){

		        var br;
		        var ukupnoStavki = xmlResult.getElementsByTagName("pojam").length;

		        for (br=0;br<ukupnoStavki-1;br++)
		        {
		            svePutanjeSlika[br] = xmlResult.getElementsByTagName("putanja_slike")[br].innerHTML;
		            //console.log(svePutanjeSlika[br]);
		            svePutanjeAudio[br] = xmlResult.getElementsByTagName("putanja_audio")[br].innerHTML;
		            sviNatpisiCir[br] = xmlResult.getElementsByTagName("natpis_cirilica")[br].innerHTML;
		            sviNatpisiLat[br] = xmlResult.getElementsByTagName("natpis_latinica")[br].innerHTML;

		        }
		        

		        $.preload(svePutanjeSlika,{
		            loaded_all: function(loaded,total){
		                console.log("Sve ucitano");
		                ucitajPojam(0);
		                br=0;
		            }
		        })

		        }).fail(function(){

		            console.log("Konekcija nije uspela!")

		    });

};

var konekcija=function(adresa)
{
	return $.ajax({
		type: 'GET',
		url: adresa,
		dataType: 'xml'
	})
};

ucitajPojam=function(broj)
{
	document.getElementById("Platno").innerHTML="<img src='"+svePutanjeSlika[broj]+ "'/>";
	document.getElementById("NatpisDva").innerHTML= sviNatpisiLat[broj];
}

var KeyHandlerMenuRight3=function()
{
	if(br<ukupnoStavki-1)
	{
		br++;
		ucitajPojam(br);
	}
	else if (br==ukupnoStavki-1)
	{
		br=0;
		ucitajPojam();
	}
}

var KeyHandlerMenuLeft3=function()
{
	if(br==0)
	{
		ucitajPojam(br);
	}
	else if(br>0) 
		{
		br--;
		ucitajPojam(br);
		}
}

/* Kraj trece stranice */
/*Podesavanja*/


var KeyHandlerMenuBackDis=function() //podesavanja nestanu
{
	document.getElementById("settings-form").style.visibility="hidden";
}

/*
var KeyHandlerHighlightDown=function()
{
	//document.getElementById("highlight").style.top = "80px"; // nece dalje, samo ce jednom da spusti 80px;
	//document.getElementById("highlight").style.top=(highlight.style.top+90)+'px';
	
	if (k==3) k=0;
	else k++;
	
	switch(k)
	{
		case 0:
			document.getElementById("selectFrame").style.top = "580px";
				break;
		case 1:
			document.getElementById("selectFrame").style.top = "510px";
			break;
		case 2:
			document.getElementById("selectFrame").style.top = "440px";
			break;
		case 3:
			document.getElementById("selectFrame").style.top = "350px";
			break;
	}
	

}
*/

/* var KeyHandlerHighlightUp=function()
{
	if (k==0) k=3;
	else k--;
	
	switch(k)
	{
		case 0:

			document.getElementById("selectFrame").style.top = "350px";
				break;
		case 1:
			document.getElementById("selectFrame").style.top = "440px";
			break;
		case 2:
			document.getElementById("selectFrame").style.top = "510px";
			break;
		case 3:
			document.getElementById("selectFrame").style.top = "580px";
			break;
	} 
}
*/


var KeyHandlerSettingsUp=function() //kada pretisnes UP dugme na daljin., highlight ide gore
{
	var top= parseInt(document.getElementById("selectFrame").offsetTop);
	if (k==0)
		{
		top=582+"px";
		k=3;
		}
	else
		{
		top=top-82+"px";
		k--;
		}
	document.getElementById("selectFrame").style.top=top;

}


var KeyHandlerSettingsDown=function() //kada pretisnes DOWN dugme na daljin., highlight ide gore
{
	var top= parseInt(document.getElementById("selectFrame").offsetTop);
	if (k==3)
		{
		top=336+"px";
		k=0;
		}
	else
		{
		top=top+82+"px";
		k++;
		}
	document.getElementById("selectFrame").style.top=top;

}

var KeyHandlerSettingsEnter=function() //kada pretisnes Enter na podesavanja, da se pomeraju zelena dugmica i menjaju stvari
{
	switch(k)
	{
		case 3:  //za cirilicu/latinicu setting
			letter=!letter; //menja iz true u false i obrnuto
			if (letter==true) //ako je true=cirilica
				{
					document.getElementById("btnLetter").style.left="1407px";
					document.getElementById("choice").style.background="url('Slike/Podesavanja_cirilica.png')";
					document.getElementById("natpis").style.background="url('Slike/PrveReciC.png')";
				}
			else
				{
					document.getElementById("btnLetter").style.left="1304px";
					document.getElementById("choice").style.background="url('Slike/Podesavanja_latinica.png')";
					document.getElementById("natpis").style.background="url('Slike/PrveReciL.png')";
				}
				
		break;
		
		case 0: //za ton opciju
			volume=!volume;
			if(volume==true)
				{
				document.getElementById("btnVolume").style.left="1407px";
				IvanCar.muted = false;
				}
			else
				{
				document.getElementById("btnVolume").style.left="1304px";
				IvanCar.muted = true;
				}
		break;
		
		case 1: //za Slucajan redosled opciju
			random=!random;
			if(random==true)
				{
				document.getElementById("btnRandom").style.left="1407px";
				
				}
			else
				{
				document.getElementById("btnRandom").style.left="1304px";
				
				}
		break;
		
		case 2: //za Promena platna opciju
			color=!color;
			if(color==true)
				{
				document.getElementById("btnColor").style.left="1407px";
				document.getElementById("PlatnoBoja").style.top="725px"
				}
			else
				{
				document.getElementById("btnColor").style.left="1304px";
				document.getElementById("PlatnoBoja").style.top="-425px"
				}
		break;
			
	}

}

var PodesiHelpBar=function()
{
	switch(brojEkrana)
	{
		case 2:
			if(letter==true) //true=cirilica
			{
				//alert("cirilica");
				document.getElementById("helpBar").style.background= "url('Slike/helpbar.png') 0px -84px no-repeat";
				
			}
		break;
		
		case 3:
			if(letter==false) //true=latinica
			{
				//alert("latinica");
				document.getElementById("helpBar").style.background= "url('Slike/helpbar.png') 0px -252px no-repeat";
			}
		break;
	}


}

var PodesiHelpBarDva=function()
{
	switch(brojEkrana)
	{
		case 2:
			if(letter==true) //true=cirilica
			{
				//alert("cirilica");
				document.getElementById("helpBarDva").style.background= "url('Slike/helpbar.png') 0px -84px no-repeat";
				
			}
		break;
		
		case 3:
			if(letter==true) //true=latinica
			{
				//alert("latinica");
				document.getElementById("helpBarDva").style.background= "url('Slike/helpbar.png') 0px -252px no-repeat";
			}
		break;
	}


}
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="PrveReci4IvanCss.css" type="text/css">
     <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="preload2.js"> </script>
    <script src="./main.js"></script>
</head>
<body>
	<div id="wrapper">   <!--Prva strana - splash screen -->
		<div id="splash-form"> 
			<div id="startButton"> </div>
		</div>
	</div>
	
	<div id="group-form">  <!--Druga strana-->
		<div id="natpis"> </div>
		
		<div id="group0"> </div> <!--1 Povrce -->
		<div id="group1"> </div> <!--2 Voce -->
		<div id="group2"> </div> <!--3 Zivotinje -->
		<div id="group3"> </div> <!--4 Hrana -->
		<div id="group4"> </div> <!--5 Slova -->
		<div id="group5"> </div> <!--6 Brojevi -->
		<div id="group6"> </div> <!--7 Boje -->
		<div id="group7"> </div> <!--8 Kuca -->
		
		<div id="text0"> Povrce </div>
		<div id="text1"> Voce </div>
		<div id="text2"> Zivotinje </div>
		<div id="text3"> Hrana </div>
		<div id="text4"> Slova </div>
		<div id="text5"> Brojevi</div>
		<div id="text6"> Boje </div>
		<div id="text7"> Kuca </div>
		
		<div id="helpBar"> </div>
		
	</div>
	
	<div id="select-form">  <!-- Treca strana -->
		<div id="LeviOblak"> </div>
		<div id="DesniOblak"> </div>
		<div id="LevaStrelica"> </div>
		<div id="DesnaStrelica"> </div>
		
		<div id="NatpisDva"> </div>
		
		<div id="helpBarDva"> </div>
		
		<div id="Platno"> </div>
		
		<div id="PlatnoBoja"> </div>
	</div> <!-- Kraj Treca strana -->
	
	 <!-- Podesavanja -->
	<div id="settings-form" class="forms">
			<div id="choice"></div>
			<div id="selectFrame"></div>
			<div id="btnVolume"></div>
			<div id="btnRandom"></div>
			<div id="btnColor"></div>
			<div id="btnLetter"></div>
	</div>
	<!-- O nama - Info -->
	<div id="info-form"> 
			<div id="infoText"> </div>
	
	</div>
	<!--  Muzika -->
	<audio id="MuzikaPlayer" loop autoplay>
	  <source src="Slike/FunMusic.mp3" type="audio/mpeg">
	  Your browser does not support the audio element.
	</audio>
</body>
</html>
Run codeHide result
+4
source share
1 answer

This is not a problem with muted, but with the way you add JavaScript files to your code. Right now, you are adding all the JS files to the section headat the top of the page:

<head>
    <title></title>
    <link rel="stylesheet" href="PrveReci4IvanCss.css" type="text/css">
     <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="preload2.js"> </script>
    <script src="./main.js"></script>
</head>

, script . . JS (, ):

// LINE 20
var IvanCar = document.getElementById('MuzikaPlayer');

...

// LINE 477
        volume=!volume;
        if(volume==true)
            {
            document.getElementById("btnVolume").style.left="1407px";
            IvanCar.muted = false;
            }
        else
            {
            document.getElementById("btnVolume").style.left="1304px";
            IvanCar.muted = true;
            }

( , 20) #MuzikaPlayer, IvanCar undefined, , , . , .

, : JS head body ( ):

    ...

    <!--  Muzika -->
    <audio id="MuzikaPlayer" loop autoplay>
      <source src="Slike/FunMusic.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>

    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="preload2.js"> </script>
    <script src="./main.js"></script>

</body>
</html>

, script, #MuzikaPlayer , .

+1

More articles:


All Articles