我有点像java和html5的新手。我正在开发一款在Chrome中运行良好的html5音频播放器。除了切换javascript之外，它也适用于IE11。在IE中单击时，播放或静音按钮艺术都不会换出。我看过这个网站和其他地方的样本，但一直无法弄清楚。这是我的所有代码：
<!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>
非常感谢任何帮助。
感谢。 -Shawn
答案 0 :(得分：1)
所有后台网址引用都缺少结束)
playbtn.style.background = "url(Pause_30.png";
mutebtn.style.background = "url(Sound_mute.png";
应该是
playbtn.style.background = "url('Pause_30.png')";