forked from nasso/urmusic
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
113 lines (98 loc) · 4.3 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>Urmusic</title>
<meta charset="utf-8">
<meta name="description" content="Urmusic is a fun browser app to create and share your own music visualizers, easily and for free, using the latest HTML5 features, such as canvas, Web Audio API, and MediaRecorder.">
<meta name="keywords" content="urmusic,HTML5,CSS3,JavaScript,Web Audio API,visualizer,Dubstep Gutter,Drop The Bassline,monstercat,modern app,music,free">
<meta name="author" content="Nasso">
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.min.css" />
<!-- <link rel="stylesheet" href="css/theplayer.min.css" /> -->
<script type="text/javascript" src="https://connect.soundcloud.com/sdk/sdk-3.1.2.js"></script>
<script type="text/javascript" src="js/theplayer.min.js"></script>
<script type="text/javascript" src="js/spin.min.js"></script>
<script type="text/javascript" src="js/index.min.js"></script>
<!-- The non-minified version of "index.min.js" is just "index.js". If you wanna hack, then use it instead :p -->
</head>
<body>
<div style="display: none;">
<a id="downloader"></a>
<input type="file" id="fileChooser" multiple />
<audio id="audioElement" loop></audio>
</div>
<canvas id="cvs"></canvas>
<div class="hidable">
<i id="bottomMenuOpener" class="fa fa-angle-up w3-xxxlarge"></i>
<div class="aPlayer" id="itsThePlayer" data-target="audioElement"></div>
<div id="bottomMenu">
<h1>Urmusic 1.4.3</h1>
<p>Urmusic is a fun browser app to create and share your own music visualizers, easily and for free, using the latest HTML5 features, such as canvas, Web Audio API, and MediaRecorder.</p>
<p>Press <span class="keyboardkey">F1</span> to toggle the interface.</p>
<div id="bottomMenuLeftPart">
<a class="button" href="https://github.com/Nasso/urmusic/wiki">urwiki</a>
<span id="videoRecord" class="button disabled">Record a video (no support)</span>
</div>
<div id="bottomMenuRightPart">
<script type='text/javascript' src='https://ko-fi.com/widgets/widget_2.js'></script><script type ='text/javascript'>kofiwidget2.init('Buy Me a Coffee', '#009cde', 'A206GOL');kofiwidget2.draw();</script>
</div>
</div>
</div>
<div id="musicApps" class="hidable">
<i class="fa fa-soundcloud w3-xlarge musicAppIcon" id="soundcloudApp"></i>
</div>
<nav id="settingsNav" class="hidable">
<header>
<div id="hambParent">
<div id="hamb" class="fa fa-bars w3-large"></div>
</div>
<h3>Settings</h3>
<span class="fa fa-angle-right w3-xlarge" id="presetMenuOpenCloseBtn"></span>
</header>
<div id="settingsPresetsMenu">
<div id="settingsPresetsMenuSizer">
<header>
<input type="text" placeholder="preset name" id="presetNameInput" />
<ul id="settingsPresetsOptions">
<li id="settingsPresetsOptOpen" class="fa fa-folder-open-o w3-xlarge"></li>
<li id="settingsPresetsOptSave" class="fa fa-floppy-o w3-xlarge"></li>
</ul>
</header>
<ul id="settingsPresetsList">
</ul>
</div>
</div>
<div id="settingsCtrlsContainer">
<div>
<ul id="globalSettings" class="settingsCtrlsList">
</ul>
<ul id="settingsSectionTabs">
<li id="addTab" class="fa fa-plus w3-medium"></li>
</ul>
<ul id="sectionSettings" class="settingsCtrlsList">
</ul>
<h4>Advanced settings</h4>
<ul id="advancedSettings" class="settingsCtrlsList">
</ul>
</div>
</div>
</nav>
<nav id="helpNav" class="hidable">
<h2>Drag a song here to get started</h2><br />
<p>You can also paste a link in the SoundCloud menu on the top right corner</p>
</nav>
<div class="warningMessage hidable" id="firefoxIsBetter">
<header>
<i class="fa fa-exclamation-triangle w3-large warnIcon"></i>
<h5>Warning</h5>
<i class="fa fa-times w3-large close"></i>
</header>
<p>
This app works better with <a href="https://www.mozilla.org/firefox">Firefox</a>.
I recommend using it because some features aren't available on other browsers.<br /><br />
Example: You won't be able to drag and drop a song on some browsers. Streaming from SoundCloud should still be possible though.
</p>
</div>
</body>
</html>