HTML和Javascript静音音频

Question

我尝试创建背景音频（工作），然后当我激活静音按钮时，音频应该静音（在JavaScript中）。静音不起作用。

简短版本：

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

我尝试过设置document.getElementById（＆＃34; MuzikaPlayer＆＃34;）; 静音不会起作用。音乐有效。

以下是代码的完整版本：

＆＃13;

＆＃13;

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


}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这不是muted的问题，而是您在代码中添加JavaScript文件的方式。现在，您可以在页面顶部的head部分添加所有JS文件：

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

这意味着脚本在加载页面元素之前执行。这就是真正的问题所在。这是你的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;
            }

当您在加载音频#MuzikaPlayer之前执行上面的代码（特别是第20行）时，IvanCar将是未定义的，并且您使用它的任何操作都将失败。您需要在页面完全加载时执行该代码。

考虑到这一点，您可以应用此快速修复：将JS从head移至body 的末尾（推荐的最佳做法）：< / p>

    ...

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

现在执行脚本时，#MuzikaPlayer已经存在，代码可以正常工作。