1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
<!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>
|
