Please or Zarejestruj to create posts and topics.

Odtwarzacz web / radio

<!DOCTYPE HTML>
<html>
<head>
      <title>Eselter Player</title>
      <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" />
      <script type="text/javascript" src="skrypty.js"></script>
</head>
<body>
<div class="div1">
<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>
<script type="text/javascript">write_playlist()</script>
<noscript>Twoja przeglądarka mnie wyłączoną obsługę JavaScript. Włącz ją.</noscript>
</div>
</body>
</html>


index.php

 

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>nr<div class="disable">nrPlaylist'a i odtwarzacz są niedostępne:<br />nr");
      for (i in playlist)
      {
  	  document.writeln(i + ". " + playlist[i].slice(0,-4) + "<br />");
      };
      document.writeln("</div>");
    };  
  }
  else
  {
    document.writeln("<div class="disable">nrPlaylist'a jest niedostępna:<br />nr");
    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";
}

skrypt.js

 

* {
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;
}

 

css.css

Użyj całego kodu by mieć odtwarzacz plików pozdrawiam Sylwester Mandziuk.