HTML 和 Javascript 静音音频

Posted 2023-02-25

技术标签:

【中文标题】HTML 和 Javascript 静音音频【英文标题】：HTML and Javascript mute audio 【发布时间】：2015-07-27 14:50:40 【问题描述】：

我正在尝试创建背景音频（有效），然后当我激活静音按钮时，音频应该被静音（在 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("MuzikaPlayer"); 静音不起作用。音乐奏效。

这里是完整版的代码：

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>

【问题讨论】：

【参考方案1】：

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

<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（我添加的 cmets）：

// 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 的末尾（推荐的最佳做法）：

    ...

    <!--  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 已经存在，代码可以正常运行。

【讨论】：

出于好奇，哪个键的代码为 457？它是带有特殊“播放器”按钮的键盘中的那些键之一吗？我必须更新您的代码以进行测试，因为我找不到那个键，但在更改之后，我能够毫无问题地静音/取消静音。尝试了您的解决方案，但由于某种原因无法正常工作。我正在使用三星 Tizen 网络程序，为智能电视创建应用程序。代码 457 用于遥控器上的信息按钮 :-) 该修复程序适用于 PC，我不知道是否有特别针对电视需要执行代码的限制。您可以访问 JS 控制台吗？你能看到任何错误吗？

以上是关于HTML 和 Javascript 静音音频的主要内容，如果未能解决你的问题，请参考以下文章

html中的音频静音和取消静音按钮

HTML5 VIDEO 标签不播放音频/静音

切换 HTML5 音频的“静音”属性

如何使来自 UIWebView 的音频静音

HTML 音频在 iOS 或 iOS 模拟器上静音

如何在 ionic 平台的 APIRTC 上静音和取消静音视频/音频？