为什么按钮不出现在我的音频播放器中?

时间:2018-01-03 16:31:32

标签: javascript html css button

我正在尝试制作一个主要使用Javascript的音频播放列表,但播放按钮图像没有出现,我只是无法弄清楚原因。有谁能发现它?

我添加了image网站的外观。其他一切似乎都在工作,包括单击按钮所在位置时的播放功能,但图像不会出现。

HTML:

<div id="trackbox"></div>

CSS:

.playbutton
{ 
    display:block; 
    float:left; 
    width:19px; 
    height:22px;
    margin:14px 0px 0px 14px; 
    background:url(../Assets/Images/play_button.png) no-repeat; 
    color: #F9690E;
    border:none; 
    outline:none;
    cursor: pointer;
}

JavaScript的:

    window.onload = function() 
{
init();
}
function init()
{
    console.log('init fired');
}
function _(id){
    return document.getElementById(id);
}
function FeedTheMachineAlbum(){
    var audio = new Audio();
    var audio_folder = "Assets/Music/FeedTheMachine/";
    var audio_ext = ".m4a";
    var audio_index = 1;
    var is_playing = false;
    var playingtrack;
    var trackbox = _("trackbox");
    var tracks = {
        "track1":["Feed the Machine", "01FeedTheMachine"],
        "track2":["Coin for the Ferryman", "02CoinForTheFerryman"],
        "track3":["Song on Fire", "03SongOnFire"],
        "track4":["Must be Nice", "04MustBeNice"],
        "track5":["After the Rain", "05AfterTheRain"],
        "track6":["For the River", "06ForTheRiver"],
        "track7":["Home", "07Home"],
        "track8":["The Betrayal (Act III)", "08TheBetrayal(ActIII)"],
        "track9":["Silent Majority", "09SilentMajority"],
        "track10":["Every Time We're Together", "10EveryTimeWe'reTogether"],
        "track11":["The Betrayal(Act I)", "11TheBetrayal(ActI)"]
    };
    for(var track in tracks){
        var trackbar = document.createElement("div");
        var playbutton = document.createElement("button");
        var trackname = document.createElement("div");
        trackbar.className = "trackbar";
        playbutton.className = "playbutton";
        trackname.className = "trackname";
        trackname.innerHTML = audio_index+". "+tracks[track][0];
        playbutton.id = tracks[track][1];
        playbutton.addEventListener("click", switchTrack);
        trackbar.appendChild(playbutton);
        trackbar.appendChild(trackname);
        trackbox.appendChild(trackbar);
        audio_index++;
    }
    audio.addEventListener("ended",function(){
        _(playingtrack).style.background = "url(../Assets/Images/play_button.png)";
        playingtrack = "";
        is_playing = false;
    });
    function switchTrack(event){
        if(is_playing){
            if(playingtrack != event.target.id){
                is_playing = true;
                _(playingtrack).style.background = "url(../Assets/Images/play_button.png)";
                event.target.style.background = "url(../Assets/Images/pause_button.png)";
                audio.src = audio_folder+event.target.id+audio_ext;
                audio.play();
            } else {
                audio.pause();
                is_playing = false;
                event.target.style.background = "url(../Assets/Images/play_button.png)";
            }
        } else {
            is_playing = true;
            event.target.style.background = "url(../Assets/Images/pause_button.png)";
            if(playingtrack != event.target.id){
                audio.src = audio_folder+event.target.id+audio_ext;
            }
            audio.play();
        }
        playingtrack = event.target.id;
    }
}
window.addEventListener("load", FeedTheMachineAlbum);

0 个答案:

没有答案