Skip to content

Commit

Permalink
Merge pull request #6 from urobot2011/bata-V1.0.2
Browse files Browse the repository at this point in the history 
Bata v1.0.2 to main!
  • Loading branch information
@urobot2011
urobot2011 authored Dec 30, 2022
2 parents 87fa0b1 + aa88d0e commit cac2293
Show file tree
Hide file tree
Showing 3 changed files with 193 additions and 101 deletions.
18 changes: 9 additions & 9 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
# Kalimba-sheet-music-writer 1.0.1
# Kalimba-sheet-music-writer 1.0.2
## Usage:
1. Select a file with the file selector.
2. Click Play!
That's it!
## Release notes:
* Remove jQuery
* Minor code fixes
<!--
* Notes setting function
* linked with the keyboard
* ...
## Updating:
- [x] Remove jQuery
- [x] Minor code fixes
- [ ] ...
-->
- [x] Notes setting function
- [x] linked with the keyboard
- [ ] Automatically adjust note length
- [ ] Works with Master Keyboard
## example:
<!--[Example page](https://urobot2011.github.io/Kalimba-sheet-music-writer/ "Example page")-->
[Example page](https://urobot2011.github.io/Kalimba-sheet-music-writer/ "Example page")
[Example page](https://urobot2011.github.io/Kalimba-sheet-music-writer-example-page/V1.0.2/ "Example page")
#### Kalimba-sheet-music-writer-example-page repository here:
[Kalimba-sheet-music-writer-example-page](https://github.com/urobot2011/Kalimba-sheet-music-writer-example-page "Kalimba-sheet-music-writer-example-page")
## Libraries used:
Expand Down
200 changes: 122 additions & 78 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,82 +1,126 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kalimba sheet music writer V1.0.1</title>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css'>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Kalimba sheet music writer V1.0.1</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item" id="select-file">
<div class="input-group">
<input type="file" class="form-control" aria-label="Upload" onchange="loadFile()" onclick="Player.stop()" accept="audio/mid">
<button class="btn btn-primary" id="play-button" disabled="disabled">Play</button>
<button class="btn btn-secondary" id="stop-button">Stop</button>
<button class="btn btn-danger" id="reset-button">Reset</button>
</div>
</li>
<p style="visibility: hidden;"> mode </p>
<li class="nav-item">
<input type="checkbox" class="btn-check" id="lesson_mode" autocomplete="off">
<label class="btn btn-outline-info" for="lesson_mode">lesson mode</label>
</li>
<li class="nav-item" id="lesson_stepnumber"></li>
<li class="nav-item" id="lesson_step"></li>
</ul> Tempo: <span id="tempo-display"></span> bpm <br />
<input type="range" class="tempo" min="10" max="200"><!-- form-range onchange="Player.setTempo(this.value);document.getElementById('tempo-display').innerHTML = this.value;" -->
</div>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kalimba sheet music writer V1.0.1</title>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css'>
<link rel="stylesheet" href="./style.css">
</head>

<body>
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Kalimba sheet music writer V1.0.2</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item" id="select-file">
<div class="input-group">
<input type="file" class="form-control" aria-label="Upload" onchange="loadFile()" onclick="Player.stop()" accept="audio/mid">
<button class="btn btn-primary" id="play-button" disabled="disabled">Play</button>
<button class="btn btn-secondary" id="stop-button">Stop</button>
<button class="btn btn-danger" id="reset-button">Reset</button>
</div>
</li>
<p style="visibility: hidden;">
mode
</p>
<li class="nav-item">
<input type="checkbox" class="btn-check" id="lesson_mode" autocomplete="off">
<label class="btn btn-outline-info" for="lesson_mode">lesson mode</label>
</li>
<li class="nav-item" id="lesson_stepnumber">
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
More settings
</a>
<ul class="dropdown-menu">
<li>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="show_numbers">
<label class="form-check-label" for="show_numbers">
Show numbers
</label>
</div><!-- dropdown-item shownumbersbuttondiv-->
</li>
<li>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="keyboard_layout">
<label class="form-check-label" for="keyboard_layout">
Keyboard layout to piano
</label>
</div><!-- dropdown-item shownumbersbuttondiv-->
</li>
<li>
</li>
</ul>
</li>
</ul>
Tempo: <span id="tempo-display"></span> bpm<br />
<input type="range" class="tempo" min="10" max="200"><!-- form-range onchange="Player.setTempo(this.value);document.getElementById('tempo-display').innerHTML = this.value;" -->
</div>
</nav>
<p id="loading">Loading soundfont...</p>
<div id="events" class="well"></div>
<animation_body>
<key-note-animation>
<!-- <div data-key-note="D6"></div><div data-key-note="B5"></div><div data-key-note="G5"></div><div data-key-note="E5"></div><div data-key-note="C5"></div><div data-key-note="A4"></div><div data-key-note="F4"></div><div data-key-note="D4"></div><div data-key-note="C4"></div><div data-key-note="E4"></div><div data-key-note="G4"></div><div data-key-note="B4"></div><div data-key-note="D5"></div><div data-key-note="F5"></div><div data-key-note="A5"></div><div data-key-note="C6"></div><div data-key-note="E6"></div> -->
</key-note-animation>
</animation_body>
<br>
<br>
<kalimba_body>
<bottom-pad id="kalimba">
<div class="key" data-note="D6" data-key="2"></div>
<div class="key" data-note="B5" data-key="7"></div>
<div class="key" data-note="G5" data-key="5"></div>
<div class="key" data-note="E5" data-key="3"></div>
<div class="key" data-note="C5" data-key="1"></div>
<div class="key" data-note="A4" data-key="6"></div>
<div class="key" data-note="F4" data-key="4"></div>
<div class="key" data-note="D4" data-key="2"></div>
<div class="key" data-note="C4" data-key="1"></div>
<div class="key" data-note="E4" data-key="3"></div>
<div class="key" data-note="G4" data-key="5"></div>
<div class="key" data-note="B4" data-key="7"></div>
<div class="key" data-note="D5" data-key="2"></div>
<div class="key" data-note="F5" data-key="4"></div>
<div class="key " data-note="A5" data-key="6"></div>
<div class="key" data-note="C6" data-key="1"></div>
<div class="key last-key" data-note="E6" data-key="3"></div>
<bottom-pad></bottom-pad>
<top-pad></top-pad>
<bottom-pad class="last-pad"></bottom-pad>
<div class="logo">Kalimba sheet music writer <br>1.0.1 </div>
</div>
</kalimba_body>
<div data-note="NO"></div>
<!-- partial -->
<script src='https://urobot2011.github.io/Kalimba-sheet-music-writer/lib/midiplayer.js'></script>
<script src='https://urobot2011.github.io/Kalimba-sheet-music-writer/lib/soundfont-player.min.js'></script>
<!--<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js'></script>-->
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js'></script>
<script src="./script.js"></script>
</body>
</div>
</nav>
<p id="loading">Loading soundfont...</p>
<div id="events" class="well"></div>
<animation_body>
<key-note-animation>
<!-- <div data-key-note="D6"></div>
<div data-key-note="B5"></div>
<div data-key-note="G5"></div>
<div data-key-note="E5"></div>
<div data-key-note="C5"></div>
<div data-key-note="A4"></div>
<div data-key-note="F4"></div>
<div data-key-note="D4"></div>
<div data-key-note="C4"></div>
<div data-key-note="E4"></div>
<div data-key-note="G4"></div>
<div data-key-note="B4"></div>
<div data-key-note="D5"></div>
<div data-key-note="F5"></div>
<div data-key-note="A5"></div>
<div data-key-note="C6"></div>
<div data-key-note="E6"></div> -->
</key-note-animation>
</animation_body>
<br><br>
<kalimba_body>
<bottom-pad id="kalimba">
<div class="key" data-note="D6" data-key="2"></div>
<div class="key" data-note="B5" data-key="7"></div>
<div class="key" data-note="G5" data-key="5"></div>
<div class="key" data-note="E5" data-key="3"></div>
<div class="key" data-note="C5" data-key="1"></div>
<div class="key" data-note="A4" data-key="6"></div>
<div class="key" data-note="F4" data-key="4"></div>
<div class="key" data-note="D4" data-key="2"></div>
<div class="key" data-note="C4" data-key="1"></div>
<div class="key" data-note="E4" data-key="3"></div>
<div class="key" data-note="G4" data-key="5"></div>
<div class="key" data-note="B4" data-key="7"></div>
<div class="key" data-note="D5" data-key="2"></div>
<div class="key" data-note="F5" data-key="4"></div>
<div class="key " data-note="A5" data-key="6"></div>
<div class="key" data-note="C6" data-key="1"></div>
<div class="key last-key" data-note="E6" data-key="3"></div>
<bottom-pad></bottom-pad>
<top-pad></top-pad>
<bottom-pad class="last-pad"></bottom-pad>
<div class="logo">Kalimba sheet music writer<br>1.0.2</div>
</div>
</kalimba_body>
<div data-note="NO"></div>
<script src='https://urobot2011.github.io/Kalimba-sheet-music-writer/lib/midiplayer.js'></script>
<script src='https://urobot2011.github.io/Kalimba-sheet-music-writer/lib/soundfont-player.min.js'></script>
<!--<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js'></script>-->
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js'></script>
<script src="./script.js"></script>
</body>

</html>
76 changes: 62 additions & 14 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,48 @@ var stopbuttondiv = document.querySelector('#stop-button');
var resetbuttondiv = document.querySelector('#reset-button');
var tempobuttondiv = document.querySelector('.tempo');

var shownumbersbuttondiv = document.querySelector('#show_numbers');
var keyboardlayoutbuttondiv = document.querySelector('#keyboard_layout');

window.addEventListener("keydown", function (e) {
var key = notetonote(keyboardtonote(e.key));
if (keyboardlayoutbuttondiv.checked) {
key = keyboardtonote(e.key);
}
console.log(key);
var notediv = document.querySelector('[data-note="' + key + '"]');
notediv.classList.add("key_active");
instrument.play(key);
});

window.addEventListener("keyup", function (e) {
var key = notetonote(keyboardtonote(e.key));
if (keyboardlayoutbuttondiv.checked) {
key = keyboardtonote(e.key);
}
console.log(key);
var notediv = document.querySelector('[data-note="' + key + '"]');
notediv.classList.remove("key_active");
});

var notetonumber = function(note) {
var notes = ["C4", "D4", "E4", "F4", "G4", "A4", "B4", "C5", "D5", "E5", "F5", "G5", "A5", "B5", "C6", "D6", "E6"];
var notenumbers = ["1", "2", "3", "4", "5", "6", "7", "1", "2", "3", "4", "5", "6", "7", "1", "2", "3"];
return notenumbers[notes.indexOf(note)];
}

var keyboardtonote = function(keyboard) {
var keyboards = ["`", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "-", "=", "Backspace", "Insert", "Home", "PageUp"];
var notes = ["C4", "D4", "E4", "F4", "G4", "A4", "B4", "C5", "D5", "E5", "F5", "G5", "A5", "B5", "C6", "D6", "E6"];
return notes[keyboards.indexOf(keyboard)];
}

var notetonote = function(note) {
var notes = ["C4", "D4", "E4", "F4", "G4", "A4", "B4", "C5", "D5", "E5", "F5", "G5", "A5", "B5", "C6", "D6", "E6"];
var notes1 = ["D6", "B5", "G5", "E5", "C5", "A4", "F4", "D4", "C4", "E4", "G4", "B4", "D5", "F5", "A5", "C6", "E6"];
return notes1[notes.indexOf(note)];
}

var changeTempo = function(tempo) {
Player.tempo = tempo;
}
Expand All @@ -38,7 +80,7 @@ var pause = function() {
}

var stop = function() {
if(lesson_modediv.checked){
if (lesson_modediv.checked) {
lesson_modediv.checked = false;
clearTimeout(timeoutId);
clearTimeout(timeoutId2);
Expand Down Expand Up @@ -87,9 +129,15 @@ var playmidi = function(event) {
Player.setTempo(tempodiv.value);
if (event.name == 'Note on' && event.velocity > 0) {
//$('key-note-animation').append('<div data-key-note="' + event.noteName + '"></div>');
keynoteanimationdiv.insertAdjacentHTML("afterbegin", `
if (shownumbersbuttondiv.checked) {
keynoteanimationdiv.insertAdjacentHTML("afterbegin", `
<div data-key-note="` + event.noteName + `"><span class="key-text">` + notetonumber(event.noteName) + `</span></div>
`);
} else {
keynoteanimationdiv.insertAdjacentHTML("afterbegin", `
<div data-key-note="` + event.noteName + `"></div>
`);
}
}
setTimeout(function() {
if (event.name == 'Note on') {
Expand All @@ -110,7 +158,7 @@ var playmidi = function(event) {
}

var lesson_mode = function(event) {
if(lesson_modediv.checked){
if (lesson_modediv.checked) {
playmidi(event);
timeoutId = setTimeout(function() {
pause();
Expand All @@ -125,10 +173,10 @@ var lesson_mode = function(event) {
// playmidi(event);
// }, 12000);
timeoutId2 = setTimeout(function() {
play();
play();
}, 7500);
}
if(!lesson_modediv.checked){
if (!lesson_modediv.checked) {
clearTimeout(timeoutId);
clearTimeout(timeoutId2);
clearTimeout(timeoutId3);
Expand All @@ -143,13 +191,13 @@ Soundfont.instrument(ac, 'kalimba').then(function(instrumentnow) {
instrument = instrumentnow;
loadingdiv.style.display = 'none';
selectfilediv.style.display = 'block';

keydivs.forEach((key) => {
key.addEventListener("click", function(e) {
instrument.play(e.target.dataset.note.replace(/C-1/gi, 'C4')); //.replace(/C-1/gi, 'C4')
});
});

loadFile = function() {
Player.stop();
var file = document.querySelector('input[type=file]').files[0];
Expand All @@ -161,26 +209,26 @@ Soundfont.instrument(ac, 'kalimba').then(function(instrumentnow) {
playmidi(event);
lesson_mode(event);
});

Player.loadArrayBuffer(reader.result);

playbuttondiv.removeAttribute('disabled');

play();
}, false);
}

loadDataUri = function(dataUri) {
bool1 = 0;
Player = new MidiPlayer.Player(function(event) {
playmidi(event);
lesson_mode(event);
});

Player.loadDataUri(dataUri);

playbuttondiv.removeAttribute('disabled');

}
loadDataUri(We_Wish_Merry_Christma);
});
Expand Down

0 comments on commit cac2293

Please sign in to comment.