Jasima/musicbox
1
0
Fork 0
mirror of https://github.com/wgreenberg/musicbox.git synced 2024-11-10 05:40:26 +01:00
Code Issues Projects Releases Packages Wiki Activity

slight style changes

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

41
index.html
View file

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

2
musicbox.js
View file

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