Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

beautiful-piano

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

beautiful-piano

beautiful visualization of piano keys with pressed keys effect in plain HTML&CSS

  • 0.0.6
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1
decreased by-50%
Maintainers
1
Weekly downloads
 
Created
Source

Beautiful Piano

screenshot

npm version npm dependencies npm dev dependencies

This library provides a JavaScript API to generate HTML markup for a beautiful musical keyboard. It comes with a CSS file which makes it so nice.

Demo

See the demo on rawgit

Setup

Either embed the file from the dist directory via script tag in your HTML:

<script src="beautiful-piano/dist/piano.js"></script>

Then you can access to the global variable piano.

Otherwise install it via npm npm i beautiful-piano

Don't forget to include the CSS file, for instance:

<link rel="stylesheet" href="beautiful-piano/styles.css">

Usage

piano(document.querySelector('body'), {octaves: 3});

piano(parent, options)

Arguments:

  • parent - DOM element where to inject the piano
  • options Options object, octaves and range property can't be used in combination You can also pass a namesMode property.
    • octaves - A positive integer, the amount of octaves to generate, starts always with an A and ends with a C, min: 1, max: 9
    • range - Options object with a custom range
      • startKey - A string, key where the piano should start, A-H
      • startOctave - An integer on which octave the piano should start, min: 0, max: 10
      • endKey - A string, key where the piano should end, A-H
      • endOctave - An integer on which octave the piano should end, min: 0, max: 10
    • namesMode - A string, either sharp or flat when names for the black keys are shown
    • lang - A string, either en or de to swap H and B
    • notation - A string, either scientific or helmholz will be used for octave notation

Selectors

You can toggle the pressed effect of each key with CSS class. For instance: document.querySelector('.C4').classList.add('active')

The selector for the keys use the scientific notatino for the octave. All 12 keys for the fourth octave can be accessed with these selectors:

.C4
.Cs4 or .Db4
.D4
.Ds4 or .Eb4
.E4
.F4
.Fs4 or .Gb4
.G4
.Gs4 or .Ab4
.A4
.As4 or .Bb
.B

WTF? I can't hear anything!

This library provides just a visual interface. Playing a sound while pressing a key is comming soon as an extra module.

Credits

All visual credits goes to Taufik Nurrohman

I started with the style sheets from his codepen and modified it for more dynamic use cases.

Keywords

FAQs

Package last updated on 30 Jan 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc