Всем привет. Объясните пожалуйста почем не работает:
JavaScript:
$(document).ready(function () {
$("audio").hide();
$("li a").eq(0).bind("click", function () {
$("audio").hide();
$("audio:eq(0)").show();
});
$("li a").eq(1).bind("click", function () {
$("audio").css("display", "none");
$("audio:eq(1)").css("display", "block");
});
$("#audio-player").mediaelementplayer({
alwaysShowControls: true,
features: ["playpause", "volume", "progress"],
audioVolume: "horizontal",
audioWidth: 400;
audioHeight: 120
});
});
HTML:
<body>
<div id = "songs">
<ul>
<li>
<a href = "#"
id = "song"> Now you see me </a>
</li>
<li>
<a href = "#"
id = "song1"> Flute </a>
</li>
</div>
<div class = "audio-player">
<audio class = "first_song" id = "audio-player" src = "Brian_Tyler_-_01._Now_You_See_Me_OST-HD_Illyuziya_obmana_Now_You_See_Me_2013_(get-tune.net).mp3" type = "audio/mp3
" controls = "
controls "></audio>
<audio class = "
second_song " id = "
audio - player " src = "
New_World_Sound_Thomas_Newson_ - _Flute_Original_Mix_(iPlayer.fm).mp3 " type = "
audio / mp3 " controls = "
controls "></audio>
</div>
Css:
div.audio-player {
width: 100%;
position: absolute;
bottom: 0px;
left: 0px;
text-align: center;
}
audio {
width: 40%;
border-radius: 7;
-moz-border-radius: 7;
-khtml-border-radius: 7;
-webkit-border-radius: 7;
-o-border-radius: 7;
background-color: Red;
}
li {
list-style: none;
display: inline-block;
}
#songs {
position: absolute;
height: 50%;
top: 5%;
left: 45%;
}
#song {
width: 15%;
height: 10%;
text-decoration: none;
background-color: Yellow;
color: Black;
display: inline;
}
#song1 {
width: 15%;
height: 10%;
text-decoration: none;
background-color: Yellow;
color: Black;
display: inline;
}
Заранее спасибо.