Nie będę się rozpisywał nad funkcji użytymi w kodzie. Wszystko jest
tutaj.
<!DOCTYPE HTML>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="author" content="Eselter" /> <meta name="description" content="Player by Eselter" /> <link rel="stylesheet" href="style.css" type="text/css" /> <audio id="player" src="katalog_z_plikami/pierwszy_utwór.ogg" controls="controls" preload="metadata" onended="next_song()" onplay="song_title()">
<div class="error">Twoja przeglądarka nie obsługuje HTML5. Ściągnij
<br /><a href="http://www.mozilla.com/pl/firefox/beta/" target="_blank"><img src="http://mozcom-cdn.mozilla.net/img/firefox/beta/4/title.png" /></a></div> </audio>
<noscript>Twoja przeglądarka mnie wyłączoną obsługę JavaScript. Włącz ją.
</noscript>
var nr=0;
var dir="files/";
var playlist=new Array();
playlist[0]="Sabaton - Attero Dominatus.ogg";
playlist[1]="Sabaton - Nuclear Attack.ogg";
playlist[2]="Sabaton - The art of war.ogg";
playlist[3]="Sabaton - Uprising.ogg";
playlist[4]="Red Hot Chili Peppers - Californication.ogg";
playlist[5]="Red Hot Chili Peppers - Can't Stop.ogg";
playlist[6]="Linkin Park - New Divide.ogg";
//playlist[]="";
function write_playlist ()
{
var player=document.getElementById("player");
if (!!(player.canPlayType))
{
if (player.canPlayType("audio/ogg")=="maybe" || player.canPlayType("audio/ogg")=="probably")
{
document.writeln("<div id=\"playlist\" class=\"playlist\">");
for (i in playlist)
{
document.writeln("<p id=\"" + i + "\">" + (parseInt(i)+1) + ". <a onclick=\"choose_song(\'" + i + "\')\">" + playlist[i].slice(0,-4) + "</a></p>");
};
document.writeln("</div>");
}
else
{
document.writeln("<div class=\"error\">Twoja przeglądarka nie obsługuje plików OGG. Ściągnij<br /><a href=\"http://www.mozilla.com/pl/firefox/beta/\" target=\"_blank\"><img src=\"http://mozcom-cdn.mozilla.net/img/firefox/beta/4/title.png\" /></a></div>\n\r<div class=\"disable\">\n\rPlaylist'a i odtwarzacz są niedostępne:<br />\n\r");
for (i in playlist)
{
document.writeln(i + ". " + playlist[i].slice(0,-4) + "<br />");
};
document.writeln("</div>");
};
}
else
{
document.writeln("<div class=\"disable\">\n\rPlaylist'a jest niedostępna:<br />\n\r");
for (i in playlist)
{
document.writeln(i + ". " + playlist[i].slice(0,-4) + "<br />");
};
document.writeln("</div>");
};
}
function choose_song (choosen_song)
{
var player=document.getElementById("player");
player.src=dir + playlist[choosen_song];
player.load();
player.play();
nr=choosen_song;
}
function next_song ()
{
var player=document.getElementById("player");
nr++;
if (nr>=playlist.length){nr=0;};
player.src=dir + playlist[nr];
player.load();
player.play();
}
function song_title ()
{
window.document.title=playlist[nr].slice(0,-4);
for (i in playlist) {document.getElementById(i).style.background="none";};
document.getElementById(nr).style.background="transparent url(http://eselter.365d.pl/bg2.png) repeat";
}
* {
margin : 0;
padding : 0;
text-align : left;
color : #f10909;
font-family : monospace;
font-size : 15px;
border : none;
background-color : transparent;
}
body {
background : url(http://eselter.365d.pl/bg.jpg) left top no-repeat fixed #000;
}
#player {
width : 100%;
height : 100px;
cursor : pointer;
background : url(http://eselter.365d.pl/player/player.png) center top no-repeat transparent;
}
.div1 {
width : 400px;
margin : 5px auto 0 auto;
padding : 30px;
border : 1px solid #000;
background : url(http://eselter.365d.pl/bg.png) repeat transparent;
-moz-border-radius : 11px;
border-radius : 11px;
}
.playlist {
max-height : 145px;
overflow : auto;
}
.disable {
max-height : 100px;
overflow : auto;
width : 100%;
background-color : #fff;
color : #999;
}
.error {
font-weight : bold;
font-size : 16px;
text-align : center;
}
a:link, a:visited {
border : none;
background : none;
margin : 1px;
}
a:hover, a:active {
text-decoration : none;
background : url(http://eselter.365d.pl/bg2.png) repeat transparent;
cursor : pointer;
}
A
tutaj przykład jak to działa.
Ten post edytował Eselter 11.09.2010, 15:13:06
[HTML5] odtwarzacz <audio>, Temat pokazuje możliwości jakie niesie za sobą HTML5
