├── media
└── put files here.txt
├── src
├── fonts
│ ├── icons.eot
│ ├── icons.ttf
│ ├── icons.woff
│ ├── rubikNumbers-edit.woff2
│ └── icons.svg
├── common.css
├── reset.css
└── fonts.css
├── config.json
├── LICENSE.md
├── README.md
└── index.html
/media/put files here.txt:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/fonts/icons.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/torcado194/scritch-player/HEAD/src/fonts/icons.eot
--------------------------------------------------------------------------------
/src/fonts/icons.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/torcado194/scritch-player/HEAD/src/fonts/icons.ttf
--------------------------------------------------------------------------------
/src/fonts/icons.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/torcado194/scritch-player/HEAD/src/fonts/icons.woff
--------------------------------------------------------------------------------
/src/fonts/rubikNumbers-edit.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/torcado194/scritch-player/HEAD/src/fonts/rubikNumbers-edit.woff2
--------------------------------------------------------------------------------
/config.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "",
3 | "media": [],
4 | "cover": "",
5 | "theme": {
6 | "coverSize": 480,
7 | "layoutStyle": "vertical",
8 | "infoStyle": "overlaid",
9 | "contentWidth": 400,
10 | "nativePlayer": false
11 | },
12 | "description": ""
13 | }
--------------------------------------------------------------------------------
/src/common.css:
--------------------------------------------------------------------------------
1 | blockquote {
2 | border-left: 2px solid;
3 | padding-left: 20px;
4 | }
5 |
6 | hr {
7 | border-width: 0;
8 | border-bottom-width: 1px;
9 | }
10 | h1 {
11 | font-size: 2em;
12 | }
13 | h2 {
14 | font-size: 1.5em;
15 | }
16 | h3 {
17 | font-size: 1.17em;
18 | }
19 | h4 {
20 | font-size: 1em;
21 | }
22 | h5 {
23 | font-size: 0.83em;
24 | }
25 | h6 {
26 | font-size: 0.67em;
27 | }
28 |
29 | ol {
30 | list-style: decimal;
31 | }
32 |
33 | ol, ul {
34 | padding-left: 30px;
35 | }
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2022 torcado
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
--------------------------------------------------------------------------------
/src/reset.css:
--------------------------------------------------------------------------------
1 | /***
2 | The new CSS reset - version 1.5.1 (last updated 1.3.2022)
3 | GitHub page: https://github.com/elad2412/the-new-css-reset
4 | ***/
5 |
6 | /*
7 | Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
8 | - The "symbol *" part is to solve Firefox SVG sprite bug
9 | */
10 | /* *:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) { */
11 | *:where(:not(iframe, canvas, img, svg, video, strong, b, i, em, hr, del, s, strike, sup, sub, u, ul, li):not(svg *, symbol *)) {
12 | all: unset;
13 | display: revert;
14 | }
15 |
16 | /* Preferred box-sizing value */
17 | *,
18 | *::before,
19 | *::after {
20 | box-sizing: border-box;
21 | }
22 |
23 | /* Reapply the pointer cursor for anchor tags */
24 | a, button {
25 | cursor: revert;
26 | }
27 |
28 | /* Remove list styles (bullets/numbers) */
29 | /* ol, ul, menu {
30 | list-style: none;
31 | } */
32 |
33 | /* For images to not be able to exceed their container */
34 | img {
35 | max-width: 100%;
36 | }
37 |
38 | /* removes spacing between cells in tables */
39 | table {
40 | border-collapse: collapse;
41 | }
42 |
43 | /* revert the 'white-space' property for textarea elements on Safari */
44 | textarea {
45 | white-space: revert;
46 | }
47 |
48 | /* minimum style to allow to style meter element */
49 | meter {
50 | -webkit-appearance: revert;
51 | appearance: revert;
52 | }
53 |
54 | /* reset default text opacity of input placeholder */
55 | ::placeholder {
56 | color: unset;
57 | }
58 |
59 | /* fix the feature of 'hidden' attribute.
60 | display:revert; revert to element instead of attribute */
61 | :where([hidden]) {
62 | display: none;
63 | }
64 |
65 | /* revert for bug in Chromium browsers
66 | - fix for the content editable attribute will work properly. */
67 | :where([contenteditable]) {
68 | -moz-user-modify: read-write;
69 | -webkit-user-modify: read-write;
70 | overflow-wrap: break-word;
71 | -webkit-line-break: after-white-space;
72 | }
73 |
74 | /* apply back the draggable feature - exist only in Chromium and Safari */
75 | :where([draggable="true"]) {
76 | -webkit-user-drag: element;
77 | }
78 |
79 |
--------------------------------------------------------------------------------
/src/fonts.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'icons';
3 | src: url('fonts/icons.eot?7p075h');
4 | src: url('fonts/icons.eot?7p075h#iefix') format('embedded-opentype'),
5 | url('fonts/icons.ttf?7p075h') format('truetype'),
6 | url('fonts/icons.woff?7p075h') format('woff'),
7 | url('fonts/icons.svg?7p075h#icons') format('svg');
8 | font-weight: normal;
9 | font-style: normal;
10 | font-display: block;
11 | }
12 |
13 | [class^="icon-"], [class*=" icon-"] {
14 | /* use !important to prevent issues with browser extensions that change fonts */
15 | font-family: 'icons' !important;
16 | speak: never;
17 | font-style: normal;
18 | font-weight: normal;
19 | font-variant: normal;
20 | text-transform: none;
21 | line-height: 1;
22 | font-size: 20px;
23 |
24 | /* Better Font Rendering =========== */
25 | -webkit-font-smoothing: antialiased;
26 | -moz-osx-font-smoothing: grayscale;
27 | }
28 |
29 | .icon-plus-big:before {
30 | content: "\2b";
31 | }
32 | .icon-drop-big:before {
33 | content: "\2b07";
34 | }
35 | .icon-loading-big:before {
36 | content: "\25cc";
37 | }
38 | .icon-loop-edit:before {
39 | content: "\1f504";
40 | }
41 | .icon-loop-1:before {
42 | content: "\1f502";
43 | }
44 | .icon-loop:before {
45 | content: "\1f501";
46 | }
47 | .icon-play-loop:before {
48 | content: "\27f2";
49 | }
50 | .icon-duration-preview:before {
51 | content: "\1f55b";
52 | }
53 | .icon-duration:before {
54 | content: "\1f553";
55 | }
56 | .icon-duration-dot:before {
57 | content: "\23f2";
58 | }
59 | .icon-end:before {
60 | content: "\23f5";
61 | }
62 | .icon-start:before {
63 | content: "\23f4";
64 | }
65 | .icon-cut:before {
66 | content: "\2700";
67 | }
68 | .icon-marker-help:before {
69 | content: "\2753";
70 | }
71 | .icon-marker-info:before {
72 | content: "\1f6c8";
73 | }
74 | .icon-marker-warning:before {
75 | content: "\2757";
76 | }
77 | .icon-lock-file:before {
78 | content: "\1f513";
79 | }
80 | .icon-lock:before {
81 | content: "\1f512";
82 | }
83 | .icon-config:before {
84 | content: "\1f4c3";
85 | }
86 | .icon-title:before {
87 | content: "\1e6e";
88 | }
89 | .icon-edit-info:before {
90 | content: "\1f4dd";
91 | }
92 | .icon-info:before {
93 | content: "\1f5c9";
94 | }
95 | .icon-lyrics:before {
96 | content: "\1f3bc";
97 | }
98 | .icon-pull:before {
99 | content: "\2913";
100 | }
101 | .icon-text:before {
102 | content: "\1f5b9";
103 | }
104 | .icon-error:before {
105 | content: "\24e7";
106 | }
107 | .icon-exclamation:before {
108 | content: "\21";
109 | }
110 | .icon-unknown:before {
111 | content: "\3f";
112 | }
113 | .icon-warning:before {
114 | content: "\26a0";
115 | }
116 | .icon-x:before {
117 | content: "\d7";
118 | }
119 | .icon-cover:before {
120 | content: "\1f4bd";
121 | }
122 | .icon-star:before {
123 | content: "\2605";
124 | }
125 | .icon-star-outline:before {
126 | content: "\2606";
127 | }
128 | .icon-grab:before {
129 | content: "\2630";
130 | }
131 | .icon-audio:before {
132 | content: "\266b";
133 | }
134 | .icon-image:before {
135 | content: "\1f5bc";
136 | }
137 | .icon-trash:before {
138 | content: "\1f5d1";
139 | }
140 | .icon-video:before {
141 | content: "\1f4f9";
142 | }
143 | .icon-dots:before {
144 | content: "\22ef";
145 | }
146 | .icon-loading:before {
147 | content: "\1f506";
148 | }
149 | .icon-next:before {
150 | content: "\23ed";
151 | }
152 | .icon-previous:before {
153 | content: "\23ee";
154 | }
155 | .icon-volume-high:before {
156 | content: "\1f50a";
157 | }
158 | .icon-volume-low:before {
159 | content: "\1f509";
160 | }
161 | .icon-volume-none:before {
162 | content: "\1f508";
163 | }
164 | .icon-volume-x:before {
165 | content: "\1f507";
166 | }
167 | .icon-pause:before {
168 | content: "\23f8";
169 | }
170 | .icon-play:before {
171 | content: "\25b6";
172 | }
173 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Scritch player
2 |
3 | 
4 |
5 | Scritch player is a simple HTML media 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!
6 |
7 | 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.
8 |
9 | ## How to
10 |
11 | ### Scritch editor
12 |
13 | 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.
14 |
15 | Otherwise, manually setting up the player is just as easy.
16 |
17 | ### Manual
18 |
19 | 1. Place audio files and cover art in the /media folder
20 |
21 | 2. Edit `config.json` to include the audio files. Add entries to the `media` array like so:
22 |
23 | ```json
24 | "media": [
25 | {
26 | "file": "track1.mp3",
27 | "title": "Track 1",
28 | "info": "(lyrics or other information can go here)",
29 | "feature": true
30 | },
31 | {
32 | "file": "track2.mp3",
33 | "title": "Track 2",
34 | },
35 | ...
36 | ]
37 | ```
38 |
39 | 3. Set the cover art file in `config.json`:
40 |
41 | ```json
42 | "cover": "cover.png"
43 | ```
44 |
45 | 4. (optional) Add a title to `config.json`, like so:
46 |
47 | ```json
48 | "title": "My Album"
49 | ```
50 |
51 | 5. (optional) Add a description to `config.json`, like so:
52 |
53 | ```json
54 | "description": "(add text here)"
55 | ```
56 |
57 | 6. (optional) Edit `config.json` to modify the player's theme to your liking:
58 |
59 | ```json
60 | "theme": {
61 | "coverSize": 480,
62 | "layoutStyle": "horizontal",
63 | "infoStyle": "overlaid",
64 | "titleStyle": "span",
65 | "contentWidth": 400,
66 | "nativePlayer": false
67 | },
68 | ```
69 |
70 | 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.
71 |
72 |
73 | ### config.json settings
74 |
75 | *note: all display-text options can include HTML, not just plain text*
76 |
77 | `title` (optional)
78 | > Text at the top of the player
79 | > `"title": "My Album"`
80 |
81 | \
82 | `media`
83 | > List of media files to include in the player
84 | > ```json
85 | > "media": [
86 | > {"file": "track1.mp3", "title": "Track 1"},
87 | > ...
88 | > ]
89 | > ```
90 |
91 | \
92 | `cover` (optional)
93 | > The name of the file in the /media folder for the cover image
94 |
95 | \
96 | `description` (optional)
97 | > The text at the bottom of the player
98 |
99 | \
100 | `theme` (optional)
101 | > An object containing theme settings and colors
102 |
103 | \
104 | `loopModeDefault` (optional)
105 | > The type of loop mode to start with.
106 | > Can be set to one of:
107 | > - `"none"` (no looping) (default)
108 | > - `"playlist"` (after the last track ends, start playing the first track)
109 | > - `"track"` (loop the same selected track repeatedly)
110 |
111 | -----
112 |
113 | **media entry options**
114 |
115 | `file`
116 | > The name of the file in the /media folder
117 | > Not required if entry is set to "locked"
118 |
119 | \
120 | `title` (optional)
121 | > The name shown for this entry in the player.
122 | > Defaults to the file name if not specified
123 |
124 | \
125 | `cover` (optional)
126 | > The name of the file in the /media folder for the cover image for this track.
127 | > This will replace the main cover image when this track is playing, and uses the same theme options (such as `coverSize`)
128 | > **NOTE:** this will have no effect when the media is a video, the video display takes precedence.
129 |
130 | \
131 | `feature` (optional)
132 | > If `true`, sets this file as the "featured" track, which will queue up first when loading the page.
133 | > Can be either `true` or `false`
134 | > Defaults to `false`
135 |
136 | \
137 | `autoplay` (optional)
138 | > If `true` and `feature` is also `true`, this track will play after loading.
139 | > **NOTE:** this *will not* work in most cases, due to browsers preventing autoplaying audio until the user interacts with the page. This will only be relevant if the player is loaded after user interaction, e.g. when running on itch.io with autoload disabled.
140 | > Can be either `true` or `false`
141 | > Defaults to `false`
142 |
143 | \
144 | `type` (optional)
145 | > The type of the media.
146 | > Can be either `"audio"` or `"video"`
147 | > Defaults to `"audio"`
148 |
149 | \
150 | `info` (optional)
151 | > 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.
152 |
153 | \
154 | `locked` (optional)
155 | > If `true`, sets this file as "locked" preventing it from being playable.
156 | > Can be either `true` or `false`
157 | > Defaults to `false`
158 | > Enable this if e.g. you want to show that this file would be available in the purchased download of your album.
159 | > Note: the `file` field is not required if this is enabled, you shouldn't include the file in the player.
160 |
161 | \
162 | `loopCount` (optional)
163 | > The number of times to repeat the track after the first play
164 | > Ignored if set to 0 or lower
165 | > Defaults to `0`
166 |
167 | ***preview options***
168 |
169 | *a preview is a section of a full track, used if e.g. you want to include a snippet of a track that would be available in the full download of your album.*
170 | *note: it is highly recommended that the file you use for a preview track is clipped to the region you want to preview, because the file can be accessed by users. Scritch will support the file in either case, however.*
171 |
172 | > e.g. `{"file": "track1.mp3", "title": "Track 1", previewStart: 12, previewEnd: 42, originalDuration: "1:20"}`
173 |
174 | \
175 | `previewStart` (optional, required for preview)
176 | > The start time for the preview section of the full track.
177 | > Can be a number of seconds or an H:M:S string, e.g. `125.3`, `"2:05"`, `"00:21:13.5"` are all valid.
178 |
179 | \
180 | `previewEnd` (optional, required for preview)
181 | > The end time for the preview section of the full track.
182 | > Can be a number of seconds or an H:M:S string, e.g. `125.3`, `"2:05"`, `"00:21:13.5"` are all valid.
183 |
184 | \
185 | `originalDuration` (optional, required for preview)
186 | > The duration of the full (unclipped) track.
187 | > Can be a number of seconds or an H:M:S string, e.g. `125.3`, `"2:05"`, `"00:21:13.5"` are all valid.
188 |
189 | \
190 | `previewFade` (optional)
191 | > If `true`, the player will automatically fade the audio at the start and end of the preview section.
192 | > Can be either `true` or `false`
193 | > Defaults to `true`
194 |
195 | -----
196 |
197 | **theme options**
198 |
199 | *all settings are optional. colors can be any valid CSS color*
200 |
201 | `titleStyle`
202 | > Styles the title text, if available.
203 | > `"none"` (default) no styling
204 | > `"span"` title spans the entire width, centered.
205 |
206 | \
207 | `backgroundColor`
208 | > Color of the page background
209 |
210 | \
211 | `primaryColor`
212 | > Main color of the controls (e.g. the circle of the play button, the prev/next track buttons, the filled progress bar, etc.)
213 |
214 | \
215 | `primaryAltColor`
216 | > Color of e.g. the unfilled section of the progress bar and volume bar
217 |
218 | \
219 | `secondaryColor`
220 | > Secondary color of the controls (e.g. the triangle of the play button)
221 |
222 | \
223 | `highlightColor`
224 | > Background color of the selected track
225 |
226 | \
227 | `primaryTextColor`
228 | > Color of most text (e.g. titles, description, info, etc.)
229 |
230 | \
231 | `primaryAltTextColor`
232 | > Color of e.g. the track numbers and duration, and the track info button
233 |
234 | \
235 | `previewStripeColor1`
236 | > First color of the striped bar on a preview track.
237 |
238 | \
239 | `previewStripeColor2`
240 | > Second color of the striped bar on a preview track.
241 |
242 | \
243 | `linkColor`
244 | > Color of links in text
245 |
246 | \
247 | `overlayTextColor`
248 | > Color of info text on the cover overlay
249 |
250 | \
251 | `overlayBackgroundColor`
252 | > Color of the overlay background
253 |
254 | \
255 | `layoutStyle`
256 | > Styles the overall structure of the player
257 | > `"horizontal"` (default) the cover image sits to the right of the player controls and track list
258 | > `"vertical"` all elements align vertically (from top to bottom: title -> cover -> controls -> track list)
259 |
260 | \
261 | `infoStyle`
262 | > Styles the track info of the currently playing track
263 | > `"overlaid"` (default) text sits layered on top of the cover image
264 | > `"overlaid-toggle"` text sits layered on top of the cover image only if the info drawer is toggled on the current track, otherwise it is hidden
265 | > `"below"` text sits below the cover image (note: this will push down the controls and track list in a vertical layout)
266 | > `"none"` text is not displayed (other than in the info drawer under the track, when toggled)
267 |
268 | \
269 | `hideInfoDropdown`
270 | > Hides the info dropdown box beneath tracks
271 | > `false` (default) info dropdown is not hidden
272 | > `true` info dropdown is hidden
273 |
274 | \
275 | `contentWidth`
276 | > Width of the column containing the controls, track list, and description
277 |
278 | \
279 | `coverSize`
280 | > Width of the cover image (non-square images will scale accordingly)
281 |
282 | \
283 | `nativePlayer`
284 | > Changes the player controls
285 | > `false` (default) custom player controls
286 | > `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)
287 |
288 | \
289 | `customCSS`
290 | > Custom changes to the page's CSS
291 |
292 | # License
293 |
294 | This project is under the [MIT license](LICENSE.md)
--------------------------------------------------------------------------------
/src/fonts/icons.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | itch player
8 |
9 |
10 |
11 |
14 |
15 |
16 |
17 |
759 |
760 |