浮动按钮不会在点击时更改背景图像

时间：2014-11-26 14:29:30

标签： javascript html css

我正在创建我的第一个自定义音频播放器 - 我对WebDesign很陌生 - 当页面加载时，我显示了我的播放按钮 当我点击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 -->

希望这对你们来说很明显:) 感谢我能得到的所有帮助！

2 个答案:

答案 0 :(得分：0)

  1. 确保您的图标位于正确的文件夹中。

  2. 您可能需要将代码包装在window.onload：

    中

    window.onload = function（）{   // ...你的javascript };

    3. http://plnkr.co/edit/kpU3oXNwhei5B6O9YKEO?p=preview

答案 1 :(得分：0)

自己找到了答案:) 将我的背景图像从CSS更改为我的html上的普通标记

<button ID="playbtn" onclick='this.firstChild.src="icon/audio_stop.png"'>
<img src="icon/audio_play.png"/>
</button>

以及对javascript的一些更改：

function playOrPause(){
console.log(5);
if(!my_track.paused && !my_track.ended) { 
my_track.pause();
playbtn.firstChild.src = "icon/audio_play.png";
window.clearInterval(updateTime);
}
else {
my_track.play();
playbtn.firstChild.src = "icon/audio_stop.png";
}
}

更短，甚至可以工作:) 顺便说一下：＆＃34; window.onload = function（）{// ...你的javascript};＆＃34; 过去常常帮助:)所以再次感谢Clint Powell !!

相关问题
最新问题