Light

seancolsen / octave-compass Goto Github PK

View Code? Open in Web Editor NEW

23.0 1.0 0.0 1.87 MB

A tool for exploring musical scales and chords

Home Page: https://octavecompass.com

License: MIT License

HTML 0.42% JavaScript 0.40% CSS 0.34% TypeScript 61.08% Svelte 37.75%

music music-theory audio musical-scales musical-notes svelte typescript

octave-compass's Introduction

Octave Compass

Octave Compass is an interactive web-based tool for exploring musical scales and the chords within them.

Usage

Go to https://octavecompass.com/
Explore!
See "FAQ" within the app for more details.

Developing

To run the app locally:

git clone [email protected]:seancolsen/octave-compass.git
cd octave-compass
npm install
npm start

It's built with Typescript, Svelte, and Snowpack.

Contributions welcome!! Please discuss changes within an issue first.

Improving data

Scale names

The scale name data lives in the following separate repository:

https://github.com/seancolsen/music-theory-data

I chose a separate repo so that other projects can use (and help maintain) this data too! It's stored in yaml format for ease of editing.

Chords

The data for chords lives within this repo at src/Data/chords.ts.

octave-compass's People

Contributors

Stargazers

Watchers

octave-compass's Issues

Alter URL to match state

Create "Transformable" higher-order-component and use it whenever components use SVG transforms

In the "alternate names" overlay, don't display the tonal center name

troubleshoot no audio on iPhone 6

Add button to play all notes within scale

It should also play the octave above the tonal center
It should also play some of the chords.

Don't allow user to select an interval set without a tonal center

Get GET requests with path component to work on live server

Add buttons to select major/minor/chromatic scales

Try to disable "pull down to refresh" on chrome mobile

Unable to scroll chords on Safari mobile

Make "staff" and "about" buttons different since they don't offer paralell things

Notation overlay too small on mobile

When a chord is selected, display the notes together on the staff

Add chord selection menu

Add sound synthesis

Fix errors thrown when only one interval is selected

Use a Shepard Tone for the sound

Rotate in response to touch events

Add scale notation

Allow user to display interval names in solfège

Add functionality to search for scale by name

Use local storage to store clef and selected chords

Set page title based on scale name

Add custom Favicon

Display chord polygon behind chord emblems when chord is playing

Adjust note naming algorithm to improve 1435-5

https://octavecompass.com/1435-5

This scale should be named with flats instead of sharps, even though it would have A and Ab

Redirect invalid URLs to valid ones

Improve display of branding

Hide brand when chords are likely to overlap on top of it
Put more text behind brand with a large stroke so that it extends beyond the scale when the scale cuts across the octave

Deploy to custom domain name

Don't begin rotating in response to left clicks

Get interval labels to display on iOS

Seems like they're not displaying because of the use of textPath.

See if an answer arrives here:

https://stackoverflow.com/questions/50937985/text-within-svg-textpath-not-visible-from-ios-browsers

If need be, convert to straight text

Use an overlay to display alternate scale names when there are too many

Add link to GitHub project

Write basic "About" page and minimal docs

Animate rotation to click stops

When the user releases a rotatable element like the scale or the keyboard, that element should animate its rotation to its valid final resting place.

Add hover tips to chords which display their full names

Fix font display on iOS

Add code-level docs for components

https://react-styleguidist.js.org/docs/documenting.html

Cross-browser testing

Get history navigation to work correctly

Highlight notes when playing

Change "Show all" button to hyperlink

Use chord names (and inversions) to name interval sets

Adopt AirBNB style guide

Configure layout to repond to a variety of aspect ratios

Add interface to change clef

Modal close button sometimes covers modal title

Try with scale 1451

Add data for more chords

Resume AudioContext after first user interaction in Chrome

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio

Change Marquee to use a h1 element

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.