forked from IMAGINARY/muski-synth-genie
-
Notifications
You must be signed in to change notification settings - Fork 1
/
muski.html
89 lines (83 loc) · 2.9 KB
/
muski.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Synth-Genie Demo</title>
<link rel="stylesheet" href="dist/muski-synth-genie.min.css" />
<script src="https://unpkg.com/[email protected]/dist/pep.js"></script>
<style>
#muski-synth-genie-wrapper {
position: relative;
width: calc(16 * 32px + 15 * 1px);
height: calc(8 * 32px + 7 * 1px);
border: 1px solid gray;
box-sizing: content-box;
resize: both;
overflow: hidden;
}
#muski-synth-genie {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
#play-pause-button[data-state='paused'] > .playing {
display: none;
}
#play-pause-button[data-state='playing'] > .paused {
display: none;
}
#mute-unmute-button[data-state='muted'] > .unmuted {
display: none;
}
#mute-unmute-button[data-state='unmuted'] > .muted {
display: none;
}
</style>
</head>
<body>
<div id="muski-synth-genie-wrapper">
<div
id="muski-synth-genie"
data-component="muski-synth-genie"
data-checkpoint="https://storage.googleapis.com/magentadata/js/checkpoints/piano_genie/model/epiano/stp_iq_auto_contour_dt_166006"
data-show-bar
></div>
</div>
<button id="play-pause-button" data-state="playing">
<span class="playing">Pause</span><span class="paused">Play</span>
</button>
<button id="mute-unmute-button" data-state="unmuted">
<span class="muted">Unmute</span><span class="unmuted">Mute</span>
</button>
<button id="clear-button">Clear</button>
<script src="dist/muski-synth-genie.min.js"></script>
<script>
const synthGenieElement = document.getElementById('muski-synth-genie');
const playPauseButton = document.getElementById('play-pause-button');
playPauseButton.addEventListener('click', () => {
if (synthGenieElement.hasAttribute('data-pause')) {
synthGenieElement.removeAttribute('data-pause');
playPauseButton.dataset.state = 'playing';
} else {
synthGenieElement.setAttribute('data-pause', '');
playPauseButton.dataset.state = 'paused';
}
});
const muteUnmuteButton = document.getElementById('mute-unmute-button');
muteUnmuteButton.addEventListener('click', () => {
if (synthGenieElement.hasAttribute('data-mute')) {
synthGenieElement.removeAttribute('data-mute');
muteUnmuteButton.dataset.state = 'unmuted';
} else {
synthGenieElement.setAttribute('data-mute', '');
muteUnmuteButton.dataset.state = 'muted';
}
});
const clearButton = document.getElementById('clear-button');
clearButton.addEventListener('click', () =>
synthGenieElement.setAttribute('data-clear', ''),
);
</script>
</body>
</html>