JSME Composer

🎧 PLAYER

Range: to

Loop Song BPM: VOL:

Now Playing Metadata

Playing: Stopped

💾 PROJECT HUB

LOCAL FILE I/O

LOCAL BROWSER STORAGE

Note: Browser data storage only exists within your web browser's cache data, and is only available on this device. Clearing your browser's data (cookies/cache) could also remove songs saved here. Save to a local file or cloud storage for long term storage.

SAMPLES

CLOUD (Google Drive)

Google drive access is currently disabled while I rework the code. You can still load them by downloading the drive files to your local device, and using the "Import File" button in the first tab.

Yes it worked perfectly before, but I wanted to revamp security with the API calls while adding minimal load to the server.

PRESETS

Song Details

This will generate an array suitable for including in you own web apps making use of JSME: The JavaScript Music Engine.

HELP & DOCS

ABOUT

This was created to assist in writing music for a single-page web game, using pure JavaScript and the JSME: JavaScript Music Engine I developed. But, as projects go, something simple grows into something more complex.

So yes, what started off as a project to make a "tetris" like game in a web browser fully contained in a single HTML file spawned this. It is still a work in progress, but has basic functionality, local file saves, and will automatically back up your current song to your web browser's local storage (this happens per a time interval, as well as when you leave the page).

The keyboard shortcuts were added per request of a composer familiar with the old music tracker scene. In that, this is somewhat similar to a tracker. Each cell is a 1/8th note, and multiple music/instrument channels can be added to make the music more interesting, as well as controlling the volume of each note played to add more depth to the song.

Have fun, enjoy. Nothing is saved on our servers when you use this tool. We only can see you visited the page, not what you on it or with it. And definitely make of the music you create and the JSME driver for use in your own JavaScript based browser games (see the Tech Details tab for more info). Have fun, learn, and explore.

BASIC USAGE
Click cells to select. Use the Note Builder bar to create notes.

Shortcuts

A-G: Set Note Name
~: Cycle Accents
[ ]: Octave Up/Down
></,.: Duration Up/Down
=-/_+: Volume Up/Down
S: Toggle Sustain
Enter: Set Note + Advance
Shift+Enter: Set Note (Stay)
Tab: Next Channel
Shift+Tab: Previous Channel

The IO HUB button allows you to store and export your songs, as well as load from some preset songs. The PLAYER button controls playback, and also is where the tempo/BMP is configured.

The Ins/Del buttons insert a row above the current selected row, or delete the current selected row. The +CH adds a channel to the end, the -CH deletes the current selected channel.

Shift-Click allows selecting multiple cells. 📄 will copy those cells to the clipboard. 📋 will paste those selected cells at the current selected location. ❌ will clear the cells.

The second row has the Note Builder buttons (all Note Builder functions can be performed from the keyboard shortcuts). C-B select the note, #/b for sharp and flat, and - for no accent. OCT sets the octave, 4 being middle octave. The Sustain checkbox switches from using a note selection, or selecting how many 1/8th notes a note should be played for. VOL is the note's volume relative to the master volume. SET sets the current note. and SET+ sets the current note, and advances the cursor when the currently selected note would stop playing. You will see a blue bar appear to the right when using any note longer than a 1/8th note. This bar shows how many 1/8th note steps the note will play for.

JSME: JavaScript Music Engine

For specifics on JSME and how to use it in your own programs, go to https://www.stellimare.com/JSME-JavaScript-Music-Engine/. The rest of this information relates specifically to the JSME Composer tool.

INFO

This tool is a work in progress.

JSME is a pure JavaScript based player. It needs no external audio files, only an array with playback instructions. It makes use of modern browsers sound context to synthesize notes which is very similar to early computers "chip tune" playback systems. The file format is detailed in the "LLM Prompt Helper," which you can copy-paste into a LLM and see if it'll generate some sensible music for you. You can, of course, use the editor to manually compose your own music (which I recommend if you have an music skill of your own).

This tool allows you to save files to your browser, or to a file that you can share. It also has import/export function were you can import or export a raw JS array to edit or copy into your own JavaScript web app making use of JSME. Browser storage should only be used for temporary backups. You may find backups of your songs temporally stored there.

Remember: The user must interact with the web page before audio can be played. Clicking a "start" button is perfect.

LLM PROMPT HELPER

LLM's like Google Gemini, are able to generate music data for playback using this system. The prompt below will provide instructions for the LLMs to follow. Your success will vary (all the example music here was generated with Google Gemini prompts).

Act as a composer for JSME: JavaScript Music Engine and generate a song as a raw JavaScript array. Your output must only contain the raw array with no comments nor markdown prose, and no empty strings. Each array index represents a 1/8th note tick. You must use sparse arrays with consecutive commas to represent empty space or rests. The first element of the array contains metadata, only the "emd-metadata" and tempo tags are required, the rest are optional. The format of the metadata is '[ ""emd-metadata" , ["TAG","Value"],["TAG","Value"],...]'. The following array elements are the channel lists. They take the form of '[ [<instruments data>], [<note>,<note>,...]]'. The notes take the form of <duration><name><octave><volume>. The duration takes two forms, one is the note form where 1 (or none) ,2,4,8,16 are for a whole, 1/2, 1/4, 1/8. and 1/16th note duration (if it is a whole note the 1 can, and should, be omitted, also note the scale is 1/8th, so a 1/16th note would only play for half of a tick, with a forced 1/16th pause); the other is S+n, where where 'n' is the number of 1/8th note steps to play. Next is the note name:C,D,E,F,G,A,B (this is the only required note, do not use '-' for a pause, simply add empty cells for the consecutive 1/8th note pauses). Next is the optional accent, # for sharp and b for flat. Next is the octave with 4 being the middle octave (4 is optional, it is only required for those not in the 4th octave). Next is the volume when the note is to play at a lower volume than 100% of the master volume. This is a single digit fractional number, so ".5" is 50% volume and ".9" is 90%, and nothing is 100%, and .95 isn't allowed because it's two digits. The instrument data is an array that contains information about the waveform to use and takes the form of [ramp,filter,resonance,waveform]. Never use "-" for the note name or "." alone without a number as neither will play. Example (there is no limit on the number of channels, but keeping it under 8 is easier to manage):

		[ 
		  ["emd-metadata", [
		  	["tempo", "120"], 
		  	["title", "Crossed Buns"], 
		  	["author", "JSME"], 
		  	["notes"," optional long-form comments and notes"]]
		  ],
		  [ [1.0, 1100, 1, "sawtooth"],
		    [ "4B.8",, "4A.8",, "2G.9",,,, "4B.8",, "4A.8",, "2G.9",,,,
		      "16G.7", "16G.7", "16G.7", "16G.7", "16A.7", "16A.7", "16A.7", "16A.7",
		      "4B.8",, "4A.8",, "2G.9" ]
		  ],
		  [ [1.0, 150, 0, "sine"],
		    [ "S+4G2.6",,,, "S+4G2.6",,,, "S+4G2.6",,,, "S+4G2.6",,,,
		      "S+4G2.6",,,, "S+4D2.6",,,, "S+4G2.6",,,, "S+4G2.6" ]
		  ] 
		]

Instruments presets:

Privacy Policy

See Privacy Policy & TOS for the full privacy polciy. This page serves to list specific details that are relevant to this tool and aren't covered in the site-wide privacy policy.

This tool will make use of your browsers storage for temporarily storing songs and automatic backup. None of the information in cookies or browser data storage is ever sent to our servers.

Third-Party Services (Google)

Our application integrates with Google services for advertising and cloud storage (Google Drive). Please note:

Google Ads & Storage: Use of these features is governed by the Google Privacy Policy.
Data Access: While Google’s authentication services may technically make certain information (such as your email address) available to the application during the connection process, we do not store, log, or share your email address, or any other information about you, from Google’s services.

TIPJAR

Feel free to drop a tip below. Thanks!