-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index_jzz.html
85 lines (75 loc) · 2.71 KB
/
index_jzz.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
<!DOCTYPE html>
<html><meta charset="utf-8"><body>
<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>
<script type="module">
// WebAssemblyを読み込む
import init, {get_version, SakuraCompiler}
from './pkg/sakuramml.js?v';
// player
var player;
// Promiseの仕組みでライブラリを読み込む
init().then(() => {
console.log('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.addEventListener('load', () => {
player = new JZZ.gui.Player('player_gui');
JZZ.synth.Tiny.register('Web Audio');
console.log('player=', player);
})
function playMML() {
const txt = document.getElementById('txt')
localStorage["picosakura_txt"] = txt.value
try {
const com = SakuraCompiler.new()
const a = com.compile(txt.value)
const smfData = new Uint8Array(a);
player.load(new JZZ.MIDI.SMF(smfData));
player.play();
} catch (err) {
console.error(err);
document.getElementById('msg').innerHTML = '[SYSTEM_ERROR]' + tohtml(err.toString())
}
}
document.getElementById('btnPlay').onclick = () => {
playMML()
}
window.addEventListener("load", (e) => {
const txt = localStorage["picosakura_txt"]
if (txt) {
document.getElementById("txt").value = txt
}
})
</script>
<div>
<div id="player" style="display:none;">
<button id="btnPlay" style="padding:8px;">▶ 再生</button>
<span id="sakura_version"></span>
</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 id="msg" style="padding:0.5em; color: red;"></div>
</div>
<div>
<div id="player_gui"></div>
</div>
</body></html>