HTML和Javascript静音音频

Question

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

Answer 1

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.