-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index_pico.html
76 lines (70 loc) · 2.51 KB
/
index_pico.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
<!DOCTYPE html>
<html><meta charset="utf-8"><body>
<script src="https://unpkg.com/picoaudio/dist/browser/PicoAudio.js"></script>
<script type="module">
// WebAssemblyを読み込む
import init, {compile,get_version} from './pkg/sakuramml.js';
// 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.sakura_log = function (s) {
console.log(s)
document.getElementById('msg').innerHTML = tohtml(s)
}
const picoAudio = new PicoAudio();
picoAudio.init();
function playMML() {
const txt = document.getElementById('txt')
localStorage["picosakura_txt"] = txt.value
try {
const a = compile(txt.value)
const smfData = new Uint8Array(a);
// SMF形式のバイナリのパースを行う
const parsedData = picoAudio.parseSMF(smfData);
// パースしたデータをセット
picoAudio.setData(parsedData);
// 再生
picoAudio.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>
</body></html>