Musical scale visualisation
How do I make an musical scale visualisation?
What is a musical scale visualisation? How do you make a musical scale visualisation? This script and codes were developed by Yukulélé on 26 August 2022, Friday.
Musical scale visualisation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Musical scale visualisation</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="keyboard"> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div>
</div>
<div class="keysize"> <input type="checkbox" id="bigBlackKeys"/> <label for="bigBlackKeys">all keys same size</label> (<a href="http://www.dodeka.info">dodeka keyboard</a>)
</div>
<p class="scale"><span class="maj"></span> / <span class="min"></span></p>
<div class="score"><span class="clef"></span><span class="signature"><span class="sharp"><span style="transform:translateY(-1em)"></span><span style="transform:translateY(-0.625em)"></span><span style="transform:translateY(-1.125em)"></span><span style="transform:translateY(-0.75em)"></span><span style="transform:translateY(-0.375em)"></span><span style="transform:translateY(-0.875em)"></span><span style="transform:translateY(-0.5em)"></span></span><span class="flat"><span style="transform:translateY(-0.5em)"></span><span style="transform:translateY(-0.875em)"></span><span style="transform:translateY(-0.375em)"></span><span style="transform:translateY(-0.75em)"></span><span style="transform:translateY(-0.25em)"></span><span style="transform:translateY(-0.625em)"></span><span style="transform:translateY(-0.125em)"></span></span></span><span class="tonic maj"></span><span class="tonic min"></span></div>
<div class="ctrl"> <div> <button data-offset="1"> <ruby>−½ <rt>tone</rt> </ruby> </button> <button data-offset="-1"> <ruby>+½ <rt>tone</rt> </ruby> </button> </div> <div> <button data-offset="-5">♭</button> <button data-offset="5">♯</button> </div>
</div> <script src="js/index.js"></script>
</body>
</html>
Musical scale visualisation - Script Codes CSS Codes
@font-face { font-family: BravuraText; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/67868/BravuraText.woff");
}
@font-face { font-family: Bravura; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/67868/Bravura.woff");
}
*,
*:before,
*:after { box-sizing: border-box;
}
*[hidden] { display: none !important;
}
html { background-color: #fff; color: #000; font-size: 30px;
}
.keyboard { width: calc(100vw - 40px); height: calc((100vw - 40px) / (1.4 * 3)); margin: auto; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative;
}
.keyboard.bbk>div>div { height: 100%; border-radius: 0;
}
.keyboard span { display: none;
}
.keyboard >div { width: 2.777777777777778%; position: relative; font-size: calc(100vw - 40px);
}
.keyboard >div >div { position: absolute; color: #888; border: 1px solid; border-top-width: 0; box-shadow: 0 0 2px inset; height: 60%; width: 100%; z-index: 1; background-color: #555; border-radius: 0 0 6px 6px; -webkit-transition: 0.5s height; transition: 0.5s height;
}
.keyboard >div:nth-of-type(n+13):nth-of-type(-n+24) >div { background-color: #000; color: #888;
}
.keyboard >div:nth-of-type(n+37) { display: none;
}
.keyboard >div:nth-child(12n+1) >div:after,
.keyboard >div:nth-child(12n-2) >div:after { content: ''; display: block; background-color: #4f8; width: 50%; padding-top: 50%; margin: 25%; border-radius: 100%; position: absolute; bottom: 0;
}
.keyboard >div:nth-child(12n-2) >div:after { background-color: #84f; -webkit-transform: scale(0.5); transform: scale(0.5);
}
.keyboard >div:nth-of-type(12n+1) >div,
.keyboard >div:nth-of-type(12n+3) >div,
.keyboard >div:nth-of-type(12n+5) >div,
.keyboard >div:nth-of-type(12n+6) >div,
.keyboard >div:nth-of-type(12n+8) >div,
.keyboard >div:nth-of-type(12n+10) >div,
.keyboard >div:nth-of-type(12n+12) >div { height: 100%; width: 0.047619047619048em; z-index: 0;
}
.keyboard >div:nth-child(12n+1) >div,
.keyboard >div:nth-child(12n+3) >div,
.keyboard >div:nth-child(12n+5) >div,
.keyboard >div:nth-child(12n+6) >div,
.keyboard >div:nth-child(12n+8) >div,
.keyboard >div:nth-child(12n+10) >div,
.keyboard >div:nth-child(12n+12) >div { background-color: #bbb;
}
.keyboard >div:nth-child(12n+1):nth-of-type(n+13):nth-of-type(-n+24)>div,
.keyboard >div:nth-child(12n+3):nth-of-type(n+13):nth-of-type(-n+24)>div,
.keyboard >div:nth-child(12n+5):nth-of-type(n+13):nth-of-type(-n+24)>div,
.keyboard >div:nth-child(12n+6):nth-of-type(n+13):nth-of-type(-n+24)>div,
.keyboard >div:nth-child(12n+8):nth-of-type(n+13):nth-of-type(-n+24)>div,
.keyboard >div:nth-child(12n+10):nth-of-type(n+13):nth-of-type(-n+24)>div,
.keyboard >div:nth-child(12n+12):nth-of-type(n+13):nth-of-type(-n+24)>div { background-color: #fff;
}
.keyboard >div:nth-of-type(12n+3)>div { left: -0.007936507936508em;
}
.keyboard >div:nth-of-type(12n+5)>div { left: -0.015873015873016em;
}
.keyboard >div:nth-of-type(12n+6)>div { left: 0.003968253968254em;
}
.keyboard >div:nth-of-type(12n+8)>div { left: -0.003968253968254em;
}
.keyboard >div:nth-of-type(12n+10)>div { left: -0.011904761904762em;
}
.keyboard >div:nth-of-type(12n+12)>div { left: -0.01984126984127em;
}
.keysize { font-size: 0.55em;
}
.scale { font-family: BravuraText, sans-serif; text-align: center; margin: 1.5em;
}
.scale >span { margin: 0 0.25em;
}
.maj { color: #4f8;
}
.min { color: #84f;
}
.score { font-family: Bravura; font-size: 60px; font-weight: 100; margin: 1em auto; position: relative; white-space: nowrap; line-height: 2; width: 2.94em; height: 1.04em;
}
.score:before { content: ''; position: absolute; -webkit-transform-origin: left; transform-origin: left; letter-spacing: -1px;
}
.clef { display: inline-block; -webkit-transform: translateY(-0.25em); transform: translateY(-0.25em); margin: 0 0.2em 0 0.2em;
}
.signature { display: inline-block; width: 90px;
}
.sharp >span,
.flat >span { display: inline-block;
}
.tonic { display: inline-block; margin: 0 0.15em;
}
.tonic.maj { color: #4f8;
}
.tonic.min { color: #84f;
}
.ctrl { position: relative; z-index: 1; margin: 1.5em 0; text-align: center;
}
.ctrl button { margin: 0.1em; font-family: BravuraText, sans-serif; padding: 0.25em; width: 2.7em; height: 2.7em;
}
.ctrl button ruby { pointer-events: none; vertical-align: top; margin: 0; padding: 0; -webkit-ruby-position: after; ruby-position: under;
}
.ctrl button ruby rt { position: relative;
}
Musical scale visualisation - Script Codes JS Codes
const keyboard = document.querySelector('.keyboard')
const maj = document.querySelector('.scale .maj')
const min = document.querySelector('.scale .min')
const keySize = document.querySelector('#bigBlackKeys')
const majScales = 'CD♭DE♭EFG♭GA♭AB♭BC'.split(/(?!\W)/)
const minScales = 'AB♭BCC♯DE♭EFF♯GG♯A'.split(/(?!\W)/)
const sharps = Array.from(document.querySelectorAll('.sharp>span'))
const flats = Array.from(document.querySelectorAll('.flat>span'))
const majScaleTonic = document.querySelector('.tonic.maj')
const minScaleTonic = document.querySelector('.tonic.min')
const accidentals = [].concat(sharps, flats)
const noteTransform = (n) => { const offset = ((n - 'A'.charCodeAt(0) + 2) % 7 + 1) return `translateY(${-offset*1/8}em) scale(${offset<4?1:-1})`
}
const setOffset = (offset) => { let o = keyboard.querySelectorAll('span').length offset += o offset = offset - 12 * Math.floor(offset / 12) while (o > offset) { o-- keyboard.firstChild.remove() } while (o < offset) { o++ keyboard.insertBefore(document.createElement('span'), keyboard.firstChild) } o = (12 - o) % 12 maj.textContent = majScales[o] min.textContent = minScales[o] + 'm' majScaleTonic.style.transform = noteTransform(majScales[o].charCodeAt(0)) minScaleTonic.style.transform = noteTransform(minScales[o].charCodeAt(0)) accidentals.forEach(a=>a.setAttribute('hidden', 'hidden')) let accs let accidentalsCount if([2, 4, 7, 9, 11].indexOf(o) !== -1) { accidentalsCount = (o * 7) % 6 accs = sharps } else { accidentalsCount = ((12 - o) * 7) % 6 accs = flats } if(o === 6) accidentalsCount = 6 console.log(o, accidentalsCount) for(let i = 0; i < accidentalsCount; i++){ accs[i].removeAttribute('hidden') }
}
keySize.addEventListener('change', () => { keyboard.classList.toggle('bbk', keySize.checked)
})
document.querySelector('.ctrl').addEventListener('click', (e) => { const o = e.target.dataset.offset if(o == null) return setOffset(+o)
})
setOffset(0)
Developer | Yukulélé |
Username | yukulele |
Uploaded | August 26, 2022 |
Rating | 4 |
Size | 5,737 Kb |
Views | 28,336 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Pure CSS Star Wars opening crawl | 8,792 Kb |
Shepard Piano | 4,057 Kb |
Acid swiming pool | 1,895 Kb |
Table reverse | 2,495 Kb |
Times Table on Circle | 4,525 Kb |
Nested divs animated by CSS | 4,380 Kb |
CSS triangle generator | 5,390 Kb |
Canvas blend modes | 1,998 Kb |
Perlin noise animation | 3,948 Kb |
Steiner chain | 6,884 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
E-mail Template | SoloMDFK | 4,871 Kb |
Login with flip 3d animation | Mariusbalaj | 3,014 Kb |
SVG email test v2.0 | M_J_Robbins | 2,090 Kb |
STIKHOI | Denmch | 7,122 Kb |
Project -Show the Local Weather | Luciano_Britis | 2,583 Kb |
Midterm dry run | Jds317 | 1,649 Kb |
Canvas Fireworks | Jackrugile | 6,200 Kb |
SCSS Unit Conversion | Jakob-e | 8,210 Kb |
React Markdown Previewer | C0d0er | 3,190 Kb |
A Pen by Final Boss tommyb9 | FBtommyb9 | 55,354 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!