我正在创建我的第一个自定义音频播放器-我是WebDesign的新手-当页面加载时我会显示“播放”按钮当我单击它消失的playbtn时，该曲目会播放，我可以通过在同一位置单击来停止播放playbtn之前的位置，并且曲目停止但仍然没有图片，因此我的音频根本没有加载Javascript代码的backgroungImage！即使其余代码都能正常工作！
的JavaScript
// vars
var my_track, playbtn, mutebtn, currentTime, duration, barSize, bar, progressBar ;
// Set object references
my_track = document.getElementById('my_track');
playbtn = document.getElementById('playbtn');
mutebtn = document.getElementById('mutebtn');
currentTime = document.getElementById('currentTime');
duration = document.getElementById('fullDuration');
barSize = 300 ;
bar = document.getElementById('defaultBar')
progressBar = document.getElementById('progressBar')
//innerHTML
// Add Event Handling
playbtn.addEventListener('click',playOrPause, false) ;
mutebtn.addEventListener('click',muteOrUnmute, false) ;
bar.addEventListener("click", clickedBar,false) ;
// event handling with function
my_track.addEventListener("timeupdate", function update() {
var curmins = Math.floor(my_track.currentTime / 60);
var cursecs = Math.floor(my_track.currentTime - curmins * 60);
var durmins = Math.floor(my_track.duration / 60);
var dursecs = Math.floor(my_track.duration - durmins * 60);
if(cursecs < 10){ cursecs = "0"+cursecs; }
currentTime.innerHTML = curmins+":"+cursecs;
}, false);
my_track.addEventListener("timeupdate", function progress(){
if (!my_track.ended){
var size = parseInt(my_track.currentTime*barSize/my_track.duration);
progressBar.style.width = size + "px";
}
else{
currentTime.innerHTML = "0:00"
playbtn.style.backgroundImage = 'url("../icon/audio_play.png")';
playbtn.style.backgroundRepeat = 'no-repeat';
playbtn.style.backgroundPosition = 'center';
playbtn.style.backgroundSize = '25px 25px';
progressBar.style.width = "0px" ;
window.clearInterval(updateTime);
}
}, false);
// Functions
function playOrPause(){
if(!my_track.paused && !my_track.ended) {
my_track.pause();
playbtn.style.backgroundImage = 'url("../icon/audio_play.png")';
playbtn.style.backgroundRepeat = 'no-repeat';
playbtn.style.backgroundPosition = 'center';
playbtn.style.backgroundSize = '35px 35px';
window.clearInterval(updateTime);
}
else {
my_track.play();
playbtn.style.backgroundImage = 'url("../icon/audio_stop.png")';
playbtn.style.backgroundRepeat = 'no-repeat';
playbtn.style.backgroundPosition = 'center';
playbtn.style.backgroundSize = '35px 35px';
}
}
function muteOrUnmute(){
if (my_track.muted == true ){
my_track.muted = false ;
mutebtn.style.backgroundImage = 'url("../icon/audio_speaker.png")';
mutebtn.style.backgroundRepeat = 'no-repeat';
mutebtn.style.backgroundPosition = 'center';
mutebtn.style.backgroundSize = '25px 25px';
}
else {
my_track.muted = true ;
mutebtn.style.backgroundImage = 'url("../icon/audio_mute.png")';
mutebtn.style.backgroundRepeat = 'no-repeat';
mutebtn.style.backgroundPosition = 'center';
mutebtn.style.backgroundSize = '25px 25px';
}
}
function clickedBar(e){
if (!my_track.ended){
var mouseX = e.pageX - bar.offsetLeft ;
var newtime = mouseX*my_track.duration/barSize;
my_track.currentTime = newtime ;
progressBar.style.width = mouseX + 'px';
}
}
的CSS
*{
margin: 0 ;
padding: 0 ;
}
html, body {
margin: 0 ;
padding: 0 ;
}
/*-------AUDIO STARTS HERE-----------*/
#audioplayer {
float: right ;
border: 2px solid #fff;
background-color: #515254;
width: 200px ;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-top: -20px ;
margin-right: 8px ;
}
#audioplayer nav {
border-radius: 4px;
}
#defaultBar {
position: absolute ;
width: 196px ;
height: 8px ;
background-color: black ;
top: 0 ;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}
#progressBar {
position: absolute ;
height: 8px ;
width: 0px ;
background-color: green ;
}
#beforebtn {
border: none ;
outline: none ;
height: 25px ;
width: 25px ;
background-image: url("../icon/before_track.png");
background-repeat: no-repeat ;
background-position: center ;
background-size: cover ;
margin-top: 6px ;
margin-left: 3px ;
float: left ;
cursor: pointer ;
}
#playbtn {
border: none ;
outline: none ;
height: 35px ;
width: 35px ;
background-image: url("../icon/audio_play.png");
background-repeat: no-repeat ;
background-position: center ;
background-size: cover ;
margin-left: 5px ;
margin-right: 5px ;
margin-top: 1px ;
float: left ;
cursor: pointer ;
}
#playtbn:target {
background-image: url("../icon/audio_stop.png");
background-repeat: no-repeat ;
background-position: center ;
background-size: cover ;
}
#nextbtn {
border: none ;
outline: none ;
height: 25px ;
width: 25px ;
background-image: url("../icon/next_track.png");
background-repeat: no-repeat ;
background-position: center ;
background-size: cover ;
float: left ;
margin-top: 6px ;
cursor: pointer ;
}
#mutebtn {
float: right ;
border: none ;
outline: none ;
height: 25px ;
width: 25px ;
background-image: url("../icon/audio_speaker.png");
background-repeat: no-repeat ;
background-position: center ;
background-size: cover ;
margin-top: 6px ;
margin-right: 3px ;
cursor: pointer ;
}
#audioplayer button {
background-color: #515254;
border-radius: 50% ;
}
#mutebtn:active, #playbtn:active , #beforebtn:active, #nextbtn:active {
position: relative ;
top: 2px ;
}
#timebox{
float: right ;
margin-top: 11px ;
margin-right: 5px ;
height: 16px ;
width: 38px ;
background-color: #515254 ;
color: #fff ;
border: 1px solid #000;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#currentTime {
float: right ;
font-family: arial ;
font-size: 14px ;
}
的HTML
<div ID="audioplayer">
<audio ID="my_track">
<source src="audio/take_me_baby.wav" type="audio/wav"/>
</audio>
<nav>
<div ID="defaultBar">
<div ID="progressBar"></div>
</div>
<div ID="buttons">
<button ID="beforebtn"></button>
<button ID="playbtn" class="playbtn"></button>
<button ID="nextbtn"></button>
<button ID="mutebtn"></button>
<div ID="timebox">
<span ID="currentTime">0:00</span><span ID="fullDuration"></span>
</div>
</div>
</nav>
</div>
<!-- @end audio tag -->
希望这对你们来说很清楚:)感谢所有我能得到的帮助！
您可能需要将代码包装在中window.onload：
window.onload = function（）{// ...您的javascript};
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句