CODEWITHSUNDEEP
javascripthtmlaudiohtml5-audio
Ivan
Ivan

Reputation: 866

HTML and Javascript mute audio

I'm trying to create a background audio (works) and then when I activate the mute button, the audio should be muted(in JavaScript). The mute 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 have tried setting the document.getElementById("MuzikaPlayer"); The mute won't 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>

Upvotes: 4

Views: 229

Answers (1)

Alvaro Montoro
Alvaro Montoro

Reputation: 29645

This is not an issue with muted but with the way in which you are adding the JavaScript files in the code. Right now, you add all the JS files in the head section at 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>

That means that the script is executed before the page elements are loaded. And that's where the real problem is. This is your JS (comments added by me):

// 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;
            }

As you execute the code above (in particular line 20) before the audio #MuzikaPlayer is loaded, then IvanCar will be undefined, and whatever operation you use with it will fail. You need to execute that code when the page has fully loaded.

Taking that into account, you could apply this quick fix: move the JS from the head to the end of the body (a recommended best practice):

    ...

    <!--  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>

Now when the script is executed, #MuzikaPlayer already exists, and the code will work just fine.

Upvotes: 1

Related Questions