Skip to content

Commit 51e0f10

Browse files
TasoOneAsiaSynTer
TasoOneAsia
and
SynTer
authored
feat(music): Add the ability to play music while loading (#3)
Adds docs, config options and handling for music playing. Co-authored-by: SynTer <[email protected]>
1 parent 74b5795 commit 51e0f10

File tree

8 files changed

+168
-21
lines changed

8 files changed

+168
-21
lines changed

‎README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,9 @@ The config can be found in `web/config.js`. This holds a plethora of configurati
4646
| ENABLE_GFM_MARKDOWN | Whether to enable the `Github Flavored Markdown` spec for the parser | `ENABLE_GFM_MARKDOWN = true`
4747
| ENABLE_SERVER_LOGO | Whether to enable the server logo | `ENABLE_SERVER_LOGO = true`
4848
| SERVER_LOGO_POSITION | Where to place logo if enabled | `SERVER_LOGO_POSITION = 'top-left'`
49+
| MUSIC_ENABLED | Enable loading music | `MUSIC_ENABLED = true `
50+
| MUSIC_START_VOLUME | The volume for loading music (0 - 1.0) | `MUSIC_START_VOLUME = 0.5`
51+
| MUSIC_FILE_NAME | The name of the music file to play in the "music/" folder | `MUSIC_FILE_NAME = music.mp3`
4952

5053
## Customize
5154

‎web/assets/music.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import {MUSIC_ENABLED, MUSIC_FILE_NAME, MUSIC_START_VOLUME, SERVER_LOGO_POSITION, ENABLE_SERVER_LOGO} from "../config.js";
2+
3+
const music = document.getElementById("loadscreen-music");
4+
const musicControls = document.getElementById("audio-controls")
5+
const validLocations = ['top-left', "top-right", 'bottom-right']
6+
7+
// Make sure we don't overlap with the logo option
8+
const determineMusicLocation = () => {
9+
if (!ENABLE_SERVER_LOGO) {
10+
musicControls.classList.add('top-left')
11+
} else {
12+
13+
for (const location of validLocations) {
14+
if (SERVER_LOGO_POSITION === location) continue;
15+
musicControls.classList.add(location)
16+
break;
17+
}
18+
}
19+
}
20+
21+
// Will toggle location logic and opacity
22+
const showMusicControls = () => {
23+
determineMusicLocation()
24+
musicControls.style.opacity = '100';
25+
}
26+
27+
// Basic function for starting music
28+
export const startMusic = () => {
29+
if (!MUSIC_ENABLED) return;
30+
31+
showMusicControls();
32+
33+
// Setup music volume
34+
music.src = `music/${MUSIC_FILE_NAME}`;
35+
music.volume = MUSIC_START_VOLUME;
36+
37+
document.addEventListener('keypress', (event) => {
38+
switch (event.key) {
39+
case 'p':
40+
if (music.paused) music.play();
41+
else music.pause();
42+
break;
43+
case 'w': {
44+
const wantedNewVol = music.volume + 0.05
45+
if (wantedNewVol > 1) return;
46+
music.volume = wantedNewVol;
47+
break;
48+
}
49+
case 's': {
50+
const wantedNewVol = music.volume - 0.05;
51+
if (wantedNewVol < 0) return;
52+
music.volume = wantedNewVol
53+
break;
54+
}
55+
}
56+
});
57+
}
58+
59+
export const stopMusic = () => {
60+
if (!music.paused) music.pause()
61+
musicControls.opacity = '0'
62+
}

‎web/assets/script.js‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,13 @@ import {
33
BACKGROUND_CHANGE_INTERVAL,
44
BACKGROUND_IMAGES,
55
ENABLE_CURSOR,
6-
SERVER_LOGO_POSITION, ENABLE_SERVER_LOGO
6+
SERVER_LOGO_POSITION,
7+
ENABLE_SERVER_LOGO,
8+
MUSIC_ENABLED
79
} from '../config.js'
810

911
import { parsedMdTips } from "./markdown_parser.js";
12+
import {startMusic, stopMusic} from "./music.js";
1013

1114
/**
1215
* @typedef {Object} TooltipObject
@@ -17,7 +20,7 @@ import { parsedMdTips } from "./markdown_parser.js";
1720
const headerEl = $('#tip-header')
1821
const contentEl = $('#tip-content')
1922
const hintHelpTxtEl = $('#hint-help-text')
20-
const containerEL = $('#container')
23+
const containerEL = $('#page-wrapper')
2124
const bgImgEl = $('#bgImg')
2225
const spinnerEl = $('#spinner')
2326
const logoEl = $('#server-logo')
@@ -96,10 +99,11 @@ const setRandomTip = () => {
9699
}
97100

98101
/**
99-
* Fade out the whole loading screen container
102+
* Shutdowns and cleanups loading frame
100103
**/
101-
const fadeoutLoadingScreen = () => {
104+
const cleanupLoadingScreen = () => {
102105
containerEL.fadeOut('slow')
106+
if (MUSIC_ENABLED) stopMusic();
103107
}
104108

105109
let currentBgIdx = 0
@@ -137,6 +141,7 @@ window.addEventListener('DOMContentLoaded', () => {
137141
setRandomTip()
138142
setupServerLogo()
139143
spinnerEl.fadeIn()
144+
startMusic()
140145
})
141146

142147
window.addEventListener('keydown', (e) => {
@@ -148,9 +153,9 @@ window.addEventListener('keydown', (e) => {
148153
})
149154

150155
window.addEventListener('message', (e) => {
151-
// We get this from the client scripts
156+
// This is the shutdown message that is sent by client script
152157
if (e.data.fullyLoaded) {
153-
return fadeoutLoadingScreen()
158+
cleanupLoadingScreen()
154159
}
155160
})
156161

‎web/assets/styles.css‎

Lines changed: 43 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -32,17 +32,20 @@ a[onclick] {
3232
}
3333
}
3434

35+
.material-icons-outlined.md-primary { color: var(--primary-text)}
3536

3637
.material-icons-outlined.md-light { color: var(--secondary-text) }
3738

3839
.material-icons-outlined.md-18 { font-size: 18px; }
3940
.material-icons-outlined.md-24 { font-size: 24px; }
41+
.material-icons-outlined.md-26 { font-size: 26px; }
4042
.material-icons-outlined.md-36 { font-size: 36px; }
4143
.material-icons-outlined.md-48 { font-size: 48px; }
4244

4345
:root {
4446
--primary-text: #fff;
4547
--secondary-text: #8F8F8F;
48+
--main-bg: rgba(0, 0, 0, 0.85)
4649
}
4750

4851
#cursor {
@@ -83,19 +86,48 @@ a[onclick] {
8386
z-index: 2;
8487
}
8588

86-
#server-logo.top-left {
87-
top: 2.5vh;
88-
left: 2.5vh;
89+
#audio-controls {
90+
height: 150px;
91+
width: 300px;
92+
z-index: 10;
93+
box-sizing: border-box;
94+
padding: 20px;
95+
color: var(--primary-text);
96+
position: absolute;
97+
opacity: 0;
98+
transition: opacity 0.5s ease-in-out;
99+
background: var(--main-bg);
100+
}
101+
102+
#audio-controls > .header {
103+
font-size: 1.2rem;
104+
font-weight: 500;
105+
margin-bottom: 10px;
106+
}
107+
108+
.audio-control-item {
109+
display: flex;
110+
align-items: center;
111+
}
112+
113+
.audio-control-item > .control-text {
114+
margin-left: 5px;
115+
font-weight: normal;
116+
}
117+
118+
.top-left {
119+
top: 3vh;
120+
left: 3vh;
89121
}
90122

91-
#server-logo.top-right {
92-
top: 2.5vh;
93-
right: 2.5vh;
123+
.top-right {
124+
top: 3vh;
125+
right: 3vh;
94126
}
95127

96-
#server-logo.bottom-right {
97-
bottom: 2.5vh;
98-
right: 2.5vh;
128+
.bottom-right {
129+
bottom: 3vh;
130+
top: 3vh;
99131
}
100132

101133
#server-logo.center {
@@ -143,7 +175,7 @@ a[onclick] {
143175
align-items: center;
144176
}
145177

146-
#container {
178+
#page-wrapper {
147179
height: 100%;
148180
width: 100%;
149181
display: flex;
@@ -171,7 +203,7 @@ a[onclick] {
171203
width: min(70vw, 1300px);
172204
height: 150px;
173205
padding: 20px;
174-
left: 50px;
206+
left: 3vh;
175207
margin-bottom: 3vh;
176208
transition: opacity linear .25s;
177209
z-index: 15;

‎web/assets/utils.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,6 @@ export function cleanUrl(sanitize, base, href) {
2424
return null;
2525
}
2626
return href;
27-
}
27+
}
28+
29+
export const getCurrentScriptsName = () => window.GetParentResourceName ? GetParentResourceName() : ''

‎web/config.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const LOADSCREEN_TIPS = [
2727
}
2828
];
2929

30-
// How long a tip is on screen before we automatically
30+
// How long a tip is on screen before we aut omatically
3131
// go to the next one (ms)
3232
export const TIP_CHANGE_INTERVAL = 10000
3333

@@ -43,6 +43,16 @@ export const BACKGROUND_IMAGES = [
4343
"4.jpg",
4444
]
4545

46+
// Whether music should be played while loading,
47+
// this will automatically loop the file as well
48+
export const MUSIC_ENABLED = true
49+
50+
// The file name given to your music. This can be
51+
// a .ogg or an .mp3 (MUST BE PRESENT IN `music/` folder)
52+
export const MUSIC_FILE_NAME = 'music.mp3'
53+
54+
export const MUSIC_START_VOLUME = 0.3
55+
4656
// Whether we should enable the cursor for the loadscreen
4757
export const ENABLE_CURSOR = true
4858

@@ -54,4 +64,4 @@ export const ENABLE_GFM_MARKDOWN = false
5464
export const ENABLE_SERVER_LOGO = true
5565

5666
// Define server logo placement ['top-left', 'top-right', 'bottom-right', 'center']
57-
export const SERVER_LOGO_POSITION = 'center'
67+
export const SERVER_LOGO_POSITION = 'top-right'

‎web/index.html‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,49 @@
77

88
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
99
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
10+
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js" integrity="sha512-6+YN/9o9BWrk6wSfGxQGpt3EUK6XeHi6yeHV+TYD2GR0Sj/cggRpXr1BrAQf0as6XslxomMUxXp2vIl+fv0QRA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
1011
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
1112
<link rel="stylesheet" href="assets/styles.css">
1213

1314
<title>PE-LOADING-SCREEN</title>
1415
</head>
1516
<body>
16-
<div id="container">
17+
<audio id="loadscreen-music" autoplay="autoplay" autostart loop preload src="">
18+
</audio>
19+
<div id="page-wrapper">
1720
<div id="cursor"></div>
1821
<div id="bgImg"></div>
1922
<div id="server-logo"></div>
23+
<div id="audio-controls">
24+
<div class="header">Music Control</div>
25+
<div class="audio-control-item">
26+
<span class="material-icons-outlined md-primary md-26">
27+
volume_up
28+
</span>
29+
<div class="control-text">
30+
[W] - Volume Up
31+
</div>
32+
</div>
33+
<div class="audio-control-item">
34+
<span class="material-icons-outlined md-primary md-26">
35+
volume_down
36+
</span>
37+
<div class="control-text">
38+
[S] - Volume Down
39+
</div>
40+
</div>
41+
<div class="audio-control-item">
42+
<span class="material-icons-outlined md-primary md-26">
43+
pause
44+
</span>
45+
<div class="control-text">
46+
<div class="control-text">
47+
[P] - Play/Pause
48+
</div>
49+
</div>
50+
</div>
51+
52+
</div>
2053
<div id="tip-container">
2154
<div class="header-container">
2255
<div class="header-text" id="tip-header"></div>

‎web/music/music.mp3‎

1.61 MB
Binary file not shown.

0 commit comments

Comments
 (0)