Pianika

https://github.com/zahrahssy/pianika
Admin
No description available in the provided content.
Tokens:3,730
Snippets:12
Trust Score:4.3
Update:11 months ago
Show doc for...
Tokens:
Raw
### Initialize and Play Audio Notes with JavaScript

Source: https://context7.com/zahrahssy/pianika/llms.txt

Creates Audio objects for 21 musical notes and provides a playAudio() function that resets and plays specific notes. Accepts note identifiers as strings, stops any playing instance, resets to start position, and begins playback. Requires pre-recorded MP3 files and only supports predefined note mappings.

```javascript
// Initialize audio objects for each note
let audioDo = new Audio("Do.mp3");
let audioRe = new Audio("Re.mp3");
let audioMi = new Audio("Mi.mp3");

// Play a specific note with proper reset
function playAudio(sound){
    if(sound === "do"){
        audioDo.pause();
        audioDo.currentTime = 0;
        audioDo.play();
    }
    if(sound === "re"){
        audioRe.pause();
        audioRe.currentTime = 0;
        audioRe.play();
    }
    if(sound === "mi"){
        audioMi.pause();
        audioMi.currentTime = 0;
        audioMi.play();
    }
    // ... continues for all 21 notes
}

// Usage: Call from button click or keyboard event
playAudio("do");  // Plays Do note
playAudio("mii"); // Plays Mi note (second octave)
```

--------------------------------

### Initialize Audio Files for Virtual Piano Notes

Source: https://context7.com/zahrahssy/pianika/llms.txt

Creates Audio objects for 21 MP3 files representing different octaves of musical notes. Implements a naming pattern for note mapping and provides usage examples for playback. Requires local MP3 files (~27-30KB each) and Web Audio API support. Files follow pattern: Do.mp3, Doo.mp3, Dooo.mp3 for multiple octaves.

```JavaScript
// Audio file mapping structure
let audioDo = new Audio("Do.mp3");      // First octave Do
let audioDoo = new Audio("Doo.mp3");    // Second octave Do
let audioDooo = new Audio("Dooo.mp3");  // Third octave Do

let audioRe = new Audio("Re.mp3");      // First octave Re
let audioRee = new Audio("Ree.mp3");    // Second octave Re
let audioReee = new Audio("Reee.mp3");  // Third octave Re

// Pattern continues for: Mi, Fa, Sol, La, Si
// Total files: 21 MP3 files
// File size: ~27-30KB per file

// Usage example:
// audioDo.play();     // Plays first octave Do note
// audioDoo.play();    // Plays second octave Do note
```

--------------------------------

### Create HTML Structure for Virtual Piano Interface

Source: https://context7.com/zahrahssy/pianika/llms.txt

Defines the document structure with meta tags, Bootstrap CSS links, and container elements for the piano interface. Sets up the basic DOM hierarchy including head metadata, body layout, and placeholder for interactive elements. Dependencies include Bootstrap 4.0.0 via CDN and a local stylesheet.

```HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="stile.css">
    <title>Piano</title>
</head>
<body class="button">
    <div class="piano-wrapper">
        <div class="text">
            <h1>Pianika</h1>
            <h4>Zahrah Syifa Zain</h4>
        </div>
        <div class="piano">
            <!-- 21 button elements representing musical notes -->
        </div>
    </div>

    <script>
        // Audio initialization and event handlers
    </script>
</body>
</html>

<!-- Expected output: Centered black rounded container with white buttons on gradient background -->
```

--------------------------------

### Create Piano Buttons with HTML and Bootstrap

Source: https://context7.com/zahrahssy/pianika/llms.txt

Generates clickable button interface for piano keys using Bootstrap styling. Each button triggers playAudio() through inline onclick handlers with specific note identifiers. Provides visual UI for three octaves of musical notes, depends on Bootstrap CSS and JavaScript playAudio function.

```html
<!-- First octave buttons -->
<button type="button" class="btn btn-outline-dark" id="do" onclick="playAudio('do')">Do</button>
<button type="button" class="btn btn-outline-dark" id="re" onclick="playAudio('re')">Re</button>
<button type="button" class="btn btn-outline-dark" id="mi" onclick="playAudio('mi')">Mi</button>
<button type="button" class="btn btn-outline-dark" id="fa" onclick="playAudio('fa')">Fa</button>
<button type="button" class="btn btn-outline-dark" id="sol" onclick="playAudio('sol')">Sol</button>
<button type="button" class="btn btn-outline-dark" id="la" onclick="playAudio('la')">La</button>
<button type="button" class="btn btn-outline-dark" id="si" onclick="playAudio('si')">Si</button>

<!-- Second octave buttons -->
<button type="button" class="btn btn-outline-dark" id="do1" onclick="playAudio('doo')">Do</button>
<button type="button" class="btn btn-outline-dark" id="re1" onclick="playAudio('ree')">Re</button>

<!-- Third octave buttons -->
<button type="button" class="btn btn-outline-dark" id="do2" onclick="playAudio('dooo')">Do</button>

<!-- Expected behavior: Click any button to hear the corresponding musical note -->
```

--------------------------------

### JavaScript Pianika Audio Playback and Keypress Handling

Source: https://github.com/zahrahssy/pianika/blob/master/index.html

This JavaScript code initializes audio objects for musical notes and defines a function to play them. It also sets up an event listener to play specific notes when corresponding keyboard keys are pressed. Dependencies include MP3 audio files for each note.

```javascript
let audioDo = new Audio("Do.mp3"); let audioRe = new Audio("Re.mp3"); let audioMi = new Audio("Mi.mp3"); let audioFa = new Audio("Fa.mp3"); let audioSol = new Audio("Sol.mp3"); let audioLa = new Audio("La.mp3"); let audioSi = new Audio("Si.mp3"); let audioDoo = new Audio("Doo.mp3"); let audioRee = new Audio("Ree.mp3"); let audioMii= new Audio("Mii.mp3"); let audioFaa = new Audio("Faa.mp3"); let audioSoll = new Audio("Soll.mp3"); let audioLaa = new Audio("Laa.mp3"); let audioSii = new Audio("Sii.mp3"); let audioDooo = new Audio("Dooo.mp3"); let audioReee = new Audio("Reee.mp3"); let audioMiii = new Audio("Miii.mp3"); let audioFaaa = new Audio("Faaa.mp3"); let audioSolll = new Audio("Solll.mp3"); let audioLaaa = new Audio("Laaa.mp3"); let audioSiii = new Audio("Siii.mp3"); function playAudio(sound){ if(sound === "do"){
    audioDo.pause(); audioDo.currentTime = 0;
    audioDo.play();
  } if(sound === "re"){
    audioRe.pause(); audioRe.currentTime = 0;
    audioRe.play();
  } if(sound === "mi"){
    audioMi.pause(); audioMi.currentTime = 0;
    audioMi.play();
  } if(sound === "fa"){
    audioFa.pause(); audioFa.currentTime = 0;
    audioFa.play();
  } if(sound === "sol"){
    audioSol.pause(); audioSol.currentTime = 0;
    audioSol.play();
  } if(sound === "la"){
    audioLa.pause(); audioLa.currentTime = 0;
    audioLa.play();
  } if(sound === "si"){
    audioSi.pause(); audioSi.currentTime = 0;
    audioSi.play();
  } if(sound === "doo"){
    audioDoo.pause(); audioDoo.currentTime = 0;
    audioDoo.play();
  } if(sound === "ree"){
    audioRee.pause(); audioRee.currentTime = 0;
    audioRee.play();
  } if(sound === "mii"){
    audioMii.pause(); audioMii.currentTime = 0;
    audioMii.play();
  } if(sound === "faa"){
    audioFaa.pause(); audioFaa.currentTime = 0;
    audioFaa.play();
  } if(sound === "soll"){
    audioSoll.pause(); audioSoll.currentTime = 0;
    audioSoll.play();
  } if(sound === "laa"){
    audioLaa.pause(); audioLaa.currentTime = 0;
    audioLaa.play();
  } if(sound === "sii"){
    audioSii.pause(); audioSii.currentTime = 0;
    audioSii.play();
  } if(sound === "dooo"){
    audioDooo.pause(); audioDooo.currentTime = 0;
    audioDooo.play();
  } if(sound === "reee"){
    audioReee.pause(); audioReee.currentTime = 0;
    audioReee.play();
  } if(sound === "miii"){
    audioMiii.pause(); audioMiii.currentTime = 0;
    audioMiii.play();
  } if(sound === "faaa"){
    audioFaaa.pause(); audioFaaa.currentTime = 0;
    audioFaaa.play();
  } if(sound === "solll"){
    audioSolll.pause(); audioSolll.currentTime = 0;
    audioSolll.play();
  } if(sound === "laaa"){
    audioLaaa.pause(); audioLaaa.currentTime = 0;
    audioLaaa.play();
  } if(sound === "siii"){
    audioSiii.pause(); audioSiii.currentTime = 0;
    audioSiii.play();
  } }

document.addEventListener("keypress", function(e){
  console.log(e.keyCode);
  if(e.keyCode === 113){
    playAudio("do");
  } if(e.keyCode === 119){
    playAudio("re");
  } if(e.keyCode === 101){
    playAudio("mi");
  } if(e.keyCode === 114){
    playAudio("fa");
  } if(e.keyCode === 116){
    playAudio("sol");
  } if(e.keyCode === 121){
    playAudio("la");
  } if(e.keyCode === 117){
    playAudio("si");
  } if(e.keyCode === 105){
    playAudio("doo");
  } if(e.keyCode === 111){
    playAudio("ree");
  } if(e.keyCode === 112){
    playAudio("mii");
  } if(e.keyCode === 97){
    playAudio("faa");
  } if(e.keyCode === 115){
    playAudio("soll");
  } if(e.keyCode === 100){
    playAudio("laa");
  } if(e.keyCode === 102){
    playAudio("sii");
  } if(e.keyCode === 103){
    playAudio("dooo");
  } if(e.keyCode === 104){
    playAudio("reee");
  } if(e.keyCode === 106){
    playAudio("miii");
  } if(e.keyCode === 107){
    playAudio("faaa");
  } if(e.keyCode === 108){
    playAudio("solll");
  } if(e.keyCode === 122){
    playAudio("laaa");
  } if(e.keyCode === 120){
    playAudio("siii");
  } 
});
```

--------------------------------

### Map Keyboard Keys to Piano Notes with JavaScript

Source: https://context7.com/zahrahssy/pianika/llms.txt

Implements keypress event listener to map computer keyboard keys to musical notes. Translates keyCode values into note identifiers and triggers playAudio() for real-time playback. Supports multiple octaves through letter key mappings, requires active document focus and predefined key-to-note configuration.

```javascript
// Keyboard mapping for piano keys
document.addEventListener("keypress", function(e){
    console.log(e.keyCode);

    // First octave mapping
    if(e.keyCode === 113){ // q
        playAudio("do");
    }
    if(e.keyCode === 119){ // w
        playAudio("re");
    }
    if(e.keyCode === 101){ // e
        playAudio("mi");
    }
    if(e.keyCode === 114){ // r
        playAudio("fa");
    }
    if(e.keyCode === 116){ // t
        playAudio("sol");
    }
    if(e.keyCode === 121){ // y
        playAudio("la");
    }
    if(e.keyCode === 117){ // u
        playAudio("si");
    }

    // Second octave mapping
    if(e.keyCode === 105){ // i
        playAudio("doo");
    }
    if(e.keyCode === 111){ // o
        playAudio("ree");
    }
    if(e.keyCode === 112){ // p
        playAudio("mii");
    }

    // Additional keys: a, s, d, f, g, h, j, k, l, z, x
    // Expected output: Musical notes play in real-time as keys are pressed
});

// Example usage:
// Press 'q' -> Plays Do (first octave)
// Press 'i' -> Plays Do (second octave)
// Press 'g' -> Plays Do (third octave)
```

--------------------------------

### Style Virtual Piano Interface with CSS

Source: https://context7.com/zahrahssy/pianika/llms.txt

Implements gradient backgrounds, flexbox layout, and hover effects for the piano interface. Defines responsive styling for the piano container, buttons, and text elements. Uses modern CSS features including gradients, flexbox, and pseudo-selectors for interactive feedback.

```CSS
body{
    background-image: linear-gradient(purple, pink);
}

.piano-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #000000;
    border-radius: 40px;
}

.piano{
    display: flex;
    height: 200px;
    width: 800px;
    justify-content: center;
    gap: 3px;
}

.piano > button:hover{
    background-color: grey;
    cursor: pointer;
}

.btn-outline-dark{
    height: 150px;
    background-color: #FFFFFF;
}

h1 {
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-top: 50px;
    font-size: 65px;
}

/* Expected result: Modern, clean interface with smooth hover effects */
```
Tokens:
Raw