readme
This commit is contained in:
torcado194
parent
61c509dd92
commit
475e760d98
1 changed files with 182 additions and 0 deletions
182
README.md
Normal file
182
README.md
Normal file
|
|
@ -0,0 +1,182 @@
|
|||
# Scritch player
|
||||
|
||||
|
||||
|
||||
Scritch player designed for ease of creation and customization. If you have a collection of audio files, simply drop them in and upload to a website to get a player to listen to it!
|
||||
|
||||
The original intention was to create a media player for musicians to use to upload their albums to [itch.io](https://itch.io). Something for them to easily copy/migrate their existing albums from sites like bandcamp.
|
||||
|
||||
## How to
|
||||
|
||||
### Scritch editor
|
||||
|
||||
The [Scritch editor](https://torcado.itch.io/scritch-editor) is a tool made to streamline this process. You can use it to create a Scritch player right in your browser, and see customization changes immediately.
|
||||
|
||||
Otherwise, manually setting up the player is just as easy.
|
||||
|
||||
### Manual
|
||||
|
||||
1. Place audio files and cover art in the /media folder
|
||||
|
||||
2. Edit `config.json` to include the audio files. Add entries to the `media` array like so:
|
||||
|
||||
```json
|
||||
...
|
||||
"media": [
|
||||
{
|
||||
"file": "track1.mp3",
|
||||
"title": "Track 1",
|
||||
"info": "(lyrics or other information can go here)",
|
||||
"feature": true
|
||||
},
|
||||
{
|
||||
"file": "track2.mp3",
|
||||
"title": "Track 2",
|
||||
},
|
||||
...
|
||||
],
|
||||
...
|
||||
```
|
||||
|
||||
3. Set the cover art file in `config.json`:
|
||||
|
||||
```json
|
||||
...
|
||||
"cover": "cover.png"
|
||||
...
|
||||
```
|
||||
|
||||
4. (optional) Add a title to `config.json`, like so:
|
||||
|
||||
```json
|
||||
"title": "My Album",
|
||||
...
|
||||
```
|
||||
|
||||
5. (optional) Add a description to `config.json`, like so:
|
||||
|
||||
```json
|
||||
...
|
||||
"description": "(add text here)"
|
||||
```
|
||||
|
||||
6. (optional) Edit `config.json` to modify the player's theme to your liking:
|
||||
|
||||
```json
|
||||
...
|
||||
"theme": {
|
||||
"coverSize": 480,
|
||||
"layoutStyle": "horizontal",
|
||||
"infoStyle": "overlaid",
|
||||
"titleStyle": "span",
|
||||
"contentWidth": 400,
|
||||
"nativePlayer": false
|
||||
},
|
||||
...
|
||||
```
|
||||
|
||||
And that's it! you can upload the files to your website, or zip them up and upload to [itch.io](https://itch.io), or anywhere else that can host HTML projects.
|
||||
|
||||
|
||||
### config.json settings
|
||||
|
||||
*note: all display-text options can include HTML, not just plain text*
|
||||
|
||||
`title` (optional)
|
||||
> Text at the top of the player
|
||||
> `"title": "My Album"`
|
||||
|
||||
`media`
|
||||
> List of media files to include in the player
|
||||
> ```json
|
||||
> "media": [
|
||||
> {"file": "track1.mp3", "title": "Track 1"},
|
||||
> ...
|
||||
> ]
|
||||
> ```
|
||||
|
||||
`cover` (optional)
|
||||
> The name of the file in the /media folder for the cover image
|
||||
|
||||
`description` (optional)
|
||||
> The text at the bottom of the player
|
||||
|
||||
`theme` (optional)
|
||||
> An object containing theme settings and colors
|
||||
|
||||
**media entry options**
|
||||
`file`
|
||||
> The name of the file in the /media folder
|
||||
|
||||
`title` (optional)
|
||||
> The name shown for this entry in the player.
|
||||
> Defaults to the file name if not specified
|
||||
|
||||
`featured` (optional)
|
||||
> If `true`, sets this file as the "featured" track, which will queue up first when loading the page.
|
||||
> Can be either `true` or `false`
|
||||
|
||||
`type` (optional)
|
||||
> The type of the media.
|
||||
> Can be either `"audio"` or `"video"`
|
||||
> Defaults to "audio"
|
||||
|
||||
`info` (optional)
|
||||
> Extra text for this file, such as for lyrics or artist attributions. This will be optionally shown over/under the cover image, or togglable below the track.
|
||||
|
||||
**theme options**
|
||||
|
||||
*all settigns are optional. Colors can be any valid CSS color*
|
||||
|
||||
`titleStyle`
|
||||
> Styles the title text, if available.
|
||||
> `"none"` (default) no styling
|
||||
> `"span"` title spans the entire width, centered.
|
||||
|
||||
`backgroundColor`
|
||||
> Color of the page background
|
||||
|
||||
`primaryColor`
|
||||
> Color of the controls
|
||||
|
||||
`primaryAltColor`
|
||||
> Color of e.g. the unfilled section of the progress bar and volume bar
|
||||
|
||||
`secondaryColor`
|
||||
> Secondary color of the controls (e.g. the triangle of the play button)
|
||||
|
||||
`highlightColor`
|
||||
> Background color of the selected track
|
||||
|
||||
`primaryTextColor`
|
||||
> Color of most text (e.g. titles, description, info, etc.)
|
||||
|
||||
`primaryAltTextColor`
|
||||
> Color of e.g. the track numbers and duration, and the track info button
|
||||
|
||||
`linkColor`
|
||||
> Text color of links
|
||||
|
||||
`layoutStyle`
|
||||
> Styles the overall structure of the player
|
||||
> `"horizontal"` (default) the cover image sits to the right of the player controls and track list
|
||||
> `"vertical"` all elements aligned vertically, title -> cover -> controls -> track list
|
||||
|
||||
`infoStyle`
|
||||
> Styles the track info of the currently playing track
|
||||
> `"overlaid"` (default) text sits on top of the cover image
|
||||
> `"below"` text sits below the cover image (note: this will push down the controls and track list in a vertical layout)
|
||||
|
||||
`contentWidth`
|
||||
> Width of the column containing the controls, track list, and description
|
||||
|
||||
`coverSize`
|
||||
> Width of the cover image (non-square images will scale accordingly)
|
||||
|
||||
`nativePlayer`
|
||||
> Changes the player controls
|
||||
> `false` (default) custom player controls
|
||||
> `true` uses the browser's default audio player (also hides the player when a video is playing, the video's default controls will be available)
|
||||
|
||||
`customCSS`
|
||||
> Custom changes to the page's CSS
|
||||
Loading…
Add table
Add a link
Reference in a new issue