piano - 🎹To play piano using CSS and JavaScript

  •        36

This project uses Pug, Stylus and Webpack. With the commands above, you have everything to start.

http://www.felipefialho.com/piano
https://github.com/LFeh/piano

Dependencies:

howler : ^2.0.9
webpack : ^3.5.5

Tags
Implementation
License
Platform

   




Related Projects

Virtual MIDI Piano Keyboard

  •    C++

VMPK is a virtual MIDI piano keyboard for Linux, Windows and OSX. Based on Qt4 and RtMIDI, the program is a MIDI event generator using the computer's alphanumeric keyboard and the mouse. It may be used also to display received MIDI notes.

Piano Booster

  •    C++

A MIDI file player that teaches you how to play the piano. PianoBooster is a fun way of playing along with a musical accompaniment and at the same time learning the basics of reading musical notation. see: http://pianobooster.sourceforge.net

Linthesia

  •    C++

Fork of Synthesia to GNU/Linux. Synthesia is a software which teaches you to play piano using piano-roll-style falling notes with any MIDI file, available under Windows and Mac.

Linux Dream Cheeky Roll-Up Piano Driver

  •    C

Linux userspace driver to provide ALSA MIDI interface for Dream Cheeky/Dream Link USB Piano

aiexperiments-ai-duet - A piano that responds to you.

  •    Javascript

A piano that responds to you. This experiment lets you make music through machine learning. A neural network was trained on many MIDI examples and it learned about musical concepts, building a map of notes and timings. You just play a few notes, and see how the neural net responds.


icono - One tag One icon, no font or svg, Pure CSS

  •    CSS

icono is an icon pack that needs no external resources. Every tags can be an icon made with pure CSS. You can add icono folder in your project and import icono.less for compile. iconos maincolor can be changed in variable.less.

MidiMix

  •    

MidiMix is small app to play back a MIDI file via a simple mixer. It visualizes the notes played on a piano keyboard and provides control over the playback speed. The primary purpose of the app is to help choir members learn their parts from a single MIDI file with all parts.

Piano Odyssey

  •    C

Play a game similar to the popular console game by RedOctane, but designed for your MIDI keyboard. Levels range from Easy, where the hand position never changes and only white keys are used, to Expert, where every note on the sheet music is played.

AudioKitSynthOne - AudioKit Synth One: Open-Source iOS Synthesizer App

  •    Swift

We've open-sourced the code for this synthesizer so that everyone is able to make changes to the code, introduce new features, fix bugs, improve efficiency, and keep the synthesizer up-to-date with all new capabilities of the base operating system. If you're new to AudioKit, you can learn more: here. This code and app is made possible by all the contributors to AudioKit. Many of the features of Synth One are availble as modules in AudioKit, allowing you easy access to oscillators, filters, reverbs, effects, and other DSP processing: code here.

ROMPlayer - AudioKit Sample Player (ROM Player) - EXS24, Sound Font, Wave Player

  •    Swift

Welcome to the official AudioKit example of a sample-based music instrument written in Swift. It can be modified to play EXS24, Wave, or Sound Fonts. This code is lightweight and demonstrates how you can make a beautiful sounding, pro-level instrument with small amount of code. If you're new to AudioKit, you can learn more and view getting started links: here.

css-components - :coffee: A set of common UI Components using the power of CSS and without Javascript

  •    HTML

A set of common UI Components using the power of CSS and without Javascript. * CSS3 transitions are not supported in IE8 and below. ** Janky z-index. See tooltip on right example.

pure - A set of small, responsive CSS modules that you can use in every web project.

  •    HTML

Note: You can customize which Pure modules you need. A responsive grid that can be customized to your needs.

hint.css - A CSS only tooltip library for your lovely websites.

  •    CSS

hint.css is written as a pure CSS resource using which you can create cool accessible tooltips for your web app. It does not rely on JavaScript but rather uses aria-label/data- attribute*, pseudo elements, content property and CSS3 transitions to create the tooltips. Also it uses BEM naming convention particularly for the modifiers.

pure - A set of small, responsive CSS modules that you can use in every web project.

  •    HTML

Now, all Pure CSS files should be built into the `pure/build/` directory. Allfiles that are in this build directory are also available on the CDN. The namingconventions of the files in the `build/` directory follow these rules:* `[module]-core.css`: The minimal set of styles, ususally structural, that provide the base on which the rest of the module's styles build.* `[module]-nr.css`: Rollup of `[module]-core.css` + `[module].css` + `[module]-[feature].css` from the `src/[module]/` dir. This i

C::NTR::L

  •    

HCI for audiovisual live performance exploiting physical computing. Transform your standard musical instrument - electric bass, guitar, violin, piano etc - in an augmented tool, an audiovideo controller without exploiting any specific ext. hardware.

XEFFEX

  •    

XEFFEX is a play off the piano gadget. The shapes were manipulated and the sounds are set to different effects. The end goal was too have the pads play a sound and execute a program the user can pre-choose. The options menu allows quit access to your files.

MDA.Net

  •    Silverlight

MDA.Net is the .Net/Silverlight port of mda-vst instruments and effects. Currently it includes just the MDA piano and an overdrive with basic interfaces to build on. Just PM me if you have some time to help - we are in no rush, aim to migrate everything one-by-one.

veejay

  •    C

Veejay is a visual instrument and real-time video sampler. It allows you to quot;playquot; the video like you would play a piano. While playing, you can record the resulting video directly to disk (video sampling).

Midi Sheet Music

  •    CSharp

Midi Sheet Music is a free program that plays MIDI music files while highlighting the piano notes and sheet music notes. Works on Windows, Mac OS X, and Ubuntu Linux.

MidiLearn

  •    C++

MidiLearn is a program to learn how to play music without needing to know how to read a score. Using common MID or KAR files, one of the tracks is muted and displayed in a custom piano roll view created to be easy and fast to read.