add slow loading with sfx
Marco Andronaco andronacomarco@gmail.com
Mon, 19 Sep 2022 00:51:12 +0200
16 files changed,
143 insertions(+),
37 deletions(-)
jump to
M
index.html
→
index.html
@@ -11,6 +11,11 @@ <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>ðŸ¥</text></svg>">
</head> <body style='background-image: url("res/img/background.jpg"); height: 100%;'> + <div id="overlay" onclick="start()"> + <div style="margin:auto;"> + Click here to enter. + </div> + </div> <div id="main-container"> <div class="center" style="padding-top:30px;"> <a onclick="goToPage('about')">
M
pages/about.html
→
pages/about.html
@@ -9,7 +9,7 @@
<body> <h1>About me</h1> - <script src="../res/slow_load.js"></script> + <script src="../res/iframe.js"></script> </body> </html>
M
pages/anime.html
→
pages/anime.html
@@ -16,7 +16,7 @@ Gurren Lagann
Dragon Quest Dai's Adventure (remake 2021) --> - <script src="../res/slow_load.js"></script> + <script src="../res/iframe.js"></script> </body> </html>
M
pages/dragonquest.html
→
pages/dragonquest.html
@@ -11,7 +11,7 @@
<body> <h1>Dragon Quest</h1> - <script src="../res/slow_load.js"></script> + <script src="../res/iframe.js"></script> </body> </html>
M
pages/earthbound.html
→
pages/earthbound.html
@@ -11,7 +11,7 @@
<body> <h1>Earthbound</h1> - <script src="../res/slow_load.js"></script> + <script src="../res/iframe.js"></script> </body> </html>
M
pages/gf.html
→
pages/gf.html
@@ -11,7 +11,7 @@
<body> <h1>My love Giulia</h1> - <script src="../res/slow_load.js"></script> + <script src="../res/iframe.js"></script> </body> </html>
M
pages/indies.html
→
pages/indies.html
@@ -16,8 +16,10 @@ <h2>Fran Bow</h2>
<h2>Psychonauts</h2> <h2>Undertale</h2> <h2>Hylics</h2> - - <script src="../res/slow_load.js"></script> + <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> + <h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2> + + <script src="../res/iframe.js"></script> </body> </html>
M
pages/zelda.html
→
pages/zelda.html
@@ -11,7 +11,7 @@
<body> <h1>The Legend of Zelda</h1> - <script src="../res/slow_load.js"></script> + <script src="../res/iframe.js"></script> </body> </html>
A
res/iframe.js
@@ -0,0 +1,59 @@
+const loadAudio = [ + new Audio(url="../res/sfx/os/loadelement1.ogg"), + new Audio(url="../res/sfx/os/loadelement2.ogg"), + new Audio(url="../res/sfx/os/loadelement3.ogg"), + new Audio(url="../res/sfx/os/loadelement4.ogg") +] +const not_allowed = ["AUDIO", "META", "TITLE", "LINK", "SOURCE", "SCRIPT", "BR"]; + +function getRandomInt(min, max) { + min = Math.ceil(min); + return Math.floor(Math.random() * (Math.floor(max) - min + 1)) + min; +} + +function playAudio(audio){ + audio.volume = 0.1; + audio.currentTime = 0; + audio.play(); +} + +const all = document.getElementsByTagName("*"); +let total = 0; +for (i in all) { + const node = all[i]; + if((node.childElementCount == 0) && (not_allowed.indexOf(node.tagName) === -1) && node.style){ + total++; + node.setAttribute("data-display", node.style.display); + node.style.display = "none"; + } +} + +function start_loading(speed=parent.loadSpeed, not_allowed=[], callback) { + + function onNodeLoaded(node){ + node.style.display = node.getAttribute("data-display"); + counter++; + ratio = counter / total * 100; + randomAudio(); + + if (ratio >= 100 && callback) + callback() + } + + let counter = 0; + let i = 0; + for (element in all) { + const node = all[element]; + if((node.childElementCount == 0) && (not_allowed.indexOf(node.tagName) === -1) && node.style){ + + i += getRandomInt(250 / speed, 500 / speed); + setTimeout(() => { onNodeLoaded(node);}, i); + } + } +} + +function randomAudio(){ + const random_audio = getRandomInt(0, loadAudio.length - 1); + playAudio(loadAudio[random_audio]); +} +
M
res/script.js
→
res/script.js
@@ -6,6 +6,7 @@ const music_song = document.getElementById("music-player-song");
const music_song_text = document.getElementById("song-text"); const clickAudio1 = new Audio(url="res/sfx/os/click2.ogg"); const clickAudio2 = new Audio(url="res/sfx/os/click1.ogg"); +const loadSpeed = 2; const tracks = { "awesome": {@@ -58,37 +59,51 @@ }
let first = false; let play = false; +let controlsEnabled = false; let currentPage = "about"; let currentTrack = ""; let showTimeout, hideTimeout; -function playAudio(audio){ - audio.volume = 0.1; - audio.currentTime = 0; - audio.play(); +function firstPlay(){ + if(first) return; + document.getElementById("music-player").style.bottom = "0"; + music.volume = 0.1; + controlsEnabled = true; + playPause(false, page_tracks[currentPage]); + first = true; +} + +function loadIFrame(callback){ + iframe.contentWindow.start_loading(speed=loadSpeed, not_allowed, callback); } function firstClickPlay(element) { + const overlay = document.getElementById("overlay"); + if(overlay) { + overlay.remove(); + slow_load(speed=loadSpeed, not_allowed, () => { loadIFrame(firstPlay) }); + } + click1 = clickAudio1 || parent.clickAudio1; click2 = clickAudio2 || parent.clickAudio2; playAudio(click1) element.onmousedown = () => playAudio(click1); element.onmouseup = () => playAudio(click2); - - if(first) return; - document.getElementById("music-player").style.bottom = "0"; - music.volume = 0.1; - playPause(false, page_tracks[currentPage]); - first = true; } function goToPage(page) { - if(currentPage == page) - return + if (!controlsEnabled || currentPage == page) return + + music.pause() + controlsEnabled = false; iframe.src = "pages/" + page + ".html"; - playPause(!play, page_tracks[page]) + + iframe.addEventListener("load", () => { loadIFrame(()=> { controlsEnabled = true; playPause(!play, page_tracks[page]); }); }, {once: true}) + currentPage = page; + + } function formatTrack(track) {@@ -115,6 +130,8 @@ }
function playPause(toggle=play, track=currentTrack) { + if (!controlsEnabled) + return; if (toggle){ music_base.classList.remove("player-play"); music.pause();
M
res/slow_load.js
→
res/slow_load.js
@@ -1,29 +1,44 @@
+const loadAudio = [ + new Audio(url="res/sfx/os/loadelement1.ogg"), + new Audio(url="res/sfx/os/loadelement2.ogg"), + new Audio(url="res/sfx/os/loadelement3.ogg"), + new Audio(url="res/sfx/os/loadelement4.ogg") +] +const not_allowed = ["AUDIO", "META", "TITLE", "LINK", "SOURCE", "SCRIPT", "BR"]; +function getRandomInt(min, max) { + min = Math.ceil(min); + return Math.floor(Math.random() * (Math.floor(max) - min + 1)) + min; +} -function slow_load(speed=0.5, not_allowed=[], callback) { +function playAudio(audio){ + audio.volume = 0.1; + audio.currentTime = 0; + audio.play(); +} +function slow_load(speed=10, not_allowed=[], callback) { + function onFinish(node, initial_display){ node.style.display = initial_display; counter++; ratio = counter / total * 100; + + randomAudio(); if (ratio >= 100 && callback) callback() } - - function getRandomInt(min, max) { - min = Math.ceil(min); - return Math.floor(Math.random() * (Math.floor(max) - min + 1)) + min; - } const all = document.getElementsByTagName("*"); let counter = 0; let total = 0; let i = 0; - for (i in all) { - const node = all[i]; + for (element in all) { + + const node = all[element]; if((node.childElementCount == 0) && (not_allowed.indexOf(node.tagName) === -1) && node.style){ - i += getRandomInt(5 / speed, 20 / speed); + i += getRandomInt(250 / speed, 500 / speed); total++; const initial_display = node.style.display; node.style.display = "none";@@ -32,11 +47,7 @@ }
} } -const not_allowed = ["META", "TITLE", "LINK", "SOURCE", "SCRIPT"]; - -function finishedCallback() { - console.log("FINISHED!"); +function randomAudio(){ + const random_audio = getRandomInt(0, loadAudio.length - 1); + playAudio(loadAudio[random_audio]); } - -// page logic -slow_load(speed=1.25, not_allowed, finishedCallback);
M
res/style.css
→
res/style.css
@@ -3,6 +3,18 @@ font-family: '04b_03';
src: url('ttf/04b03.ttf') format('truetype'); } +#overlay { + position: absolute; + text-align: center; + padding-top: 450px; + top: 0; + left: 0; + width:100%; + height:100%; + background-color: black; + z-index: 999; +} + html { font-family: "04b_03"; color: white;