-
Notifications
You must be signed in to change notification settings - Fork 12
/
index.html
140 lines (123 loc) · 6.53 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
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<!-- DEMO html index -->
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta content='IE=edge' http-equiv='X-UA-Compatible'>
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
<!-- open graph -->
<meta content='SpessaSynth MIDI SF2 and DLS Synthesizer' property='og:title' />
<meta content='SpessaSynth' property='og:site_name' />
<meta content='SoundFont2 synthesizer and MIDI player/editor that runs in your browser' property='og:description' />
<meta content='https://repository-images.githubusercontent.com/643635315/905d798e-16d7-4673-8fc4-e83caf7c41e6'
property='og:image' />
<meta content='Colorful notes falling on a piano' property='og:image:alt' />
<meta content='1920' property='og:image:width' />
<meta content='1080' property='og:image:height' />
<meta content='https://spessasus.github.io/SpessaSynth/' property='og:url' />
<meta content='website' property='og:type' />
<!-- twitter card -->
<meta content='summary_large_image' name='twitter:card'>
<meta content='SpessaSynth MIDI Synthesizer' name='twitter:title'>
<meta content='SoundFont2 synthesizer and MIDI player/editor that runs in your browser' name='twitter:description'>
<meta content='https://repository-images.githubusercontent.com/643635315/905d798e-16d7-4673-8fc4-e83caf7c41e6'
name='twitter:image'>
<!-- for search engines -->
<meta
content='SpessaSynth is a powerful MIDI Player and SoundFont2 / DLS Synthesizer with MIDI editing capabilites. It allows to play MIDI files with .sf2 files and .dls files and convert dls to sf2 online!'
name='description' />
<meta content='spessasus' name='author' />
<meta
content='midi, soundfont, sf2, synth, synthesizer, soundfont2, midi player, midi player online, player, sf3, dls, rmidi, mid, rmi, soundfont player, midi soundfont player online, dls to sf2, dls to sf2 converter'
name='keywords' />
<title>SpessaSynth SoundFont/DLS MIDI Player Online</title>
<link as='style' href='src/website/minified/style.min.css' rel='preload'>
<link href='src/website/minified/demo_main.min.js' rel='modulepreload'>
<link href='src/website/minified/style.min.css' rel='stylesheet'>
<link href='src/website/favicon.ico' rel='icon' type='image/png'>
<link href='src/website/manifest.json' rel='manifest'>
<style>
#github_page {
color: yellowgreen;
}
</style>
<noscript>
<style>
.loading_icon .bi-hourglass {
display: none !important;
}
.loading_icon {
animation: none !important;
}
#loading_message {
display: none !important;
}
</style>
</noscript>
</head>
<body>
<!-- loading -->
<div class='loading'>
<div class='loading_icon'>
<svg class='bi bi-hourglass' fill='currentColor' height='256' viewBox='0 0 16 16' width='256'
xmlns='http://www.w3.org/2000/svg'>
<path
d='M2 1.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1-.5-.5m2.5.5v1a3.5 3.5 0 0 0 1.989 3.158c.533.256 1.011.791 1.011 1.491v.702c0 .7-.478 1.235-1.011 1.491A3.5 3.5 0 0 0 4.5 13v1h7v-1a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351v-.702c0-.7.478-1.235 1.011-1.491A3.5 3.5 0 0 0 11.5 3V2z' />
</svg>
<noscript>
<svg class='bi bi-exclamation-triangle' fill='currentColor' height='256' viewBox='0 0 16 16'
width='256' xmlns='http://www.w3.org/2000/svg'>
<path
d='M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.2.2 0 0 1-.054.06.1.1 0 0 1-.066.017H1.146a.1.1 0 0 1-.066-.017.2.2 0 0 1-.054-.06.18.18 0 0 1 .002-.183L7.884 2.073a.15.15 0 0 1 .054-.057m1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767z' />
<path
d='M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z' />
</svg>
</noscript>
</div>
<noscript><h1>Spessasynth requires JavaScript to work. Please turn it on.</h1></noscript>
<h1 id='loading_message'>Loading...</h1>
</div>
<div class='drop_prompt hidden'>
<h1 translate-path='locale.dropPrompt'>Drop files here...</h1>
</div>
<div class='spessasynth_main'>
<div class='top_part'>
<div id='synthetizer_controls'></div>
<div id='title_wrapper'>
<div id='progress_bar'></div>
<h1 id='title' translate-path='locale.demoTitleMessage'>SpessaSynth: Online Demo</h1>
<noscript><h1>SpessaSynth requires JavaScript to work.</h1></noscript>
<div class='midi_and_sf_controller'>
<label for='midi_file_input' id='file_upload' translate-path='locale.midiUploadButton'>Upload your MIDI
files</label>
<input accept='.mid, .rmi, audio/midi' id='midi_file_input' multiple type='file'><br />
<label id='demo_song' translate-path='locale.demoSongButton'>Demo song</label>
<label id='export_button' translate-path-title='locale.exportAudio.button'>Export audio</label>
<label id='sf_upload'> <span
translate-path='locale.demoSoundfontUploadButton'>Upload the soundfont</span>
<input accept='.sf2,.sf3,.sfogg,.dls' id='sf_file_input' type='file'><br />
</label>
<label>
<a href='https://github.com/spessasus/SpessaSynth#readme' id='github_page' target='_blank'
translate-path='locale.demoGithubPage'>Project's page</a>
</label>
</div>
</div>
<div id='settings_div'>
</div>
</div>
<div class='show_top_button'></div>
<div id='keyboard_canvas_wrapper'>
<canvas id='note_canvas'></canvas>
<div id='keyboard'></div>
</div>
<div id='player_info'></div>
<div class='bottom_part'>
<div id='sequencer_controls'></div>
</div>
<div class='notification_field'></div>
</div>
<!-- here the magic happens ;) -->
<script src='src/website/minified/demo_main.min.js' type='module'></script>
</body>
</html>