Front-end Development

HTML5 Musical Instruments

Prashant Sani

• 2 min read
HTML5 Musical Instruments

What if some day scientists invent Time Machine? I would love to travel in Pre-HTML5 era, probably somewhere in 2000 or so and Show all of the web community, the powers of JavaScript, HTML5 & CSS3.
I m pretty sure they will be amazed :)

Nobody could have ever imagined the capabilities of HTML5 and related technologies. Here are some amazing collection of Musical Instruments programmed using HTML5:

Awesome Drum Machine right inside your browser.Click Here for more detailed note on this amazing Browser App.

HTML 5 Piano

HTML5 Piano

HTML5 Canvas Piano, is a “fully” functional piano sequencer created entirely in the browser using HTML5 Canvas and HTML5 Audio. It can play and visualize single notes and chords. You can only control the first 2 octaves, the other two are purely visual. You can visit the official Site here or fork and download this amazing project on Github.

HTML5 Guitar 

If you missed Google Doodle Tribute to Sir Les Paul, Here is the Link for the same.Mouse over the guitar Strings and See the Magic! So Didn’t this post changed the way you think about HTML5 and the new Emerging Technologies? or Not ? or You love Flash so much you hardly care about HTML5? Would love to hear your comments and views on the same :).

Morning Star

morningstar

MorningStar is an open source step-sequenced bassline synthesizer using Javascript and HTML5 Canvas.

Additional Links :

  1. Music Notation Rendering API in HTML5
  2. Yet another Framework for Music Notation,Alpha Tab
  3. RO.ME, an Interactive Film in HTML5
  4. Yet Another Interactive Film,The Wilderness Downtown
  5. Plink, a Weird Cooperative HTML5 Music Game
  6. This Shell By Gamits
  7. Interactive Music Video in HTML5
  8. HTML5 Powered Collaborative Music Composition Project, Technitone
  9. (Saved the best for Last), One Hour Per Second

Update : Jan 22,2015 : Recently, onlinetuner.co open-sourced its code via a new github project. The website uses WebAudio API to capture Guitar sound, analyse it and determine the difference from nearest string. Algorithm can be apply for other instruments or other type of tuning.

Update : Jan 21,2016: Some Interesting Musical Codepens:

See the Pen SVG Animated Guitar (Play Me!) 🎸 by Josh (@iamjoshellis) on CodePen.


See the Pen SVG Animated Drum Kit (Play Me!) 🥁 by Josh (@iamjoshellis) on CodePen.

Update : March 17,2016: Chrome Experiments Team has made a dedicated section for Musical Experiments. Go Check Them out.