Skip to content

rotten77/tokungaku

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Tokungaku - Let Your Memories Play

Visual Music Composition on Images

Tokungaku is a free browser-based musical canvas that transforms your images into melodic experiences. Compose unique soundtracks directly on your photos, giving voice to your cherished moments. Create, edit, and play back compositions with an intuitive piano-roll interface that overlays your visual memories. No installation required. The name combines Japanese words "Ongaku" (音楽, music) and "Tokuten" (得点, scoring/marks).

🔗 Try it now: https://tokungaku.rotten77.cz

⚠️ This codebase was completely generated by AI (Claude AI).

Features

  • Upload and display background images
  • Rotate background images in 90-degree increments
  • Piano-roll grid overlay (3 octaves, configurable columns)
  • Create, edit, move, and resize notes directly on the grid
  • Play back the created sequences
  • Adjustable BPM and time signature
  • Keyboard shortcuts for common operations
  • Export sequences as MIDI files
  • Save and load projects using JSON files
  • Multiple instrument sounds (piano, synth, bass, guitar, violin, flute, drums, xylophone)
  • Customizable grid color and opacity
  • Visual playback position indicator

Usage

  1. Upload a background image with the image upload button.
  2. Add notes by clicking on the grid.
  3. Select, move, and resize notes directly on the grid.
  4. Play back the sequence with the play button or spacebar.
  5. Clear all notes or create a new project as needed.
  6. Export your project to save your work as a JSON file.
  7. Export MIDI to use in your DAW (Digital Audio Workstation).

Mouse Actions

  • Click: Select or create note
  • Drag: Move note
  • Right edge: Resize note

Keyboard Shortcuts

  • A: Add note
  • D: Delete selected note
  • W: Increase note length
  • S: Decrease note length
  • Arrow keys: Move selected note
  • Space: Play/Stop
  • R: Rotate image

Technical Details

Browser Compatibility

Tokungaku is built using modern web standards and should work in all modern browsers, including:

  • Chrome (recommended)
  • Firefox
  • Safari
  • Edge

Dependencies

Tokungaku uses minimal external dependencies:

Project Storage

  • Projects are saved as JSON files on your computer
  • Images are embedded within the project files as data URLs
  • Projects can be imported back into the application at any time
  • Local storage is not used to avoid browser storage limitations

Using MIDI Export with DAWs

Tokungaku allows you to export your compositions as standard MIDI files that can be imported into any Digital Audio Workstation (DAW) such as Ableton Live, FL Studio, Logic Pro, GarageBand, or similar music production software.

How to Export and Use MIDI Files:

  1. Create your composition in Tokungaku
  2. Select your preferred instrument (this will be exported as MIDI program information)
  3. Click the "Export MIDI" button in the project controls
  4. Save the .mid file to your computer
  5. In your DAW software:
    • Import/Open the MIDI file (usually via File > Import or drag-and-drop)
    • The notes, tempo, and time signature will be preserved
    • Apply your DAW's high-quality instrument sounds and effects
    • Edit further if needed using your DAW's piano roll editor
    • Mix with other tracks and produce your final music

The exported MIDI contains all musical data but no actual audio samples, allowing you to use your DAW's professional sound libraries for the final production.

Image Size Recommendations

For best performance, use images smaller than 10MB. Larger images may cause performance issues on some devices. The application will warn you if you attempt to upload an exceptionally large image.

Limitations

  • Audio playback uses Web Audio API and may vary slightly between browsers
  • For best experience, use a desktop browser with a physical keyboard
  • Image rotation may affect performance on very large images