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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
|
<!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.12.07 2.7.1
Added help for the new player. Make format switcher available.
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>
<div id="overlay"><span style="text-align:center;" id="overlaytext" class="TText">LOADING...</span></div>
<div id="helpoverlay" class="TText">
<pre class="TText" style="padding:2em;overflow:auto scroll;white-space:pre-wrap;">
The Simple Guide to The Stupid Online Player
Use the links in the sidebar to select a playlist. Click on the name of the tracks to play.
Playback controls at the bottom of the page should be self-explanatory. Use the visualization combo box to select a visualization to view.
The m3u8 Playlist link gives you a m3u8 playlist that can be streamed in VLC and other players supporting them.
Use the format link to switch the audio format to be played. Currently the following formats are served:
ogg vorbis 224 kbps | Very high quality, ideal choice if supported by your browser.
flac | Lossless, very large file size.
opus 96 kbps | Decent quality, small file size. Good for reducing data usage.
m4a aac 192 kbps | High quality, for legacy browsers without support of open formats.
If the format shows an exclamation mark after it, it could be unsupported by your browser.
To view the description of the currently selected album, click on the currently selected album in the sidebar. To view the description of the currently playing track, click on the link after "Now Playing: " in the bottom. Not all tracks have description texts.
Some tracks offer "multi-mixes". They are only provided in the ogg format. You need to enable experimental features in your browser for them to work. For chromium-based browsers, turn on "enable-experimental-web-platform-features". For firefox-based browsers, turn on "media.track.enabled" (however firefox doesn't seem to support multitrack ogg files yet). Once the support is correctly enabled, you'll see "Press C to switch tracks" over the seek bar for these tracks.
All tracks on this site are available for download. You can simply right click the links in the playlist and save the link. Alternatively you can go to the "Downloads" link in the sidebar, where you can find all tracks in all formats, a few unlisted tracks, and some MIDI exports. Unless otherwise stated, all finished tracks here can be used under a permissive CC-BY 4.0 license. Please contact the owner of the site if you want to use the MIDI exports.
</pre><a href="javascript:NSUI.hideHelp()" style="right:2em;bottom:1em;position:absolute;">close</a>
</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 href="javascript:NSUI.showHelp()">Help</a></li>
<li><a href="https://cgit.chrisoft.org/web.git/tree/libs/music">TSOP 2.7.1</a></li>
<li><a href="javascript:togglepanel()" id="paneltoggle"></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><-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="formatsw" href="#">[PCM wave 64 kbps]</a>
<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>
<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>
<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>
|
