Nie będę się rozpisywał nad funkcji użytymi w kodzie. Wszystko jest tutaj.
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.       <title>Eselter Player</title>
  5.       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.       <meta name="author" content="Eselter" />
  7.       <meta name="description" content="Player by Eselter" />
  8.       <link rel="stylesheet" href="style.css" type="text/css" />
  9.       <script type="text/javascript" src="skrypty.js"></script>
  10. </head>
  11. <body>
  12. <div class="div1">
  13. <audio id="player" src="katalog_z_plikami/pierwszy_utwór.ogg" controls="controls" preload="metadata" onended="next_song()" onplay="song_title()">
  14. <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>
  15. </audio>
  16. <script type="text/javascript">write_playlist()</script>
  17. <noscript>Twoja przeglądarka mnie wyłączoną obsługę JavaScript. Włącz ją.</noscript>
  18. </div>
  19. </body>
  20. </html>
[HTML] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
  1. var nr=0;
  2. var dir="files/";
  3. var playlist=new Array();
  4. playlist[0]="Sabaton - Attero Dominatus.ogg";
  5. playlist[1]="Sabaton - Nuclear Attack.ogg";
  6. playlist[2]="Sabaton - The art of war.ogg";
  7. playlist[3]="Sabaton - Uprising.ogg";
  8. playlist[4]="Red Hot Chili Peppers - Californication.ogg";
  9. playlist[5]="Red Hot Chili Peppers - Can't Stop.ogg";
  10. playlist[6]="Linkin Park - New Divide.ogg";
  11. //playlist[]="";
  12.  
  13. function write_playlist ()
  14. {
  15.   var player=document.getElementById("player");
  16.  
  17.   if (!!(player.canPlayType))
  18.   {
  19.     if (player.canPlayType("audio/ogg")=="maybe" || player.canPlayType("audio/ogg")=="probably")
  20.     {
  21.       document.writeln("<div id=\"playlist\" class=\"playlist\">");
  22.       for (i in playlist)
  23.       {
  24.    	  document.writeln("<p id=\"" + i + "\">" + (parseInt(i)+1) + ". <a onclick=\"choose_song(\'" + i + "\')\">" + playlist[i].slice(0,-4) + "</a></p>");
  25.       };
  26.      document.writeln("</div>");
  27.     }
  28.     else
  29.     {
  30.       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");
  31.       for (i in playlist)
  32.       {
  33.   	  document.writeln(i + ". " + playlist[i].slice(0,-4) + "<br />");
  34.       };
  35.       document.writeln("</div>");
  36.     };  
  37.   }
  38.   else
  39.   {
  40.     document.writeln("<div class=\"disable\">\n\rPlaylist'a jest niedostępna:<br />\n\r");
  41.     for (i in playlist)
  42.     {
  43. 	document.writeln(i + ". " + playlist[i].slice(0,-4) + "<br />");
  44.     };
  45.     document.writeln("</div>");
  46.   };
  47. }
  48.  
  49. function choose_song (choosen_song)
  50. {
  51.   var player=document.getElementById("player");
  52.   player.src=dir + playlist[choosen_song];
  53.   player.load();
  54.   player.play();
  55.   nr=choosen_song;
  56. }
  57.  
  58. function next_song ()
  59. {
  60.   var player=document.getElementById("player");
  61.   nr++;
  62.   if (nr>=playlist.length){nr=0;};
  63.   player.src=dir + playlist[nr];
  64.   player.load();
  65.   player.play();
  66. }
  67.  
  68. function song_title ()
  69. {
  70.   window.document.title=playlist[nr].slice(0,-4);
  71.   for (i in playlist) {document.getElementById(i).style.background="none";};
  72.   document.getElementById(nr).style.background="transparent url(http://eselter.365d.pl/bg2.png) repeat";
  73. }
[JAVASCRIPT] pobierz, plaintext 

[CSS] pobierz, plaintext 
  1. * {
  2. margin : 0;
  3. padding : 0;
  4. text-align : left;
  5. color : #f10909;
  6. font-family : monospace;
  7. font-size : 15px;
  8. border : none;
  9. background-color : transparent;
  10. }
  11. body {
  12. background : url(http://eselter.365d.pl/bg.jpg) left top no-repeat fixed #000;
  13. }
  14. #player {
  15. width : 100%;
  16. height : 100px;
  17. cursor : pointer;
  18. background : url(http://eselter.365d.pl/player/player.png) center top no-repeat transparent;
  19. }
  20. .div1 {
  21. width : 400px;
  22. margin : 5px auto 0 auto;
  23. padding : 30px;
  24. border : 1px solid #000;
  25. background : url(http://eselter.365d.pl/bg.png) repeat transparent;
  26. -moz-border-radius : 11px;
  27. border-radius : 11px;
  28. }
  29. .playlist {
  30. max-height : 145px;
  31. overflow : auto;
  32. }
  33. .disable {
  34. max-height : 100px;
  35. overflow : auto;
  36. width : 100%;
  37. background-color : #fff;
  38. color : #999;
  39. }
  40. .error {
  41. font-weight : bold;
  42. font-size : 16px;
  43. text-align : center;
  44. }
  45. a:link, a:visited {
  46. border : none;
  47. background : none;
  48. margin : 1px;
  49. }
  50. a:hover, a:active {
  51. text-decoration : none;
  52. background : url(http://eselter.365d.pl/bg2.png) repeat transparent;
  53. cursor : pointer;
  54. }
[CSS] pobierz, plaintext

A tutaj przykład jak to działa.