libs/music/player


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 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">
	<meta name="theme-color" content="#000000">
	<title>The Stupid Online Player</title>
	<link rel=stylesheet href="/common.css" type="text/css">
	<link rel=stylesheet href="/panel.css" type="text/css">
	<link rel="stylesheet" type="text/css" href="/theme0a.css" id="theme0a">
	<link rel="stylesheet" type="text/css" href="/theme0b.css" id="theme0b">
	<link rel="stylesheet" type="text/css" href="/theme1a.css" id="theme1a">
	<link rel="stylesheet" type="text/css" href="/theme1b.css" id="theme1b">
	<link rel="stylesheet" type="text/css" href="/theme2a.css" id="theme2a">
	<link rel="stylesheet" type="text/css" href="/theme2b.css" id="theme2b">
	<link rel="stylesheet" type="text/css" href="/theme3a.css" id="theme3a">
	<link rel="stylesheet" type="text/css" href="/theme3b.css" id="theme3b">
	<link rel=stylesheet href="/libs/music/player.d/styles.css" type="text/css">
	<script type="text/javascript" src="/libs/music/player.d/main_static.js"></script>
	<script type="text/javascript" src="/panel.js"></script>
	<script type="text/javascript" src="/themer.js"></script>
</head>
<!--
The Stupid Online Player
License: Expat (MIT)
Changelog:
2021.04.05 2.7.0
Clicking the track name after "Now Playing" shows the note for it.
2020.08.04 2.6.1+b1
Follow system theme if user has a preference.
2020.05.21 2.6.1
Added bouncy spectrum visualization from ShadowPlayer.
2019.12.20 2.6.0
Added multitrack audio support.
2018.11.29 2.5.4
Tidied the code up a bit.
2018.11.29 2.5.3+b2
Fixed seeking.
2018.04.27 2.5.3+b1
The autoplay ban sucks.
2018.03.12 2.5.3
Put buttons in a single file.
2018.01.06 2.5.2
Load playlists concurrently so that they load faster.
2018.01.04 2.5.1+b1
Various bug fixes:
 - fixed alignment of playlist and the LOADING overlay
 - add timestamps to fetch urls
 - fixed display issues in firefox
2017.11.01 2.5.1
Now uses Media Session API to provide extra
stupid functionality.
2017.11.01 2.5.0
Use the new panel layout.
Code cleanup. Now we use ES2017 features.
(Which means we support even fewer browsers)
2017.10.26 2.5.0-pre
Yet another major overhaul.
Massive code refactoring.
2017.02.25 2.3.2
Apply theme here.
2017.01.29 2.3.1
Code cleanup.
2017.01.28 2.3.0
Get rid of jQuery.
2017.01.26 2.2.1
Minor UI changes and bug fixes.
2017.01.05 2.2.0
Drop old php code.
2016.11.03 2.1.2
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 2.1.1
UI bug fixes.
2016.07.07 2.1.0
Behavior changes. Custom audio controls.
2016.07.03 2.0.1
Ink fountain performance boost. Minor UI changes. Bug fixes.
2016.07.02 2.0.0
The online player received a major overhaul.
Merged the experimental version.
The playlist can now be hidden.
2016.02.13 1.5.0 & 1.0.2-exp
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 1.0.1-exp
New experimental online player with visualization.
2015.11.7 1.0.0
The online player was added.
-->
<body onload="init();">
	<div id="overlay"><span style="text-align:center;" id="overlaytext" class="TText">LOADING...</span></div>
	<div id="notes" class="TText" style="display:none;"><div class="TText" id="ntext"></div>
	<a href="javascript:NSUI.hideNotes()" style="right:1em;bottom:.5em;position:absolute;">close</a></div>
	<div id="panel" class="TText">
		<ul id="panellist">
			<li><a href="/"><h1>Chrisoft</h1></a></li>
			<li><a href="/libs/music/player"><h2>Music Library</h2></a></li>
			<li><ul id="plists"></ul></li>
			<li><a href="//filestorage.chrisoft.org/music/" target="_blank">Downloads</a></li>
			<li><a>TSOP 2.7.0</a></li>
		</ul>
	</div>
	<div id="content">
		<div id="cvsdiv">
			<canvas width="800" height="450" id="cvs"></canvas>
		</div>
		<ul id="playlist" class="TText widgetbg"><li>&lt;-select a playlist</li></ul>	
	</div>
	<div id="ctrlcontainer" class="footer TText widgetbg">
		<div class="switches" style="text-align:right;padding-top:0.25em 0 0.25em 0;">
		<div style="text-align:center;width:100%;" id="nowplaying"></div>
		<span id="mt" style="display:none;">Press C to switch tracks</span>
		<a id="am3u8" href="#">[m3u8 Playlist]</a>
		<a id="plistsw" href="javascript:void(0);">[Hide Playlist]</a>
		</div>
		<div class="centered-audio">
		<audio id="audio" preload="auto" tabindex="0" type="audio/ogg" autoplay="autoplay" style="display:none;" crossorigin="anonymous"></audio>
		<div style="position:relative;height:1em;margin:0.25em;">
			<div id="tsliderbase" class="widgetbg" style="position:absolute;width:100%;height:100%;;"></div>
			<div id="cbuff" class="sliderb1" style="position:absolute;width:0%;height:100%;pointer-events:none;"></div>
			<div id="ctime" class="sliderb2" style="position:absolute;width:0%;height:100%;pointer-events:none;"></div>
		</div>
		<span id="timenow" style="position:absolute;left:1em;">0:00</span>
		<div class="fakebtn" id="shufflesw"><img width="24" alt="shuffleswitch" id="imgshuffle" src="/null.svg" style="background-image:url('/libs/music/player.d/buttons.svg');background-position:-24px 0;"></div>&nbsp;
		<div class="fakebtn" id="pbprev"><img src="/null.svg" alt="prev" width="24" style="background-image:url('/libs/music/player.d/buttons.svg');background-position:0 -24px;"></div>
		<div class="fakebtn" id="pbplaypause"><img src="/null.svg" alt="playpause" width="24" id="imgplaypause" style="background-image:url('/libs/music/player.d/buttons.svg');background-position:0 -48px;"></div>
		<div class="fakebtn" id="pbnext"><img src="/null.svg" alt="next" width="24" style="background-image:url('/libs/music/player.d/buttons.svg');background-position:-48px -48px;"></div>&nbsp;
		<div class="fakebtn" id="repeatsw"><img width="24" alt="repeatswitch" id="imgrepeat" src="/null.svg" style="background-image:url('/libs/music/player.d/buttons.svg');background-position:-24px -24px;"></div>
		<span id="timeleft" style="position:absolute;right:1em;">0:00</span>
		</div>
		<div class="switches">
			Visualization:
			<select id="visualizationsel" onfocus="this.oldvalue=this.value;" style="background-color:#CCC;border:1px #999 solid;padding:0.2em 0.2em;" class="TText">
				<option value="none">None</option>
				<option value="spectrum">Spectrum</option>
				<option value="spspectrum">Spectrum (ShadowPlayer)</option>
				<option value="scope">Scope</option>
				<option value="spectrogram">Spectrogram</option>
				<option value="inkfountain">Ink Fountain</option>
			</select>
		</div>
	</div>
</body>
</html>