reality3d / 3d-piano-player Goto Github PK
View Code? Open in Web Editor NEW3D Piano player demo. Uses three.js and MIDI.js
License: MIT License
3D Piano player demo. Uses three.js and MIDI.js
License: MIT License
If yes, can you tell me how? I've tried to add onDocumentMousedown but it doesn't work :( . Thanks in advance.
I have download the demo, but I can't konw how to see the effect in the local environment. Is there some blogs or articles about how to realize it ?
This is a feature request. Although it should be quite simply, js is not my native language to do it myself :/
The song "Sonata No. 11 A major (Alla Turca), Mozart" actually play the first movement of Sonata No. 11 A major (K331). The Alla Turca is the thrid movement of K331.
MIDI.loadPlugin({
targetFormat: "ogg",
instrument: "orchestra_hit",
callback: function () {
MIDI.Player.timeWarp = 1.0; // speed the song is played back
MIDI.Player.loadFile("midi/" + controls.song);
MIDI.Player.addListener(function (data) {
var pianoKey = data.note - MIDI.pianoKeyOffset - 3;
if (data.message === 144) {
key_status("_" + pianoKey, keyState.note_on);
}
else {
key_status("_" + pianoKey, keyState.note_off);
}
});
// Close the MIDI loader widget and open the GUI
MIDI.loader.stop();
songsToFiles = {
"Game Of Thrones Theme, Ramin Djawadi": "game_of_thrones.mid",
"Mario Overworld Theme (Super Mario Bros 3), Koji Kondo": "mario_-_overworld_theme.mid",
"He's a Pirate (Pirates of the Caribbean), Klaus Badelt": "hes_a_pirate.mid",
"Hedwigs Theme (Harry Potter), John Williams": "hedwigs_theme.mid",
"Something There (Beauty and the Beast), Alan Menken": "something_there.mid",
"Cruel Angel Thesis (Neon Genesis Evangelion)": "cruel_angel__s_thesis.mid",
"Me cuesta tanto olvidarte (Mecano)": "me_cuesta.mid",
"Sonata No. 14 C# minor (Moonlight), Beethoven": "mond_1.mid",
"For Elise, Beethoven": "for_elise_by_beethoven.mid",
"Asturias (Leyenda), Albeniz": "alb_se5_format0.mid",
"Aragon (Fantasia), Albeniz": "alb_se6.mid",
"Prelude and Fugue in C major BWV 846, Bach": "bach_846.mid",
"Fantasia C major, Schubert": "schub_d760_1.mid",
"Sonata No. 16 C major, Mozart": "mz_545_1.mid",
"Sonata No. 11 A major (K331, First Movement), Mozart": "mz_331_1.mid",
"March - Song of the Lark, Tchaikovsky": "ty_maerz.mid",
"Piano Sonata in C major, Hoboken, Haydn": "haydn_35_1.mid",
"Etudes, Opus 25, Chopin": "chpn_op25_e1.mid",
"Polonaise Ab major, Opus 53, Chopin": "chpn_op53.mid",
"No. 2 - Oriental, Granados": "gra_esp_2.mid",
"Bohemian Rhapsody, Queen": "bohemian1.mid",
};
var gui = new dat.GUI({ width: 625 });
//gui.add(controls, 'key_attack_time', 2.0 , 40.0);
//gui.add(controls, 'key_max_rotation',0.2 , 1.0);
var song = gui.add(controls, 'song', songsToFiles);
var noteOnColorControl = gui.addColor(controls, 'noteOnColor');
noteOnColorControl.onChange(function (value) {
noteOnColor = new THREE.Color().setRGB(controls.noteOnColor[0] / 256.0, controls.noteOnColor[1] / 256.0, controls.noteOnColor[2] / 256.0);;
});
song.onChange(function (value) {
MIDI.Player.stop();
MIDI.Player.loadFile("midi/" + value, MIDI.Player.start);
});
// make sure to remove any key pressed when changing the octave
var octave = gui.add(controls, 'octave', 0, 4).step(1);
octave.onChange(function (value) {
for (keyCode in keys_down) {
var note = keyCode_to_note(keyCode);
key_status(note, keyState.note_off);
}
});
gui.add(controls, 'play');
gui.add(controls, 'stop');
}
});
};
How would you go about it on this because all my attempts haven't been working.
Hi!
When I'm playing, for example, E & G & B - it's working just fine.
Or E & Gb & B.
But, when I'm trying to play E & G# & B - at least one of notes doesn't press.
Firefox 36.0 for linux.
Tried with chromium browser - 3d-piano doesn't work at all.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.