-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
128 lines (122 loc) · 5.84 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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Freesound Timeline</title>
<script type="text/javascript" src="freesound.js"></script>
<script src="audioengine.js"></script>
<script src="recorder.js"></script>
<script src="all.js"></script>
<link href="slider.css" rel="stylesheet">
<link href="all.css" rel="stylesheet">
<!-- fav icon -->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<div id="clipboardPlaceholder">
<input id="clipboardURL"/>
</div>
<div id="movingbg"></div>
<div id="movingbg2"></div>
<div id="wrapper">
<div id="title"><a href="/freesound-timeline/">Freesound Timeline</a><img src="fs_wave_logo.png"></div>
<div id="share">
<span id="volume_control">
<img class="speaker-img" src="speaker.png" /><input id="volume" type="range" min=0.0 max=1.0 step='.05' value=1.0 oninput="setVolume()" onchange="setVolume()">
</span>
<a href="javascript:void(0);" onclick="share();">Share</a>
</div>
<br style="clear: both;">
<div id="content">
<div id="transport">
<table style="width: 100%;"><tr>
<td id="buttonsLeft">
<button id="previous_button" onclick="previous_button()"><img class="button-img" src="prev_button.png" /></button>
<button id="play_button" onclick="play_button()"><img class="button-img" src="play_button.png" /></button>
<button id="stop_button" onclick="panic_button()"><img class="button-img" src="stop_button.png" /></button>
<button id="record_button" onclick="record_button()"><img class="button-img" src="record_button.png" /></button>
</td>
<td>
<div id="evolution_percentage_indicator">
<div id="evolution_percentage_indicator_loader"></div>
</div>
</td>
<td id="buttonsRight">
<button id="next_button" onclick="next_button()"><img class="button-img" src="next_button.png" /></button>
</td>
</tr></table>
</div>
<div class="controls">
<div class="control">
<div class="labelDiv">
<label for="year">Year</label>
</div>
<div class="inputDiv">
<input class="input_focus_enter" type="text" name="year" id="year" min="2005" max="9999" step="1" maxlength="4" onkeypress='return event.charCode >= 48 && event.charCode <= 57' onchange="yearChange()">
</div>
</div>
<div class="control">
<div class="labelDiv">
<label for="month">Month</label>
</div>
<div class="inputDiv">
<input class="input_focus_enter" type="text" name="month" id="month" min="1" max="12" step="1" maxlength="2" onkeypress='return event.charCode >= 48 && event.charCode <= 57' onchange="monthChange()">
</div>
</div>
<div class="control">
<div class="labelDiv">
<label for="complexity">Density</label>
</div>
<div class="inputDiv">
<input class="input_focus_enter" type="text" name="complexity" id="complexity" min="1" step="1" max="100" maxlength="3" onkeypress='return event.charCode >= 48 && event.charCode <= 57' onchange="setComplexity()">
</div>
</div>
<div class="control">
<div class="labelDiv">
<label for="alternative">Mode</label>
</div>
<div class="inputDiv">
<span id="alternate_label" class="ckecboxlabel" onclick="toggleAlternativeCheckbox()">rt</span> <!-- OFF = ratings, ON = downloads -->
<input type="checkbox" name="alternative" id="alternative">
</div>
</div>
<div class="control">
<div class="labelDiv">
<label for="auto_advance">Autoadvance</label>
</div>
<div class="inputDiv">
<span id="autoadvance_label" class="ckecboxlabel" onclick="toggleAutoAdvanceCheckbox()">ON</span>
<input type="checkbox" name="auto_advance" id="auto_advance" checked>
</div>
</div>
</div>
<div id="attributionList">
please <b>use headphones</b> for the full experience
</div>
<div id="about">
Freesound Timeline automatically generates soundscapes using the most popular sounds from <a href="https://freesound.org" target="_blank">Freesound</a>
for a given year and month. I originally implemented Freesound Timeline back in 2011 when I was starting to learn about web technologies.
Later in 2018 and 2019 I added some new cool features and the new shinny interface. Want to know more or need some help? Here you'll find
<a href="https://labs.freesound.org/apps/freesound-timeline.html" target="_blank">more information</a>.
</div>
</div>
</div>
</body>
</html>