<!---
         .iLU1L:....   sL  .   BB                                                          sBBBBBBBrBBB.  :YQBBBBBi                            
               .SQQP2r:         LBQZBBbvi.DB..U                                                    :BBBBBBqKBBBBBB.       :gBBg                        
            iZBq:                BDSr    .ivILBB::                                              .7BBBBM:BBr 7BBB               jBD.                    
          7dP.                    g1         rBBBYB.7q..                                     :gBBXBBB   r    BB                  :gP                   
        iJ:                       .:           BBBBBBBBBBBj                              :jBBBBBBQjB         gY                     1L                 
      .i                                        BBBISv.rYBBBBBBQ5Yv                     BBZBS   BBB          M                        .7               
     :.                                         .BB        BEBBBBBBB                   BBBR.    iB1                                                    
                                                 .B           BBBBBBB.     .ZBbB1    vBB        PB                                                     
   

                                            :L        .  DB:BBBBS    IBBBBBi idB5        .S                                                      
                                                                7     Pr5JPi.BBBBBBg7S         :                                                       
                                                                 vBdBBBBBBBBBBZBBS                                                               
                                                                     BBBI QBBBvZBBBBBB:                                                                
                                                                  BBBR7KBBM7ZBBBBBBB                                                                
                                                                    :BBB..BBBBBBBBQ  KBB                                                               
                                                                   :BBD  BBBBBBBB    JBr                                                               
                                                                   QBB  BBQBBBBBBQ    BB                                                               
                                                                  .BB: BBBBQvBBBBB.   :rr                                                              
                                                                  BBB  dB U. BBBBB    iBB.                                                             
                                                                  BB   BBX7U BBBBg    :BB:                                                             
                                                                  BB  DBBBLBBRBBBB     bBZ                                                             
                                                                 7BB BBBBBB1   BBBJ    jB7                                                             
                                                                  BB BBBBBB    :BBB    rB.                                                             
                                                                  QK BBBBB      BBBX   rB                                                              
                                                                  BB SZBBB       BBB   BB                                                              
                                                                  BBB rBBQ       dBBi bBB                                                              
                                                                  BB :vBBBP      BBBriQBB                                                              
                                                                   BBrr7MB.     .BBB rBBR                                                              
                                                                       ZqB      gBB  .I.                                                               
                                                                        BBv    PBB                                                                     
                                                                        :BQ    BBB                                                                     
                                                                         BBr    YB                                                                     
                                                                         QrK  .rE1                                                                     
                                                                         : Xi   r.                                                                     
                                                                         BLL:   i                                                                      
                                                                          s.    i                                                                      
                                       ────────────────────────────────────────────────────────────────────────────
                                        ▓│              ...::[ SCROLL DOWN TO VIEW SOURCE ]::...                 │▓
                                        ▓│──────────────────────────────────────────────────────────────────────│▓
                                       ──────┘         ░░ (Incase curiosity kills the cat): ░░            └──────
                                         │                                                                      │
                                         │        document       │
                                         │                                                                      │
                                         │      “To my Loveinge good ffrend & contreymann Mr. Wm Shackespere,” dated “ffrom the Bell in Carter Lane the 25 October 1598” and signed “Ryc. Quyney.”      │
                                         └──────────────────────────────────────────────────────────────────────┘


╠───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╣
║--------------------------------------------------------------DREAMWEAVER-----------------------------------------------------------║
╠───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╣
║                               *      *           *    *      *       *         *              *            *        *        *      * ║
║    *      *         *                 *    *            *        *        *           *   *      *     *       *         *       *    ║
║                *          *      *                *         *         *    _,'|   *         _.-''``-...___..--';)    *      *         ║
║   *    *   *                           *      *         *        *        /_ \'.      __..-' ,      ,--...--'''                   *   ║
║                    *           *     *     *        *        *        *  <\    .`--'''       `     /'           *      *       *      ║
║       *      *            *                      *       *        *       `-';'               ;   ; ;    *    *                       ║
║  *      *                      *    *    *    *               *     __...--''     ___...--_..'  .;.'              *     *          *  ║
║                    *   *                             *     *    *  (,__....----'''       (,..--''         *                   *       ║
║    *       *    *             *        ╔═══════════════════════════════════════════════════════════╗  *          *     *              ║
║                        *           *   ║                                                           ║        *               *    *    ║
║        /\         *       /\  *        ║   FIRST WITCH 
When shall we three meet again?
In thunder, lightning, or in rain?
SECOND WITCH 
When the hurly-burly’s done,
When the battle’s lost and won.
THIRD WITCH 
That will be ere the set of sun.
FIRST WITCH 
Where the place?
SECOND WITCH  Upon the heath.
THIRD WITCH 
There to meet with Macbeth.
FIRST WITCH  I come, Graymalkin.
SECOND WITCH  Paddock calls.
THIRD WITCH  Anon.
ALL 
Fair is foul, and foul is fair;
Hover through the fog and filthy air.
They exit. *    *       *               *    ║
║                   *          *         ║                                                           ║                    *             ║
║   *     *    *                         ╚═══════════════════════════════════════════════════════════╝  *        *              *       ║
║                  *      *         *     *         *   *        *         *      *         *    *                    *             *   ║
║ *   *     *                  *       *    *    *         *           *      *        *             *       *            *             ║
║                  *      *                        *   *        *                *           *           *       *            *         ║
║  *      *                       *     *    *            *           *   *            *         *                     *          *     ║
║                *         *         *          *     *      *     *          *    *       *         *      *     *        *            ║
╠───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╣
║--------------------------------------------------------------INFORMATION----------------------------------------------------------║
╠───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╣


	🎬
 --->
<!DOCTYPE html>
<html lang="en" class="👗">
	  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!--ink city layout 007
 -Created by www.inkrealm.info 

 (inspired by desire 
 and the spirit of innovation)
    ja: "私の個人情報を販売しない(カリフォルニア州消費者プライバシー法)",
	Частная личная информация, Informações pessoais privadas, 
Persónulegar upplýsingar, 
Private personal information, ព័ត៌មានផ្ទាល់ខ្លួនឯកជន
	(Verbraucherschutzgesetz der Präfektur Kalifornien)
        en: "Do Not Sell My Info (KKKalifornia)"---> 
 
    <title data-rh="true">www.inkrealm.info </title>
     <meta data-rh="true" name="description" content="A writer's website, featuring an extensive list of films about the craft with posters and original art as well as artifacts. Video and audio downloads. The TWO SKINNY GIRLS often places covers and even new songs on the inkrealm.info/twoskinnygirls page. Inkrealm includes writing software and A unique musical notation appp. A Portal to escape the ordinary. Eclectic and frequently updated."/><meta data-rh="true" property="og:url" content="https://www.inkrealm.info"/><meta data-rh="true" property="og:type" content="website"/><meta data-rh="true" property="og:title" content="INKREALM - writing, music, and the visual arts"/>
<meta http-equiv="onion-location" content="http://ukc5me2fw7qihv4wklsms7h7wd27vxx3tgjrns7eycmjgmbnwwpvucyd.onion" />
	
<meta property="tiktok:app_id" content="@twoskinnygirls" />
<meta name="twitter:site" content="@inkrealm" />
<meta name="slack-app-id" content="f060RUD44R3" />

  <link rel="shortcut icon" href="./Images//favicon.ico" />

<head>
<meta charset="UTF-8">
<title>symphony sketch</title>
   <script src="https://cdn.jsdelivr.net/npm/@tonejs/midi@2.0.28/build/Midi.min.js" type="62f32a5c854dc38e26717c44-text/javascript"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/smufl-fonts/1.39.0/fonts/bravura.css">
   
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Musical&display=swap">
<style>
    body {
        font-family: Arial, sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #1a1a1a;
        color: #f0f0f0;
        padding: 20px;
    }
    #staff-container {
        width: 800px;
        height: 500px;
        background-color: #333;
        border: 1px solid #f0f0f0;
        margin: 20px 0;
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .staff {
        width: 3600px;
        height: 50%;
        position: relative;
    }
    #treble-staff {
        position: absolute;
        top: 0;
    }
    #bass-staff {
        position: absolute;
        bottom: 0;
    }
    .staff-line {
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #f0f0f0;
    }
    .clef, .bass-clef {
        position: absolute;
        left: 10px;
        top: 60px;
        font-size: 120px;
        color: #f0f0f0;
    }
    .note {
        font-family: 'Bravura', 'Noto Musical', sans-serif; /* Ensure font-family is applied */
        font-size: 40px;
        width: 40px;
        height: 40px;
        position: absolute;
        cursor: pointer;
    }
    .note:hover {
        filter: brightness(0.8);
    }
    .note.deletable {
        outline: 2px solid red;
    }
    #controls, #note-controls, #playback-controls {
        margin-bottom: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
    }
    button {
        font-size: 16px;
        padding: 10px 20px;
        margin: 5px;
        cursor: pointer;
        border: none;
        border-radius: 5px;
        background-color: white;
        color: #1a1a1a;
    }
    button:hover {
        background-color: #45a049;
    }
    #clear {
        background-color: #ff6b6b;
    }
    #clear:hover {
        background-color: #ff4757;
    }
    .accidental {
        font-size: 32px;
        position: absolute;
        cursor: pointer;
    }
    #tempo {
        font-size: 16px;
        padding: 5px;
        margin: 5px;
        background-color: #333;
        color: #f0f0f0;
        border: 1px solid #f0f0f0;
    }
    #delete-mode {
        background-color: red;
    }
    #delete-mode:hover {
        background-color: grey;
    }
    #delete-mode.active {
        background-color: pink;
    }
    #playback-arrow {
        position: absolute;
        top: -30px;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 20px solid red;
        transition: left 0.1s linear;
    }
    @font-face {
        font-family: 'Bravura';
        src: url('https://github.com/ghostm68/inktwo/raw/main/fonts/Bravura.otf') format('opentype');
    }
</style>
</head>
<body>
    <h1>symphony sketch</h1>
  <div id="𝅝-controls">
    <button id="𝅝-whole">Whole</button>
    <button id="𝅗𝅥-half">Half</button>
    <button id="𝅘𝅥-quarter">Quarter</button>
    <button id="𝅘𝅥𝅮-eighth">Eighth</button>
    <button id="𝅘𝅥𝅯-sixteenth">Sixteenth</button>
</div>
    <div id="note-controls">
        <button id="natural">Natural</button>
        <button id="sharp">Sharp (♯)</button>
        <button id="flat">Flat (♭)</button>
    </div>
    <div id="playback-controls">
        <button id="play" disabled>Play Notes</button>
        <button id="clear">Clear Staff</button>
        <button id="delete-mode">Delete Mode</button>
        <label for="tempo">Temp oh:</label>
        <input type="number" id="tempo" min="40" max="240" value="120">
        <span id="loading-indicator" style="display: none;">Loading piano sound...</span>
    </div>
    
    <div id="staff-container">
        <div id="treble-staff" class="staff">
            <!-- Staff lines and treble clef will be created with JavaScript -->
        </div>
        <div id="bass-staff" class="staff">
            <!-- Staff lines and bass clef will be created with JavaScript -->
        </div>
    </div>
   <button id="download-midi">Download (coming soon)</button>
    <button id="start-recording">Start Recording</button>
    <button id="stop-recording">Stop Recording</button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js" type="62f32a5c854dc38e26717c44-text/javascript"></script>
    <script type="62f32a5c854dc38e26717c44-text/javascript">
        const trebleStaff = document.getElementById('treble-staff');
        const bassStaff = document.getElementById('bass-staff');
        const trebleNotes = ['F5', 'E5', 'D5', 'C5', 'B4', 'A4', 'G4', 'F4', 'E4', 'D4', 'C4'];
        const bassNotes = ['A3', 'G3', 'F3', 'E3', 'D3', 'C3', 'B2', 'A2', 'G2', 'F2', 'E2'];
        let selectedNote = 'quarter';
        let selectedAccidental = 'natural';
        let melody = [];
        let deleteMode = false;

        const noteSymbols = {
            'whole': '𝅝',
            'half': '𝅗𝅥',
            'quarter': '𝅘𝅥',
            'eighth': '𝅘𝅥𝅮',
            'sixteenth': '𝅘𝅥𝅯'
        };

       document.getElementById('𝅝-whole').addEventListener('click', () => selectedNote = 'whole');
document.getElementById('𝅗𝅥-half').addEventListener('click', () => selectedNote = 'half');
document.getElementById('𝅘𝅥-quarter').addEventListener('click', () => selectedNote = 'quarter');
document.getElementById('𝅘𝅥𝅮-eighth').addEventListener('click', () => selectedNote = 'eighth');
document.getElementById('𝅘𝅥𝅯-sixteenth').addEventListener('click', () => selectedNote = 'sixteenth');

        function createStaffLines(staff) {
            for (let i = 0; i < 5; i++) {
                const line = document.createElement('div');
                line.className = 'staff-line';
                line.style.top = `${80 + i * 40}px`;
                staff.appendChild(line);
            }
        }

        function addClef(staff, clefType) {
            const clef = document.createElement('div');
            clef.className = clefType === 'treble' ? 'clef' : 'bass-clef';
            clef.innerHTML = clefType === 'treble' ? '&#119070;' : '&#119074;';
            staff.appendChild(clef);
        }

        createStaffLines(trebleStaff);
        createStaffLines(bassStaff);
        addClef(trebleStaff, 'treble');
        addClef(bassStaff, 'bass');

    function addNote(x, noteIndex, staff) {
  const note = document.createElement('div');
  note.className = 'note';
  note.style.left = `${x - 20}px`;
  note.style.top = `${noteIndex * 20 + 60}px`;
  note.style.fontSize = '40px'; 

  const noteSymbol = document.createElement('span');
  noteSymbol.textContent = noteSymbols[selectedNote]; // This will now use the correct selectedNote
  noteSymbol.style.lineHeight = '40px';
  noteSymbol.style.display = 'inline-block';
  noteSymbol.style.textAlign = 'center';
  noteSymbol.style.width = '40px';
  noteSymbol.style.height = '40px';
  noteSymbol.style.color = '#f0f0f0';
  note.appendChild(noteSymbol);
           

            if (selectedAccidental !== 'natural') {
                const accidental = document.createElement('div');
                accidental.className = 'accidental';
                accidental.style.left = '-25px';
                accidental.style.top = '-15px';
                accidental.textContent = selectedAccidental === 'sharp' ? '♯' : '♭';
                note.appendChild(accidental);
            }

            staff.appendChild(note);

            let noteName = staff === trebleStaff ? trebleNotes[noteIndex] : bassNotes[noteIndex];
            if (selectedAccidental === 'sharp') {
                noteName += '#';
            } else if (selectedAccidental === 'flat') {
                noteName = noteName.charAt(0) + 'b' + noteName.charAt(1);
            }

            melody.push({ note: noteName, duration: selectedNote, x: x, element: note, staff: staff.id });
        }

        trebleStaff.addEventListener('click', (e) => handleStaffClick(e, trebleStaff));
        bassStaff.addEventListener('click', (e) => handleStaffClick(e, bassStaff));

        function handleStaffClick(e, staff) {
            if (e.target.closest('.note')) {
                if (deleteMode) {
                    deleteNote(e.target.closest('.note'));
                }
                return;
            }

            const rect = staff.getBoundingClientRect();
            const x = e.clientX - rect.left + staff.scrollLeft;
            const y = e.clientY - rect.top;
            const noteIndex = Math.round((y - 60) / 20);
            
            const maxNoteIndex = staff === trebleStaff ? trebleNotes.length : bassNotes.length;
            if (noteIndex >= 0 && noteIndex < maxNoteIndex && !deleteMode) {
                addNote(x, noteIndex, staff);
            }
        }

        function deleteNote(noteElement) {
            noteElement.remove();
            melody = melody.filter(item => item.element !== noteElement);
        }

        function createPlaybackArrow() {
            const arrow = document.createElement('div');
            arrow.id = 'playback-arrow';
            arrow.style.display = 'none';
            trebleStaff.appendChild(arrow);
            return arrow;
        }

        const playbackArrow = createPlaybackArrow();
        let pianoSampler;
        const loadingIndicator = document.getElementById('loading-indicator');
        const playButton = document.getElementById('play');

        loadingIndicator.style.display = 'inline';
        playButton.disabled = true;

        pianoSampler = new Tone.Sampler({
            urls: {
                C4: "C4.mp3",
                "D#4": "Ds4.mp3",
                "F#4": "Fs4.mp3",
                A4: "A4.mp3",
            },
            baseUrl: "https://tonejs.github.io/audio/salamander/",
            onload: () => {
                loadingIndicator.style.display = 'none';
                playButton.disabled = false;
            }
        }).toDestination();

        document.getElementById('play').addEventListener('click', async () => {
            await Tone.start();
            const now = Tone.now();
            let time = now;

            const tempo = parseInt(document.getElementById('tempo').value);
            Tone.Transport.bpm.value = tempo;

            melody.sort((a, b) => a.x - b.x);

            playbackArrow.style.display = 'block';

            melody.forEach(({ note, duration, x, staff }, index) => {
                let noteDuration;
                switch (duration) {
                    case 'whole': noteDuration = '1n'; break;
                    case 'half': noteDuration = '2n'; break;
                    case 'quarter': noteDuration = '4n'; break;
                    case 'eighth': noteDuration = '8n'; break;
                    case 'sixteenth': noteDuration = '16n'; break;
                }
                pianoSampler.triggerAttackRelease(note, noteDuration, time);
                
                Tone.Draw.schedule(() => {
                    playbackArrow.style.left = `${x}px`;
                    playbackArrow.style.top = staff === 'treble-staff' ? '-30px' : '270px';
                }, time);

                time += Tone.Time(noteDuration).toSeconds();

                if (index === melody.length - 1) {
                    Tone.Draw.schedule(() => {
                        playbackArrow.style.display = 'none';
                    }, time);
                }
            });
        });

        document.getElementById('clear').addEventListener('click', () => {
            const allNotes = document.querySelectorAll('.note');
            allNotes.forEach(note => note.remove());
            melody = [];
            playbackArrow.style.display = 'none';
        });

        const deleteButton = document.getElementById('delete-mode');
        deleteButton.addEventListener('click', () => {
            deleteMode = !deleteMode;
            deleteButton.classList.toggle('active');
            trebleStaff.style.cursor = deleteMode ? 'pointer' : 'default';
            bassStaff.style.cursor = deleteMode ? 'pointer' : 'default';
            
            const allNotes = document.querySelectorAll('.note');
            allNotes.forEach(note => {
                note.classList.toggle('deletable', deleteMode);
            });
           function downloadMIDI() {
    const midi = new Midi();
    const track = midi.addTrack();
    
    melody.forEach(({ note, duration }) => {
        const midiNote = Midi.toMidiNumber(note);
        let durationTicks;
        switch(duration) {
            case 'whole': durationTicks = 384; break;
            case 'half': durationTicks = 192; break;
            case 'quarter': durationTicks = 96; break;
            case 'eighth': durationTicks = 48; break;
            case 'sixteenth': durationTicks = 24; break;
        }
        track.addNote({
            midi: midiNote,
            time: track.duration,
            duration: durationTicks / 96
        });
    });

    const midiData = midi.toArray();
    const blob = new Blob([midiData], { type: 'audio/midi' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'symphony_sketch.mid';
    a.click();
    URL.revokeObjectURL(url);
}

let mediaRecorder;
let audioChunks = [];

function startRecording() {
    navigator.mediaDevices.getUserMedia({ audio: true })
        .then(stream => {
            mediaRecorder = new MediaRecorder(stream);
            mediaRecorder.ondataavailable = (event) => {
                audioChunks.push(event.data);
            };
            mediaRecorder.onstop = () => {
                const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
                const audioUrl = URL.createObjectURL(audioBlob);
                const a = document.createElement('a');
                a.href = audioUrl;
                a.download = 'symphony_sketch_recording.wav';
                a.click();
                URL.revokeObjectURL(audioUrl);
            };
            mediaRecorder.start();
            // Start playing the melody here
        });
}

function stopRecording() {
    if (mediaRecorder && mediaRecorder.state !== 'inactive') {
        mediaRecorder.stop();
        audioChunks = [];
    }
}

// Add these buttons to your HTML
document.getElementById('controls').insertAdjacentHTML('beforeend', `

`);

// Add event listeners for the new buttons
document.getElementById('download-midi').addEventListener('click', downloadMIDI);
document.getElementById('start-recording').addEventListener('click', startRecording);
document.getElementById('stop-recording').addEventListener('click', stopRecording);
        });
    </script>
<script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="62f32a5c854dc38e26717c44-|49" defer></script></body></html>