slight style changes

This commit is contained in:
Will Greenberg 2022-08-23 15:01:05 -07:00
parent 04c255d9db
commit 22fe91432d
2 changed files with 27 additions and 16 deletions

View file

@ -22,26 +22,37 @@ textarea {
margin: 10px;
}
.body {
display: flex;
flex-direction: column;
}
button {
width: 150px;
margin: 10px;
}
p {
font-size: small;
}
</style>
</head>
<span id='status'>loading samples...</span>
<div class='sequencers'>
<div class='sequencer'>
<span>beats</span>
<textarea id='beats'></textarea>
<p>Each letter corresponds to a different sample. Non-letters are
silent.</p>
</div>
<div class='sequencer'>
<span>piano</span>
<textarea id='piano'></textarea>
<p>On a QWERTY keyboard, the first 7 letters on each row represent
notes C through B, with lower rows representing higher octaves. Capital
letters are louder, non-letters are silent.</p>
<div class="body">
<div class='sequencers'>
<div class='sequencer'>
<span>beats</span>
<textarea id='beats'></textarea>
<p>Each letter corresponds to a different sample. Non-letters are
silent.</p>
</div>
<div class='sequencer'>
<span>piano</span>
<textarea id='piano'></textarea>
<p>On a QWERTY keyboard, the first 7 letters on each row represent
notes C through B, with lower rows representing higher octaves. Capital
letters are louder, non-letters are silent.</p>
</div>
</div>
<button id="play">loading...</button>
</div>
<button id="play">Play/Stop</button>
</html>

View file

@ -171,7 +171,7 @@ window.addEventListener('load', async () => {
const beats = new Beats();
await piano.init(ctx);
await beats.init(ctx);
document.getElementById('status').remove();
document.getElementById('play').innerText = 'play/pause';
const pianoSequencer = setupSequencer(piano, 'piano');
const beatsSequencer = setupSequencer(beats, 'beats');