Scritch is a media player + customization tool, spawned out of an interest for music artists to upload their albums to itch.io.
Scritch player is a simple HTML media player designed for ease of creation and customization, to be uploaded directly to itch (or anywhere else that hosts HTML files!). It's fully open-source, and doesn't require this tool to use at all. Simply download the few files and use them how you'd like.
You can check out the GitHub here :)
Scritch editor is a tool made to streamline that process, seen above. You can drag and drop an entire album of audio files and the editor will automatically set everything up for you to download and upload directly to itch or anywhere else. The editor also allows you to customize the look of the player and preview the changes immediately.
Scritch is 100% free to use/copy/modify/etc. as long as you aren't selling it outright, feel free! I just want to see more stuff put up on itch!
If you've used this to upload your music to itch, I'd love to know about it! :)
INSTRUCTIONS FOR UPLOADING TO ITCH.IO
- Place your music/video files and cover art in the editor's file section
- If the files include media metadata, it will automatically fill out all the details. Otherwise, enter the track titles, reorder, choose the featured track, and fill out any extra track information if necessary.
- Customize the page to your liking
- Fill out the description, if necessary
- Download the zip file
Then, on itch.io:
- In the top-right dropdown, click "Upload new project"
- Fill out the basic details
- Under "Kind of project", choose HTML
- Click "Upload files" and choose the zip file you downloaded from the Scritch editor
- If you want to make the audio files purchasable/downloadable (e.g. to allow people to buy your album), zip them up and upload that as well, and optionally change the type from "Executable" to "Soundtrack". Then set the Pricing to your liking.
- Under "Embed options" choose "Embed in page" and "Manually set size"
- Set the Viewport dimensions to 960 by 1280
- Note: the height depends on your settings and how many tracks you have included. You can Save and View page, and adjust this number until it looks right.
- Under "Frame options" enable "Automatically start on page load"
- You can also enable "Mobile friendly", but make sure to choose "Portrait" as the orientation so it doesn't force-rotate the device.
- At the bottom under "Visibility & access", choose "Public"
- Click Save and View page
- At the top, click Edit theme
- Edit the theme of the page to your liking (e.g. setting the background to the same color you specified in the editor)
Note: If you want to include links in the description/track info, you need to put
target="_blank" in the <a> tag, otherwise the page will open inside the player iframe
Click download now to get access to the following files: