Skip to content

Muson Interaction #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JUSTIVE wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Muson Interaction #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
966034e
add interaction to key
JUSTIVE Aug 14, 2021
088128a
fix formatting
JUSTIVE Aug 14, 2021
f4a6a75
Merge pull request #1 from JUSTIVE/muson-interaction
JUSTIVE Aug 14, 2021
4d52ebb
feat: now sings
JUSTIVE Feb 21, 2026
ba4077f
feat: lowpass filter, 1oct up, button classes
JUSTIVE Feb 21, 2026
35501f7
feat: 음 칩 매핑
JUSTIVE Feb 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
.DS_Store
277 changes: 142 additions & 135 deletions muson/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,147 +4,154 @@

<!-- Inspired by the Muson toy synth -->

<!DOCTYPE html>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style.css" />
<script src="./index.js"></script>
</head>
<body>
<div class="muson" aria-label="Muson Synth Illustration">
<div class="top-bar">
<div class="speaker-bar"><div class="speakers"></div></div>
<div class="muson-frame"><div class="rainbow"></div></div>
</div>
<div class="range-container" aria-hidden="true">
<div class="range-plate">
<div class="left">
<ul class="ranges">
<li>1–4</li>
<li>1–6</li>
<li>1–8</li>
<li>1–10</li>
</ul>
<p>Range</p>
<div class="slider-wrapper">
<div class="slider"></div>
</div>
<div class="muson" aria-label="Muson Synth Illustration">
<div class="top-bar">
<div class="speaker-bar"><div class="speakers"></div></div>
<div class="muson-frame">
<div class="rainbow">
MUS&nbsp;&nbsp;N
<span class="line1">SYNTHESIZER</span>
<span class="line2">THE SOUND OF MUSIC™</span>
</div>
</div>
</div>
<div class="center">
<p>Volume</p>
<ul>
<li>Lo</li>
<li>Med</li>
<li>High</li>
</ul>
<div class="switch-wrapper">
<div class="switch-button"></div>
</div>
<div class="range-container" aria-hidden="true">
<div class="range-plate">
<div class="left">
<ul class="ranges">
<li>1–4</li>
<li>1–6</li>
<li>1–8</li>
<li>1–10</li>
</ul>
<p>Range</p>
<div class="slider-wrapper">
<div class="slider"></div>
</div>
</div>
<div class="center">
<p>Volume</p>
<ul>
<li>Lo</li>
<li>Med</li>
<li>High</li>
</ul>
<div class="switch-wrapper">
<div class="switch-button"></div>
</div>
</div>
<div class="right">
<p>Mode</p>
<ul>
<li>Off</li>
<li>Organ</li>
<li>Organ <br />& Synth</li>
</ul>
<div class="slider-wrapper">
<div class="slider"></div>
</div>
</div>
</div>
</div>
<div class="right">
<p>Mode</p>
<ul>
<li>Off</li>
<li>Organ</li>
<li>Organ <br />& Synth</li>
</ul>
<div class="slider-wrapper">
<div class="slider"></div>
</div>
<div class="button-container">
<div class="button c4">
<div class="center"></div>
</div>
<div class="button d4">
<div class="center"></div>
</div>
<div class="button e4">
<div class="center"></div>
</div>
<div class="button f4">
<div class="center"></div>
</div>
<div class="button g4">
<div class="center"></div>
</div>
<div class="button a4">
<div class="center"></div>
</div>
<div class="button b4">
<div class="center"></div>
</div>
<div class="button c5">
<div class="center"></div>
</div>
<div class="button d5">
<div class="center"></div>
</div>
<div class="button e5">
<div class="center"></div>
</div>
</div>
<div class="letter-container" aria-hidden="true">
<div>
<p>C</p>
</div>
<div>
<p>D</p>
</div>
<div>
<p>E</p>
</div>
<div>
<p>F</p>
</div>
<div>
<p>G</p>
</div>
<div>
<p>A</p>
</div>
<div>
<p>B</p>
</div>
<div>
<p>C</p>
</div>
<div>
<p>D</p>
</div>
<div>
<p>E</p>
</div>
</div>
<div class="key-container">
<div style="z-index: 12"></div>
<div style="z-index: 11"></div>
<div style="z-index: 10"></div>
<div style="z-index: 9"></div>
<div style="z-index: 8"></div>
<div style="z-index: 7"></div>
<div style="z-index: 6"></div>
<div style="z-index: 5"></div>
<div style="z-index: 4"></div>
<div style="z-index: 3"></div>
</div>
<div class="speed-container" aria-hidden="true">
<p>Fast</p>
<div class="speed-slider"></div>
<div class="speed-button-container">
<div class="speed-button"></div>
</div>
<p>Slow</p>
</div>
<div class="vol-container" aria-hidden="true">
<p>High</p>
<div class="vol-slider"></div>
<div class="vol-button-container">
<div class="vol-button"></div>
</div>
<p>Low</p>
</div>
</div>
</div>
<div class="button-container">
<div class="button">
<div class="center"></div>
</div>
<div class="button">
<div class="center"></div>
</div>
<div class="button">
<div class="center"></div>
</div>
<div class="button">
<div class="center"></div>
</div>
<div class="button">
<div class="center"></div>
</div>
<div class="button">
<div class="center"></div>
</div>
<div class="button">
<div class="center"></div>
</div>
<div class="button">
<div class="center"></div>
</div>
<div class="button">
<div class="center"></div>
</div>
<div class="button">
<div class="center"></div>
</div>
</div>
<div class="letter-container" aria-hidden="true">
<div>
<p>C</p>
</div>
<div>
<p>D</p>
</div>
<div>
<p>E</p>
</div>
<div>
<p>F</p>
</div>
<div>
<p>G</p>
</div>
<div>
<p>A</p>
</div>
<div>
<p>B</p>
</div>
<div>
<p>C</p>
</div>
<div>
<p>D</p>
</div>
<div>
<p>E</p>
</div>
</div>
<div class="key-container">
<div style="z-index: 12;"></div>
<div style="z-index: 11;"></div>
<div style="z-index: 10;"></div>
<div style="z-index: 9;"></div>
<div style="z-index: 8;"></div>
<div style="z-index: 7;"></div>
<div style="z-index: 6;"></div>
<div style="z-index: 5;"></div>
<div style="z-index: 4;"></div>
<div style="z-index: 3;"></div>
</div>
<div class="speed-container" aria-hidden="true">
<p>Fast</p>
<div class="speed-slider"></div>
<div class="speed-button-container">
<div class="speed-button"></div>
</div>
<p>Slow</p>
</div>
<div class="vol-container" aria-hidden="true">
<p>High</p>
<div class="vol-slider"></div>
<div class="vol-button-container">
<div class="vol-button"></div>
</div>
<p>Low</p>
</div>
</div>
</body>
</html>
</html>
Loading