<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="expires" content="Friday 24 October 1997 09:30 GMT">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Stupid Online Player</title>
<link rel=stylesheet href='/common.css' type='text/css'>
<link rel=stylesheet href='styles.css' type='text/css'>
<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript">
function changeImage(img){
document.getElementById('aqt').src=img;
}
</script>
</head>
<body onload="init();">
<div class="TText" style="font-size:2em"><a href="/">Chrisoft</a>::<a href="/libs/music/player">Music Library</a></div>
<p class="TText" id="plname"></p>
<div style="padding:7px;border:1px solid #aaa;display:table;">
<div style="text-align:center;">
<b>Help & About</b> [<a href="#" onclick="var e=document.getElementById("help");if(e.style.display=="block"){e.style.display="none";this.innerHTML="show";}else {e.style.display="block";this.innerHTML="hide";}">show</a>]
</div>
<div id="help" style="display:none;">
Click something to play.<br>
Tested on Chrome, Firefox and Microsoft Edge. Doesn't work at all on Internet Explorer.<br>
WARNING!!: Microsoft Edge and Safari plays huge wav streams!<br>
As of 2016-07-03, visualization doesn't work on Chrome for Android unless "unified media pipeline" is enabled in chrome://flags.<br>
Written in html, javascript, css and php. Uses html5 features, jQuery and some css3 transitions.<br>
This page uses cookies to save your preferences.<br>
History:
<pre style="white-space: pre-wrap;">
2016.11.03
Canvas is no longer blurred on HiDPI screens. UI changes.
Makes mobile version less painful to view. Code cleanup.
Save preferences in cookies.
2016.07.23
UI bug fixes.
2016.07.07
Behavior changes. Custom audio controls.
2016.07.03
Ink fountain performance boost. Minor UI changes. Bug fixes.
2016.07.02
The online player received a major overhaul.
Merged the experimental version.
The playlist can now be hidden.
2016.02.13
Two new visualization modes for the experimental online player.
New playlist mechanism for the online player, not added to the experimental version.
2016.02.06
New experimental online player with visualization.
2015.11.7
The online player was added.
</pre>
</div>
</div>
<div id="cvsdiv">
<canvas width="800" height="450" id="cvs"></canvas>
</div>
<div id="ctrlcontainer">
<div class="switches" style="text-align:right;padding-top:0.25em 0 0.25em 0;">
<span style="text-align:center;color:#000;width:100%;display:inline-block;position:absolute;left:50%;top:0.1em;transform:translateX(-50%);z-index:-1" id="nowplaying"></span>
<sw id="plistsw">[↓Hide Playlist]</sw>
</div>
<div class="centered-audio">
<audio id="audio" preload="auto" tabindex="0" type="audio/ogg" autoplay="autoplay" style="display:none;">
Sorry, but your browser does not support HTML5 audio.<br>
请使用支持HTML5音频的浏览器访问本页面.
</audio>
<div style="position:relative;height:1em;margin:0.25em;">
<div id="tsliderbase" style="position:absolute;width:100%;height:100%;background-color:rgba(204,204,204,0.6);"></div>
<div id="cbuff" style="position:absolute;width:0%;height:100%;background-color:rgba(64,192,255,0.6);pointer-events:none;"></div>
<div id="ctime" style="position:absolute;width:0%;height:100%;background-color:#1194FF;pointer-events:none;"></div>
</div>
<span id="timenow" style="position:absolute;left:1em;">0:00</span>
<div class="buttondiv" id="pbprev"><img src="prev.svg" alt="prev" width="24"></div>
<div class="buttondiv" id="pbplaypause"><img src="play.svg" alt="playpause" width="24" id="imgplaypause"></div>
<div class="buttondiv" id="pbnext"><img src="next.svg" alt="next" width="24"></div>
<span id="timeleft" style="position:absolute;right:1em;">0:00</span>
</div>
<div class="switches">
Shuffle: <sw id="shufflesw">Off</sw>
Repeat current: <sw id="repeatsw">Off</sw>
<br>
Visualization:
<select id="visualizationsel" onfocus="this.oldvalue=this.value;">
<option value="none">None</option>
<option value="spectrum">Spectrum</option>
<option value="spectrumring">Spectrum Ring</option>
<option value="scope">Scope</option>
<option value="spectrogram">Spectrogram</option>
<option value="inkfountain">Ink Fountain</option>
<option value="shakeurbody">Shake your body(defunct)</option>
</select>
</div>
</div>
<div id="plistref"></div>
<ul id="playlist">
<?php
function useWav($user_agent)
{
if(strpos($user_agent,'Edge'))return true;
elseif(strpos($user_agent,'Chrome'))return false;
elseif(strpos($user_agent,'Safari'))return true;
elseif(strpos($user_agent,'MSIE')||strpos($user_agent,'Trident/7'))return true;
return false;
}
if(!isset($_GET["plistid"]))$_GET["plistid"]="0";
if(intval($_GET["plistid"])<0||intval($_GET["plistid"])>=100)$_GET["plistid"]="0";
$plist=sprintf("/var/www/html/libs/music/player.d/playlists/%s",$_GET["plistid"]);
$file=fopen($plist,"r");
$l=fgets($file);$l=substr($l,0,strlen($l)-1);
echo "<script type=\"text/javascript\">","document.getElementById('plname').innerHTML=\"Playlist: ",$l," \";";
echo "var a=document.createElement('a');a.href=\"plisteditor.php?plistid=",$_GET["plistid"],"\";a.innerHTML=\"Edit playlist\";document.getElementById('plname').appendChild(a);</script>";
for($i=0;$item=fgets($file);$i++)
{
while(ord($item[strlen($item)-1])==10||ord($item[strlen($item)-1])==13)
$item=substr($item,0,strlen($item)-1);
if(useWav($_SERVER['HTTP_USER_AGENT']))
{
$tfilen=sprintf("/var/www/html/libs/music/wav/%s.wav",$item);
if(!file_exists($tfilen))
$cur=sprintf("<li><a href=\"../wav/%s.wav\" tr=\"%s\" ord=\"%d\" style=\"color:#f00;\">%s</a></li>",$item,$item,$i,$item);
else
$cur=sprintf("<li><a href=\"../wav/%s.wav\" tr=\"%s\" ord=\"%d\">%s</a></li>",$item,$item,$i,$item);
echo $cur;
}
else
{
$tfilen=sprintf("/var/www/html/libs/music/ogg/%s.ogg",$item);
if(!file_exists($tfilen))
$cur=sprintf("<li><a href=\"../ogg/%s.ogg\" tr=\"%s\" ord=\"%d\" style=\"color:#f00;\">%s</a></li>",$item,$item,$i,$item);
else
$cur=sprintf("<li><a href=\"../ogg/%s.ogg\" tr=\"%s\" ord=\"%d\">%s</a></li>",$item,$item,$i,$item);
echo $cur;
}
}
?>
</ul>
<div style="height:160px;"></div>
<!--<div class="floatingl">
<img src="../../../koishi_norm.png" alt="" width="320" id="aqt" style="transition:0.4s;">
</div>-->
</body>
</html>
