blob: ba4469dac0749487426cb5fa06f94c2b00d075d4 (
plain) (
tree)
|
|
<!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">
var athm;
function loadTheme(){
var thm=document.cookie.replace(new RegExp("(?:(?:^|.*;\\s*)thm\\s*\\=\\s*([^;]*).*$)|^.*$"),"$1");
if(thm.length<2||'0123z'.indexOf(thm[0])==-1||'abz'.indexOf(thm[1])==-1)thm='zz';
var ent="";
var d=new Date();
if(thm[0]=='z')
{
var m=d.getMonth()+1;
if(m>=3&&m<6)thm='0'+thm[1];
else if(m>=6&&m<9)thm='1'+thm[1];
else if(m>=9&&m<12)thm='2'+thm[1];
else thm='3'+thm[1];
}
if(thm[1]=='z')
{if(d.getHours()>=18||d.getHours()<6)thm=thm[0]+'b';else thm=thm[0]+'a';}
athm=thm[1]=='a'?0:1;
ent=`theme${thm}`;
var R=new RegExp('theme[0-4][ab]');
for(var i=0;i<document.styleSheets.length;++i)
{
if(R.exec(document.styleSheets[i].ownerNode.id)!==null&&document.styleSheets[i].ownerNode.id!=ent)
document.styleSheets[i].disabled=true;
else document.styleSheets[i].disabled=false;
}
var thmcolor="";
switch(thm[0])
{
case '0':thmcolor=thm[1]=='a'?'#f59dda':'#2f0933';break;
case '1':thmcolor=thm[1]=='a'?'#9df59d':'#090933';break;
case '2':thmcolor=thm[1]=='a'?'#edb47b':'#1f1205';break;
case '3':thmcolor=thm[1]=='a'?'#a0cdfa':'#051933';break;
}
document.querySelector("meta[name=theme-color]").setAttribute('content',thmcolor);
}
loadTheme();
</script>
</head>
<!--
The Stupid Online Player
License: Expat (MIT)
Changelog:
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="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.6.1</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="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>
|
