-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
82 lines (80 loc) · 2.33 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
<!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, {
get_version, compile_to_midi, 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()
const test_mml = 'Str A = {ド}; Str B = {ミ}; A; B'
console.log('[TEST]', compile_to_midi(test_mml, 1))
}).catch(err => {
console.error(err);
document.getElementById('msg').innerHTML = '[LOAD_ERROR]' + tohtml(err.toString())
});
// load PicoAudio
const picoAudio = new PicoAudio();
picoAudio.init();
// PLAY Button
document.getElementById('play').addEventListener('click', () => {
console.log('play')
// get mml data
const mml = document.getElementById('mml').value
saveToStorage(mml)
const com = SakuraCompiler.new()
const midi = com.compile(mml)
const log = com.get_log()
if (log) {
document.getElementById('msg').innerHTML = tohtml(log)
}
// parse midi to play
const parsedData = picoAudio.parseSMF(new Uint8Array(midi))
picoAudio.setData(parsedData)
picoAudio.play()
});
// Stop Button
document.getElementById('stop').addEventListener('click', () => {
console.log('stop')
picoAudio.stop();
});
// storage
function saveToStorage(mml) {
localStorage.setItem('mml', mml)
}
document.addEventListener('DOMContentLoaded', () => {
const mml = localStorage.getItem('mml')
if (mml) {
document.getElementById('mml').value = mml
}
});
function tohtml(s) {
return s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/\n/g, '<br>')
}
</script>
<style>
* { margin: 0; padding: 0;}
#version {
background-color: pink;
color: black;
padding: 1em;
}
Button {
width: 8em;
height: 2em;
}
</style>
<div id="version">
Sakuramml <span id="sakura_version"></span>
</div>
<div id="player">
<button id="play">Play</button>
<button id="stop">Stop</button>
<textarea id="mml" rows="20" style="width:100%;">ドレミ</textarea>
</div>
<div id="msg"></div>
</body></html>