audio-sprite-surfer
This web app was built for developers to quickly generate an associated JSON data structure with an id
, and start
/ end
/ length
timings in milleseconds for a sound sprite with multiple sounds. There are solutions such as audiosprite which will concatenate separate sound files into one sound sprite with an associated spritesheet, but this tool is for quick one-offs and/or for sound sprites with extra production processing requiring a more detailed selection of sprites.
How To Use
Drag n Drop Your Sound
Drag a sound sprite from your computer to the drop zone area to load your sound file waveform.
Create a Sprite From Selection
Point and click with your mouse to make a selection on the waveform. You can click the blue play / pause
button or use keyboard shortcut space
to preview your selection. Once you are happy with the sprite selection, you can click on the green create
button or use keyboard shortcut ctrl + enter
.
Edit Sprite Details
After you create your first sprite, you will see it load into the form below with a number id starting at 0
. You can edit the id
in the form below, and change the start
and end
times manually with the form, or by using keyboard shortcuts shift + left/right
to adjust start
time, and alt + left/right
to adjust end
time.
You may also make another selection from the waveform and click Update Selection
to take the start
and end
time from your current selection.
Create Multiple Sprites
After you have created a few sprites, you can navigate between them by clicking the blue left
and right
buttons or by using keyboard shortcut ctrl + left/right
. You will see your actively selected sprite is bright with a yellow highlighted background.
Deleting A Sprite
If you are not satisfied with a sprite, you can delete it by selecting it and then clicking the red delete
button or by using keyboard shortcut ctrl + del
.
Exporting to JSON
When you are happy with your sprites, you can export them to JSON by clickin on the green Export
button below the form. Place your cursor in the textarea and select all by pressing ctrl + a
to select all, then ctrl + c
to copy.
Importing from JSON
If you already have a sprite sheet that you would like to edit, you may be able to import it. If you exported it from audio-sprite-surfer
, then you will definitely be able to import it. Otherwise, the import requires the following data structure:
[
{
"id" : "some-name" // optional
"start" : 1000, // required -- milleseconds
"end" : 1500, // required -- milleseconds
"length" : 500 // ignored -- will be calculated from above
}
]
If there are any JSON errors when you try to import, an error message will be displayed with a link to an external tool to help you quickly resolve your error.
If the JSON is valid, then you will be prompted that you will overwrite your existing data, so please confirm before importing.
Keyboard Shortcuts
space
play / stop
ctrl+left
previous
ctrl+right
next
ctrl+enter
create from selection
ctrl+del
delete selected
shift+left
decrease start time
shift+right
increase start time
alt+left
decrease end time
alt+right
increase end time
Unit Tests
To run unit tests, checkout project from github and run grunt test
.
TODO
- different export formats for popular sprite players such as SoundManager
- ability to import with end OR length
- cache data in local storage per sound file