-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
138 lines (132 loc) · 4.76 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
<!DOCTYPE html>
<html><meta charset="utf-8"><body>
<!-- jzz player -->
<script src="https://cdn.jsdelivr.net/npm/jzz"></script>
<script src="https://cdn.jsdelivr.net/npm/jzz-midi-smf"></script>
<script src="https://cdn.jsdelivr.net/npm/jzz-synth-tiny"></script>
<script src="https://cdn.jsdelivr.net/npm/jzz-input-kbd"></script>
<script src="https://cdn.jsdelivr.net/npm/jzz-gui-player"></script>
<!-- picoaudio player -->
<script src="https://unpkg.com/picoaudio/dist/browser/PicoAudio.js"></script>
<script type="module">
// WebAssemblyを読み込む
import init, {get_version, SakuraCompiler} from './pkg/sakuramml.js';
// Promiseの仕組みでライブラリを読み込む
init().then(() => {
console.log('load::ok')
document.getElementById('player').style.display = 'block'
document.getElementById('sakura_version').innerHTML = 'ver.' + get_version()
}).catch(err => {
console.error(err);
document.getElementById('msg').innerHTML = '[LOAD_ERROR]' + tohtml(err.toString())
});
function tohtml(s) {
s = s.replace(/&/g,'&')
s = s.replace(/</g,'<')
s = s.replace(/>/g,'>')
s = s.replace(/\n/g,'<br>\n')
return s
}
window.player_jzz = null;
window.player_pico = null;
function playMML() {
const txt = document.getElementById('txt')
const pico = document.getElementById('pico')
localStorage["picosakura_txt"] = txt.value
// init player
if (pico.checked) {
if (!window.player_pico) {
// load Pico
window.player_pico = new PicoAudio();
window.player_pico.init();
}
} else {
if (!window.player_jzz) {
// load JZZ
document.getElementById('player_gui').style.display = 'none'
window.player_jzz = new JZZ.gui.Player('player_gui');
JZZ.synth.Tiny.register('Web Audio');
}
}
try {
console.log('Compiler::new')
const com = SakuraCompiler.new()
console.log('Compiler loaded')
com.set_language('ja')
com.set_debug_level(1)
console.log('try to compile')
const a = com.compile(txt.value)
console.log('try to compile=', txt.value)
const log = com.get_log()
console.log('@@log=', log)
// log
document.getElementById('msg').innerHTML = tohtml(log)
const smfData = new Uint8Array(a);
if (pico.checked) {
if (window.player_jzz) {
window.player_jzz.stop(); //
}
const parsedData = player_pico.parseSMF(smfData);
window.player_pico.setData(parsedData);
window.player_pico.play();
} else {
if (window.player_jzz) {
window.player_pico.stop(); //
}
window.player_jzz.load(new JZZ.MIDI.SMF(smfData));
window.player_jzz.play();
}
} catch (err) {
console.error(err);
document.getElementById('msg').innerHTML = '[SYSTEM_ERROR]' + tohtml(err.toString())
}
}
document.getElementById('btnPlay').onclick = () => {
playMML()
}
document.getElementById('btnStop').onclick = () => {
if (window.player_jzz) { window.player_pico.stop(); }
if (window.player_pico) { window.player_pico.stop(); }
}
window.addEventListener("load", (e) => {
const txt = localStorage["picosakura_txt"]
if (txt) {
document.getElementById("txt").value = txt
}
})
</script>
<script>
function show_jzz() {
const gui = document.getElementById('player_gui')
gui.style.display = 'block'
}
function show_pico() {
document.getElementById('player_gui').style.display = 'none'
console.log('pico')
}
</script>
<div>
<div id="player" style="display:none;">
<button id="btnPlay" style="padding:8px;">▶ ピコ再生</button>
<button id="btnStop" style="padding:8px;">停止</button>
<span id="sakura_version" style="font-size:0.4em;"></span>
<span style="padding:6px; font-size:0.6em;">
(シンセ選択:
<label for="pico"><input type="radio" id="pico" name="player_type" value="pico" checked="1" onclick="show_pico()">picoaudio</label>
<label for="jzz"><input type="radio" id="jzz" name="player_type" value="jzz" onclick="show_jzz()">jzz-synth-tiny</label>)
</span>
</div>
<div>
<textarea id="txt" cols="60" rows="8" style="width:97%;padding:8px;background-color:#fffff0;">// ここに、ドレミのテキストを書いてください。
トラック1 @1 音量120 音階5 音符4 [3 ドミソミ ] ドーーー
トラック2 @1 音量100 音階5 音符4 [3 ソラ`レラ ] ソーーー
トラック3 @1 音量100 音階3 音符8 [3 ドドドド ドドドド] ドーーー
トラック10 音量100 音符8 [3 どつたつ どつたた ] ぱーーー
</textarea>
</div>
<div>
<div id="player_gui"></div>
</div>
<div id="msg" style="padding:0.5em; color: red;"></div>
</div>
</body></html>