我正在尝试制作一个主要使用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);