CODEWITHSUNDEEP
javascripthtmltoggleinternet-explorer-11
Shawn McCulley
Shawn McCulley

Reputation: 7

Toggle javascript code not working in IE11

I am somewhat a newbie to java, and html5. I am working on a html5 audio player that works great in Chrome. It works in IE11 as well except for the toggle javascript. Neither the play or mute button art swap out when clicked on in IE. I've looked at samples on this site and other places but haven't been able to figure it out. Here is all my code:

<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0;padding:0}
div#audio_controls_bar{ box-sizing: border-box; border-style: solid; border-color: black; border-width: 3px; border-radius: 10px 10px 10px 10px; width:550px; height: 60px; background: #333; padding-top:2px; padding-left:10px;color:#CCC;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
button#playpausebtn{
    background:url(Pause_30.png);
    border:none;
    width:33px;
    height:30px;
    position: relative;
    top:50%;
    transform: translateY(-50%);
    cursor:pointer;
    opacity:0.7;

}
button#mutebtn{
    background:url(Sound.png);
    border:none;
    width:33px;
    height:30px;
    position: relative;
    top:50%;
    transform: translateY(-50%);
    cursor:pointer;
    opacity:0.7;

}
input#seekslider{ width:180px; height:8px}
input#volumeslider{ width: 80px; height:8px;padding_left:10px;}
input[type=range] {
  -webkit-appearance: none;
  position: relative;
  transform: translateY(-10%);
    cursor:pointer;
  width: 100%;



}
button#playpausebtn:hover{ opacity:1; }
input#seekslider{ width:180px; }
input#volumeslider{ width: 80px;}
input[type='range'] {
    -webkit-appearance: none !important;
    background: #000;
    border:#666 1px solid;
    height:4px;

}

button#mutebtn:hover{ opacity:1; }
input#seekslider{ width:180px; }
input#volumeslider{ width: 80px;}
input[type='range'] {
    -webkit-appearance: none !important;
    background: #000;
    border:#666 1px solid;
    height:4px;

}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -14px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  background: #3071a9;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {

  border: none;
  height: 36px;
  width: 16px;
   background: #ffffff;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #888;
}
input[type=range]:focus::-ms-fill-upper {
  background: #ccc;
}
</style>
<script>
var vid, playbtn, seekslider, curtimetext, durtimetext, mutebtn, volumeslider, fullscreenbtn;
function intializePlayer(){
    // Set object references
    vid = document.getElementById("my_video");
    playbtn = document.getElementById("playpausebtn");
    seekslider = document.getElementById("seekslider");
    curtimetext = document.getElementsByClassName("curtimetext");
    durtimetext = document.getElementsByClassName("durtimetext");
    mutebtn = document.getElementById("mutebtn");
    volumeslider = document.getElementById("volumeslider");

    // Add event listeners
    playbtn.addEventListener("click",playPause,false);
    seekslider.addEventListener("change",vidSeek,false);
    vid.addEventListener("timeupdate",seektimeupdate,false);
    mutebtn.addEventListener("click",vidmute,false);
    volumeslider.addEventListener("change",setvolume,false);

}
window.onload = intializePlayer;
function playPause(){
    if(vid.paused){
        vid.play();
        playbtn.style.background = "url(Pause_30.png";
    } else {
        vid.pause();
        playbtn.style.background = "url(Play_30.png";
    }
}



function vidSeek(){
    var seekto = vid.duration * (seekslider.valueAsNumber / 100);
    vid.currentTime = seekto;
}
function seektimeupdate(){
    var nt = vid.currentTime * (100 / vid.duration);
    seekslider.value = nt;
    var curmins = Math.floor(vid.currentTime / 60);
    var cursecs = Math.floor(vid.currentTime - curmins * 60);
    var durmins = Math.floor(vid.duration / 60);
    var dursecs = Math.floor(vid.duration - durmins * 60);
    if(cursecs < 10){ cursecs = "0"+cursecs; }
    if(dursecs < 10){ dursecs = "0"+dursecs; }
    if(curmins < 10){ curmins = "0"+curmins; }
    if(durmins < 10){ durmins = "0"+durmins; }
    curtimetext[0].innerHTML = curmins+":"+cursecs;
    durtimetext[0].innerHTML = durmins+":"+dursecs;
}
function vidmute(){
    if(vid.muted){
        vid.muted = false;
        mutebtn.style.background = "url(Sound.png";
    } else {
        vid.muted = true;
        mutebtn.style.background = "url(Sound_mute.png";
    }
}
function setvolume(){
    vid.volume = volumeslider.value / 100;
}
function toggleFullScreen(){
    if(vid.requestFullScreen){
        vid.requestFullScreen();
    } else if(vid.webkitRequestFullScreen){
        vid.webkitRequestFullScreen();
    } else if(vid.mozRequestFullScreen){
        vid.mozRequestFullScreen();
    }
}
</script>
</head>
<body>

  <div id="audio_controls_bar">
      <audio id="my_video" width="550" height="60" autoplay>
        <source src="mod2_newkc2_nov12.mp3">
      </audio>
    <button id="playpausebtn"></button>
    <input id="seekslider" type="range" min="0" max="100" value="0" step="1" >
    <span style="padding-left:10px" class="curtimetext"> 00:00</span> / <span style="padding-right:10px"class="durtimetext">00:00</span>
    <button id="mutebtn"></button>
    <input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
  </div>

</body>
</html>

Any help would be greatly appreciated.

Thanks. -Shawn

Upvotes: 0

Views: 433

Answers (1)

epascarello
epascarello

Reputation: 207517

All of your background url references are missing the closing )

playbtn.style.background = "url(Pause_30.png";
mutebtn.style.background = "url(Sound_mute.png";

Should be 

playbtn.style.background = "url('Pause_30.png')";

Upvotes: 1

Related Questions