Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	🔊 Song Player: Elektronomia - Sky High
ID	5456240516710400
Created	1 months ago, 1732148795442
Updated	1 months ago, 1732148911043
Code	<!DOCTYPE html> <!-- 🔊 Song Player: Elektronomia - Sky High by LeaferStudios Turn up your volume and click start! What songs is this? It is a very popular no-copyright song What music genre? Progressive House First ever complete song player on Khan Academy! For more quality programs, subscribe: https://www.khanacademy.org/computer-programming/leaferstudios/4934504502870016 This is an audio player demonstration, version 3, complete with an audio visualizer, easy theme options, animated background and particle effects, and multiple song functionality (not demonstrated). I have checked with a Khan Academy guardian and confirmed that this follows the guidelines. Suggestions and feedback are appreciated, leave them in the tips & thanks section below on Khan Academy. Released on November 20, 2024 All code by LeaferStudios (https://www.khanacademy.org/profile/kaid_553656479258879622339276/projects) --> <!-- Optimized for Khan Academy. On KA, do not edit code after playing. No lag due to Base64! --> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta charset="UTF-8" /> <title>🔊 Song Player: Elektronomia - Sky High</title> <meta name="description" content="Base64 to JavaScript Web Audio API Player Library Demonstration for Khan Academy Computing Community by @LeaferStudios on September XX, 2024" /> <meta name="author" content="LeaferStudios" /> <meta name="keywords" content="LeaferStudios,Song,Audio,Base64,WebAudioAPI,Library,Demo,KhanAcademy,JavaScript" /> <!-- Meta tag to ensure the website scales the same across all devices for responsive web design --> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Preconnect to the Google Fonts API to improve loading performance --> <link rel="preconnect" href="https://fonts.googleapis.com" /> <!-- Preconnect to the Google Fonts API's static assets (like font files) to improve loading performance --> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=YouTube+Sans&family=Roboto+Serif:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Inclusive+Sans:ital@0;1&display=swap" rel="stylesheet" /> <!-- Link to Google Material Icons, a library of icons for use in the webpage --> <link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet" /> <style> * { --main-font: 'Inclusive Sans', ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, sans-serif, Segoe UI Emoji, Segoe UI Symbol; --text: var(--white); --colorone: rgb(46, 46, 46); --colortwo: rgb(115, 115, 115); --colorthree: linear-gradient(45deg, rgb(255, 157, 0), rgb(255, 255, 0), rgb(255, 145, 0), rgb(240, 208, 24)); /* must be radial gradient / --white: #FFF9C4; --colorlink: rgb(230, 222, 0); --colorlinkhover: rgb(163, 158, 0); } html, body { background-color: #212121; color: #FFF; height: 100%; width: 100%; overflow: hidden; margin: 0; padding: 0; font-family: var(--main-font); color: var(--white); } h1 { font-size: calc(1.375rem + 1.5vw); color: var(--text); } h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: 500; color: var(--text); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } .text-left { text-align: left; } .text-right { text-align: right; } .no-space { margin: 0 !important; padding: 0 !important; } .container { margin: 0 auto; padding: 1rem; width: 100%; } .full-height { height: 100%; } p { font-size: 1em; line-height: 24px; color: var(--text); } .no-select { user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; } h1, h2, h3, h4, h5, h6 { font-weight: 500; } :focus { outline: none; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgb(89, 89, 89); } ::-webkit-scrollbar-thumb:hover { background: rgb(84, 84, 84); } #toggleButton { position: fixed; bottom: 20px; left: 50%; transform: translate(-50%, -50%); } #toggleButton, #playButton, #pauseButton { width: 100px; height: 100px; border-radius: 100%; border: none; background-color: var(--colorone); color: var(--white); font-family: var(--main-font); transition: background-color 0.2s, transform 0.4s; z-index: 2; } #toggleButton span, #playButton span, #pauseButton span { display: block; } #toggleButton:hover, #playButton:hover, #pauseButton:hover { cursor: pointer; background-color: var(--colortwo); color: var(--white); } #loopButton { position: fixed; left: 20px; top: 150px; z-index: 2; } #manualButton { position: fixed; left: 150px; top: 150px; z-index: 2; } #autoplayButton { position: fixed; right: 20px; top: 150px; z-index: 2; } #loopButton, #manualButton, #autoplayButton { width: 100px; height: 60px; border-radius: 400px; font-size: 12px; border: none; background-color: var(--colorone); color: var(--white); background-color: rgb(74, 74, 74); font-family: var(--main-font); transition: background-color 0.2s, transform 0.4s; z-index: 2; } #loopButton span, #manualButton span, #autoplayButton span { display: block; } #loopButton:hover, #manualButton:hover, #autoplayButton:hover { cursor: pointer; background-color: rgb(97, 97, 97); color: var(--white); } #loopButton.on, #manualButton.on, #autoplayButton.on { background-color: var(--colorone); color: var(--white); } #loopButton.on:hover, #manualButton.on:hover, #autoplayButton.on:hover { cursor: pointer; background-color: #FBC02D; color: var(--white); } #loopButton:active, #manualButton:active, #autoplayButton:active { transform: scale(0.9); } #pauseButton { background-color: #004D40 !important; z-index: 2; } #pauseButton:hover { background-color: #00695C !important; } #playButton:focus, #pauseButton:focus { transform: scale(0.9); } #toggleButton:active { transform: translate(-50%, -50%)scale(0.9); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } i.material-icons { vertical-align: middle; } .center { text-align: center; } #timeDisplay { font-family: 'IBM Plex Sans', ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, sans-serif, Segoe UI Emoji, Segoe UI Symbol; position: fixed; right: 20px; bottom: 15px; } button { font-family: 'IBM Plex Sans', ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, sans-serif, Segoe UI Emoji, Segoe UI Symbol; } #prevButton, #nextButton { z-index: 2; border: 2px solid var(--colortwo); background-color: var(--colorone); color: var(--white); width: 75px; height: 75px; border-radius: 50%; text-align: center; padding: 0; transition: background-color 0.2s, border 0.2s, transform 0.4s ease-out; } #prevButton:active, #nextButton:active { transform: scale(0.9); border: 2px solid var(--colortwo); background-color: var(--colorone) !important; } #nextButton i.material-icons { margin-left: 0.2px; } #prevButton i.material-icons { margin-right: 0.2px; } #prevButton:hover, #nextButton:hover { border: 2px solid var(--colorone); cursor: pointer; color: var(--white); background-color: var(--colortwo); } #prevButton { position: fixed; left: 20px; bottom: 80px; } #nextButton { position: fixed; right: 20px; bottom: 80px; } #loadingNotif { position: fixed; bottom: 0px; width: 100%; height: 50px; line-height: 50px; background: #263238; text-align: left; padding-left: 20px; } .audioNotification { margin: 0; display: block; color: var(--white); font-family: 'IBM Plex Sans', ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, sans-serif, Segoe UI Emoji, Segoe UI Symbol; } .audioError { display: block; color: #E57373; font-family: 'IBM Plex Sans', ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, sans-serif, Segoe UI Emoji, Segoe UI Symbol; } #audioNotif { max-height: 50%; overflow: scroll; width: 100%; } .navbar { background-color: var(--colorone); height: 65px; line-height: 65px; width: 100%; display: flex; justify-content: center; z-index: 33; } .navbar a.navlink { color: var(--white); text-decoration: none; padding: 0 16px; transition: border-bottom 0.5s ease-out; border-bottom: 6px solid transparent; } .navbar a.navlink.active { border-bottom: 2px solid white; } #visualizer { position: fixed; top: calc(65px + 70px); animation: 15s vanim ease-in-out infinite; background-image: var(--colorthree); background-size: 500% 500%; width: 100%; height: calc(100% - 70px - 65px - 50px); overflow: hidden; z-index: 0; } @keyframes vanim { 0% { background-position: 0% 50%; } 50% { background-position: 100% 150%; } 100% { background-position: 0% 50%; } } #title { font-size: 27px; margin: 0; height: 70px; line-height: 70px; } ul li { margin: 20px 0; } a { color: var(--colorlink); text-decoration: none; transition: all 0.1s; } a:hover { color: var(--colorlinkhover); text-decoration: underline; } #blockLoadingSpinner { position: fixed; top: 50%; bottom: 0; left: 0; right: 0; background-color: #1a5e20; transition: all 0.2s; opacity: 0; z-index: -1; } #blockLoadingSpinner.loading { opacity: 1; z-index: 3; } .loader { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; width: 60px; aspect-ratio: 1; border-radius: 50%; border: 6px solid rgb(37, 50, 55); border-right-color: rgb(46, 156, 50); animation: loaderAnim1 0.5s infinite linear; } @keyframes loaderAnim1 { to { transform: translate(-50%, -50%)rotate(1turn) } } </style> <!-- Margin & padding utilities --> <style> / Margin & Padding Utilities / / Padding Top / .p-t-0 { padding-top: 0; / Top padding 0 - equals to 0px / } .p-t-1 { padding-top: 0.25rem; / Top padding 1 - equals to 4px / } .p-t-2 { padding-top: 0.5rem; / Top padding 2 - equals to 8px / } .p-t-3 { padding-top: 1rem; / Top padding 3 - equals to 16px / } .p-t-4 { padding-top: 1.5rem; / Top padding 4 - equals to 24px / } .p-t-5 { padding-top: 3rem; / Top padding 5 - equals to 48px / } / Padding Bottom / .p-b-0 { padding-bottom: 0; / Bottom padding 0 - equals to 0px / } .p-b-1 { padding-bottom: 0.25rem; / Bottom padding 1 - equals to 4px / } .p-b-2 { padding-bottom: 0.5rem; / Bottom padding 2 - equals to 8px / } .p-b-3 { padding-bottom: 1rem; / Bottom padding 3 - equals to 16px / } .p-b-4 { padding-bottom: 1.5rem; / Bottom padding 4 - equals to 24px / } .p-b-5 { padding-bottom: 3rem; / Bottom padding 5 - equals to 48px / } / Padding Left / .p-l-0 { padding-left: 0; / Left padding 0 - equals to 0px / } .p-l-1 { padding-left: 0.25rem; / Left padding 1 - equals to 4px / } .p-l-2 { padding-left: 0.5rem; / Left padding 2 - equals to 8px / } .p-l-3 { padding-left: 1rem; / Left padding 3 - equals to 16px / } .p-l-4 { padding-left: 1.5rem; / Left padding 4 - equals to 24px / } .p-l-5 { padding-left: 3rem; / Left padding 5 - equals to 48px / } / Padding Right / .p-r-0 { padding-right: 0; / Right padding 0 - equals to 0px / } .p-r-1 { padding-right: 0.25rem; / Right padding 1 - equals to 4px / } .p-r-2 { padding-right: 0.5rem; / Right padding 2 - equals to 8px / } .p-r-3 { padding-right: 1rem; / Right padding 3 - equals to 16px / } .p-r-4 { padding-right: 1.5rem; / Right padding 4 - equals to 24px / } .p-r-5 { padding-right: 3rem; / Right padding 5 - equals to 48px / } / Margin / [class="m-1"] { margin: 0.25rem; /* Margin 1 - equals to 4px / } [class="m-2"] { margin: 0.5rem; /* Margin 2 - equals to 8px / } [class="m-3"] { margin: 1rem; /* Margin 3 - equals to 16px / } [class="m-4"] { margin: 1.5rem; /* Margin 4 - equals to 24px / } [class="m-5"] { margin: 3rem; /* Margin 5 - equals to 48px / } / Margin Top / .m-t-0 { margin-top: 0; / Top margin 0 - equals to 0px / } .m-t-1 { margin-top: 0.25rem; / Top margin 1 - equals to 4px / } .m-t-2 { margin-top: 0.5rem; / Top margin 2 - equals to 8px / } .m-t-3 { margin-top: 1rem; / Top margin 3 - equals to 16px / } .m-t-4 { margin-top: 1.5rem; / Top margin 4 - equals to 24px / } .m-t-5 { margin-top: 3rem; / Top margin 5 - equals to 48px / } / Margin Bottom / .m-b-0 { margin-bottom: 0; / Bottom margin 0 - equals to 0px / } .m-b-1 { margin-bottom: 0.25rem; / Bottom margin 1 - equals to 4px / } .m-b-2 { margin-bottom: 0.5rem; / Bottom margin 2 - equals to 8px / } .m-b-3 { margin-bottom: 1rem; / Bottom margin 3 - equals to 16px / } .m-b-4 { margin-bottom: 1.5rem; / Bottom margin 4 - equals to 24px / } .m-b-5 { margin-bottom: 3rem; / Bottom margin 5 - equals to 48px / } / Margin Left / .m-l-0 { margin-left: 0; / Left margin 0 - equals to 0px / } .m-l-1 { margin-left: 0.25rem; / Left margin 1 - equals to 4px / } .m-l-2 { margin-left: 0.5rem; / Left margin 2 - equals to 8px / } .m-l-3 { margin-left: 1rem; / Left margin 3 - equals to 16px / } .m-l-4 { margin-left: 1.5rem; / Left margin 4 - equals to 24px / } .m-l-5 { margin-left: 3rem; / Left margin 5 - equals to 48px / } / Margin Right / .m-r-0 { margin-right: 0; / Right margin 0 - equals to 0px / } .m-r-1 { margin-right: 0.25rem; / Right margin 1 - equals to 4px / } .m-r-2 { margin-right: 0.5rem; / Right margin 2 - equals to 8px / } .m-r-3 { margin-right: 1rem; / Right margin 3 - equals to 16px / } .m-r-4 { margin-right: 1.5rem; / Right margin 4 - equals to 24px / } .m-r-5 { margin-right: 3rem; / Right margin 5 - equals to 48px / } / Padding / [class="p-1"] { padding: 0.25rem; /* Padding 1 - equals to 4px / } [class="p-2"] { padding: 0.5rem; /* Padding 2 - equals to 8px / } [class="p-3"] { padding: 1rem; /* Padding 3 - equals to 16px / } [class="p-4"] { padding: 1.5rem; /* Padding 4 - equals to 24px / } [class="p-5"] { padding: 3rem; /* Padding 5 - equals to 48px / } </style> <!-- Responsive grid system --> <style> / Responsive Grid System / .row { display: flex; flex-wrap: wrap; margin: 0 -0.75rem; } .col { flex: 1 1 0; padding: 0 0.75rem; } @media (min-width: 576px) { / media queries for small columns / .col-sm-1 { flex: 0 0 8.33333333%; } .col-sm-2 { flex: 0 0 16.66666667%; } .col-sm-3 { flex: 0 0 25%; } .col-sm-4 { flex: 0 0 33.33333333%; } .col-sm-5 { flex: 0 0 41.66666667%; } .col-sm-6 { flex: 0 0 50%; } .col-sm-7 { flex: 0 0 58.33333333%; } .col-sm-8 { flex: 0 0 66.66666667%; } .col-sm-9 { flex: 0 0 75%; } .col-sm-10 { flex: 0 0 83.33333333%; } .col-sm-11 { flex: 0 0 91.66666667%; } .col-sm-12 { flex: 0 0 100%; } } @media (min-width: 768px) { .col-md-1 { flex: 0 0 8.33333333%; } .col-md-2 { flex: 0 0 16.66666667%; } .col-md-3 { flex: 0 0 25%; } .col-md-4 { flex: 0 0 33.33333333%; } .col-md-5 { flex: 0 0 41.66666667%; } .col-md-6 { flex: 0 0 50%; } .col-md-7 { flex: 0 0 58.33333333%; } .col-md-8 { flex: 0 0 66.66666667%; } .col-md-9 { flex: 0 0 75%; } .col-md-10 { flex: 0 0 83.33333333%; } .col-md-11 { flex: 0 0 91.66666667%; } .col-md-12 { flex: 0 0 100%; } } @media (min-width: 992px) { .col-lg-1 { flex: 0 0 8.33333333%; } .col-lg-2 { flex: 0 0 16.66666667%; } .col-lg-3 { flex: 0 0 25%; } .col-lg-4 { flex: 0 0 33.33333333%; } .col-lg-5 { flex: 0 0 41.66666667%; } .col-lg-6 { flex: 0 0 50%; } .col-lg-7 { flex: 0 0 58.33333333%; } .col-lg-8 { flex: 0 0 66.66666667%; } .col-lg-9 { flex: 0 0 75%; } .col-lg-10 { flex: 0 0 83.33333333%; } .col-lg-11 { flex: 0 0 91.66666667%; } .col-lg-12 { flex: 0 0 100%; } } @media (min-width: 1200px) { .col-xl-1 { flex: 0 0 8.33333333%; } .col-xl-2 { flex: 0 0 16.66666667%; } .col-xl-3 { flex: 0 0 25%; } .col-xl-4 { flex: 0 0 33.33333333%; } .col-xl-5 { flex: 0 0 41.66666667%; } .col-xl-6 { flex: 0 0 50%; } .col-xl-7 { flex: 0 0 58.33333333%; } .col-xl-8 { flex: 0 0 66.66666667%; } .col-xl-9 { flex: 0 0 75%; } .col-xl-10 { flex: 0 0 83.33333333%; } .col-xl-11 { flex: 0 0 91.66666667%; } .col-xl-12 { flex: 0 0 100%; } } </style> <style> .anim-bg { position: absolute; top: 300px; left: 0; bottom: 0; right: 0; z-index: 1; width: 100%; height: 100%; overflow: hidden; } .animatedSquare { position: fixed; background: rgba(255, 255, 255, 0.2); border: 4px solid rgb(255, 255, 255, 0.4); border-radius: 40%; bottom: -100px; text-align: center; animation: animatedSquare-anim 5s linear infinite; transition: left 7s; } @keyframes bulge { 0% { width: 30px; height: 30px; } 50% { width: 10px; height: 10px; } 100% { height: 30px; width: 30px; } } @keyframes animatedSquare-anim { 0% { bottom: 50px; opacity: 0; transform: scale(2)rotate(180deg); border: 1px solid rgb(255, 255, 255, 0.4); border-radius: 50%; } 50% { transform: scale(1.5) rotate(-360deg); opacity: 1; border: 4px solid rgb(112, 69, 4, 0.4); border-radius: 12%; } 52% { transform: scale(1)rotate(-360deg); opacity: 1; border: 4px solid rgb(112, 69, 4, 0.4); border-radius: 12%; } 54% { transform: scale(1.5)rotate(-360deg); opacity: 1; border: 4px solid rgb(112, 69, 4, 0.4); border-radius: 12%; } 70% { transform: scale(1.5)rotate(120deg); opacity: 1; border: 4px solid rgb(112, 69, 4, 0.4); border-radius: 12%; } 72% { transform: scale(1)rotate(-360deg); opacity: 1; border: 4px solid rgb(112, 69, 4, 0.4); border-radius: 12%; } 74% { transform: scale(1.5)rotate(120deg); opacity: 1; border: 4px solid rgb(112, 69, 4, 0.4); border-radius: 12%; } 100% { border: 4px solid rgb(27, 75, 207, 0.4); bottom: calc(100% - 135px); transform: scale(1) rotate(360deg); opacity: 0; border-radius: 50%; } } </style> </head> <body> <nav class='navbar no-select'> <a href='javascript:scene(0);' class='navlink'>Song</a> <a href='javascript:scene(1);' class='navlink'>About</a> <a href='javascript:scene(2);' class='navlink'>Console</a> </nav> <div class='scene'> <div class="anim-bg"></div> <h1 class='center p-l-4 p-r-4' id='title'>Elektronomia - Sky High</h1> <div id='loadingNotif' class='center no-select'> Loading... </div> <canvas id='visualizer'> </canvas> <div class='center no-select'> <div id="timeDisplay">0:00 / 0:00</div> <button id="toggleButton"> <i class='material-icons'>play_arrow</i> <span>Start</span> </button> </div> <button id="prevButton" class='no-select'><i class='material-icons'>chevron_left</i></button> <button id="nextButton" class='no-select'><i class='material-icons'>chevron_right</i></button> <!--<button id="loopButton" class=' no-select'><i class='material-icons'>loop</i><span>Loop Song</span></button> <button id="autoplayButton" class=' no-select'><i class='material-icons'>toggle_on</i><span>Autoplay</span></button>--> <div id='blockLoadingSpinner'> <div class="loader"></div> </div> </div> <div class='scene full-height p-3 p-l-5 p-r-5'> <h1>Welcome</h1> <ul> <li>Song: Elektronomia - Sky High [NCS Release] Music provided by NoCopyrightSounds</li> <li>Welcome to version 3 of Song Player by <a href='https://www.khanacademy.org/profile/kaid_553656479258879622339276/projects' target='_blank'>LeaferStudios</a>. I have checked with a Khan Academy guardian and confirmed that this follows the guidelines. Suggestions and feedback are appreciated, leave them in the tips & thanks section below on Khan Academy.</li> <li>Released on November 20, 2024</li> <li>All code by <a href='https://www.khanacademy.org/profile/kaid_553656479258879622339276/projects' target='_blank'>LeaferStudios</a></li> <li>For more quality programs, <a href='https://www.khanacademy.org/computer-programming/leaferstudios/4934504502870016' target='_blank'>Subscribe to LeaferStudios</a></li> </ul> </div> <div class='scene full-height'> <div id='audioNotif' class='p-3'> </div> </div> <script src="https://cdn.jsdelivr.net/gh/Longfields/LeaferStudios64/ncs/Elektronomia_SkyHigh.js"></script> <script type> function $(selector) { if (selector.startsWith("#")) { // Returns the 1 element in an array for consistency with other queries return [document.getElementById(selector.substring(1))]; } else { return document.querySelectorAll(selector); } } function scene(index) { window.scroll({ top: 0, left: 0, behavior: 'smooth' }); for (var i = 0; i < $('.scene').length; i++) { $('.scene')[i].style.display = 'none'; // visibility = hidden/visible does not work with fadeIn if (index !== 0) { $('.scene')[i].style.animation = '1s fadeIn forwards'; } } for (var i = 0; i < $('.navlink').length; i++) { $('.navlink')[i].className = 'navlink'; } $('.scene')[index].style.display = 'block'; $('.navlink')[index].className = 'navlink active'; } scene(0); </script> <script type> // Base64AudioPlayer © 2024 by LeaferStudios // v1 // Optimized for KA function Base64AudioPlayer(t) { this.audioArray = t, this.currentIndex = 0, this.audioContext = new(AudioContext \|\| webkitAudioContext), this.analyser = this.audioContext.createAnalyser(), this.analyser.fftSize = 256, this.source = null, this.buffer = null, this.isPlaying = !1, this.startTime = 0, this.elapsedTime = 0, this.duration = 0, this.hasEnded = !1, this.isPaused = !1, this.canvas = document.getElementById("visualizer"), this.canvasCtx = this.canvas.getContext("2d"), this.autoplay = !1, this.loopTrack = !1, this.loadAudio(this.currentIndex) } Base64AudioPlayer.prototype._convertBase64ToArrayBuffer = function(t) { for (var e = atob(t.split(",")[1]), i = e.length, a = new Uint8Array(i), n = 0; n < i; n++) a[n] = e.charCodeAt(n); return a.buffer }, Base64AudioPlayer.prototype.loadAudio = function(t) { if (t >= 0 && t < this.audioArray.length) { var e = this._convertBase64ToArrayBuffer(this.audioArray[t]), i = this; this.audioContext.decodeAudioData(e, function(t) { i.buffer = t, i.duration = t.duration, document.getElementById("loadingNotif").innerHTML = "Song loaded", document.getElementById("audioNotif").innerHTML += '<p class="audioNotification">' + (new Date).toLocaleString().replace(",", " •") + ": Audio loaded successfully</p>", i.updateTimeDisplay() }, function(t) { document.getElementById("audioNotif").innerHTML += '<p class="audioError">' + (new Date).toLocaleString().replace(",", " •") + ": Error decoding audio data: " + t + "</p>" }) } else document.getElementById("audioNotif").innerHTML += '<p class="audioNotification">' + (new Date).toLocaleString().replace(",", " •") + ": Index out of bounds</p>" }, Base64AudioPlayer.prototype.togglePlayPause = function() { this.hasEnded ? (this.play(), this.hasEnded = !1) : this.isPlaying ? this.pause() : !this.isPlaying && this.buffer && this.play() }, Base64AudioPlayer.prototype.play = function() { if (this.buffer) { this.source = this.audioContext.createBufferSource(), this.source.buffer = this.buffer, this.source.connect(this.analyser), this.analyser.connect(this.audioContext.destination); let t = this.elapsedTime > 0 ? this.elapsedTime : 0; this.startTime = this.audioContext.currentTime - t, this.source.start(0, t), this.isPlaying = !0, this.hasEnded = !1, this.isPaused = !1, this.updateButtonLabel("pause"), this.trackTime(), this.visualize(); let e = this; this.source.onended = function() { e.isPaused \|\| (e.loopTrack ? e.source.start(0, 0) : (e.isPlaying = !1, e.elapsedTime = 0, e.hasEnded = !0, e.updateButtonLabel("replay"))) } } }, Base64AudioPlayer.prototype.visualize = function() { let t = this, e = t.analyser.frequencyBinCount, i = new Uint8Array(e); ! function a() { if (!t.isPlaying) return; requestAnimationFrame(a), t.analyser.getByteFrequencyData(i), t.canvasCtx.clearRect(0, 0, t.canvas.width, t.canvas.height); let n = t.canvas.width / e 1.5, s, o = 0; for (let r = 0; r < e; r++) s = i[r], t.canvasCtx.fillStyle = "rgb(79, 79, 79, 0.8)", t.canvasCtx.fillRect(o, t.canvas.height - s / 3, n, s / 3), o += n + 0 - 0.5 }() }, Base64AudioPlayer.prototype.pause = function() { this.isPlaying && (this.source.stop(), this.elapsedTime = this.audioContext.currentTime - this.startTime, this.isPlaying = !1, this.isPaused = !0, this.updateButtonLabel("unpause")) }, Base64AudioPlayer.prototype.startLoadingAnimation = function() { document.getElementById("blockLoadingSpinner").classList.add("loading") }, Base64AudioPlayer.prototype.stopLoadingAnimation = function() { document.getElementById("blockLoadingSpinner").classList.remove("loading") }, Base64AudioPlayer.prototype.nextTrack = function() { this.currentIndex < this.audioArray.length - 1 ? (this.currentIndex++, this.loadAudio(this.currentIndex), this.isPlaying && this.pause(), this.elapsedTime = 0, this.startLoadingAnimation(), setTimeout(() => { this.stopLoadingAnimation(), this.autoplay ? this.play() : this.updateButtonLabel("play") }, 1e3)) : document.getElementById("loadingNotif").innerHTML = "No more tracks available" }, Base64AudioPlayer.prototype.prevTrack = function() { this.currentIndex > 0 ? (this.currentIndex--, this.loadAudio(this.currentIndex), this.isPlaying && this.pause(), this.elapsedTime = 0, this.startLoadingAnimation(), setTimeout(() => { this.stopLoadingAnimation(), this.autoplay ? this.play() : this.updateButtonLabel("play") }, 1e3)) : document.getElementById("loadingNotif").innerHTML = "This is the first track" }, Base64AudioPlayer.prototype.trackTime = function() { let t = this; this.isPlaying && (this.updateTimeDisplay(), requestAnimationFrame(function() { t.trackTime() })) }, Base64AudioPlayer.prototype.updateTimeDisplay = function() { let t = this.isPlaying ? this.audioContext.currentTime - this.startTime : this.elapsedTime; document.getElementById("timeDisplay").innerHTML = `${this._formatTime(t)} / ${this._formatTime(this.duration)}` }, Base64AudioPlayer.prototype._formatTime = function(t) { let e = Math.floor(t % 60); return `${Math.floor(t/60)}:${e<10?"0":""}${e}` }, Base64AudioPlayer.prototype.updateButtonLabel = function(t) { let e = document.getElementById("toggleButton"), i = e.querySelector(".material-icons"), a = e.querySelector("span"); switch (t) { case "play": i.textContent = "play_arrow", a.textContent = "Play"; break; case "pause": i.textContent = "pause", a.textContent = "Pause"; break; case "unpause": i.textContent = "play_arrow", a.textContent = "Unpause"; break; case "replay": i.textContent = "replay", a.textContent = "Replay" } }; var audioArray = [LeaferStudios64_Elektronomia_SkyHigh], player = new Base64AudioPlayer(audioArray); player.loadAudio(0), document.getElementById("toggleButton").addEventListener("click", function() { player.togglePlayPause() }), document.getElementById("nextButton").addEventListener("click", function() { player.nextTrack() }), document.getElementById("prevButton").addEventListener("click", function() { player.prevTrack() }); for (let i = 0; i < 15; i++) { // create animatedSquare let animatedSquare = document.createElement("div"); // store size let animatedSquareSize = Math.floor(Math.random() * 10) + 7; // set class to `animatedSquare` animatedSquare.className = "animatedSquare"; animatedSquare.style.zIndex = "-30000"; animatedSquare.style.left = Math.floor(Math.random() * window.screen.width) - 300 + "px"; // every four seconds, move the sqaure to a random spot (this happens smoothly because of the `transition` property its class has) setInterval(() => { animatedSquare.style.left = Math.floor(Math.random() * window.screen.width) - 300 + "px"; }, 4000); if (i % 2 === 0) { // if i is even animatedSquare.style.animation = "animatedSquare-anim 5s linear infinite, bulge 5.5s ease-in-out infinite"; } else { animatedSquare.style.animation = "animatedSquare-anim 5s linear infinite"; } // set a random size for the square. a variable keeps the same random value for both width and height animatedSquare.style.width = animatedSquareSize + "px"; animatedSquare.style.height = animatedSquareSize + "px"; // a delay to keep them from crowding animatedSquare.style.animationDelay = Math.floor(Math.random() * 10) + "s"; // at last, append the generated squares to the background document.getElementsByClassName("anim-bg")[0].appendChild(animatedSquare); } /document.getElementById("autoplayButton").addEventListener("click", function() { player.autoplay = !player.autoplay; this.classList.toggle("on", player.autoplay); }); document.getElementById("loopButton").addEventListener("click", function() { player.loopTrack = !player.loopTrack; this.classList.toggle("on", player.loopTrack); });/ </script> <script type="application/javascript"> document.body.addEventListener("keydown", function(e) { if (e.code === "Escape") { } if (e.code === "Enter") { e.preventDefault(); } }); /* document.body.innerHTML += ` <div style='text-align:center;position:absolute;top:0;left:0;right:0;bottom:50px;'> <h1 style="margin-top: 6px;font-size:70px;margin-bottom:10px;letter-spacing:5px;color:white;font-family:'IBM Plex Sans';font-weight:600;">Song Player</h1> <p style="position: absolute;bottom:180px;text-align:center;left:0;right:0;height:0px;letter-spacing:1px;color:white;font-size:25px;font-family:'IBM Plex Sans','Noto Sans',helvetica;"><span style='color:rgb(245, 239, 161) !important;'>Warriyo - Mortals (feat. Laura Brehm) [NCS Release]</span></p> <p style="position: absolute;bottom:80px;text-align:center;left:0;right:0;height:0px;letter-spacing:1px;color:white;font-size:25px;font-family:'IBM Plex Sans','Noto Sans',helvetica;"><i class='material-icons'style='vertical-align:middle;font-size:40px;position:relative;top:-2px;'>volume_up</i> <span style='color:rgb(255, 255, 255) !important;'>Full Song Player</span> <br></p> <p style="position: absolute;bottom:20px;text-align:center;left:0;right:0;height:0px;letter-spacing:1px;color:white;font-size:25px;font-family:'IBM Plex Sans','Noto Sans',helvetica;"><i class='material-icons'style='vertical-align:middle;font-size:30px;position:relative;top:-2px;'>language</i> <span style='color:rgb(163, 220, 247) !important;'>StaticSense™</span> Knowledge Database<br></p> </div> `;/ </script> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script> <script type> // credit to Bluebird@birdwatcher03 for this thumbnail script (only needed on Khan Academy, makes the thumbnail resolution better) var r = 600; var s = document.documentElement.clientWidth; window.parent.html2canvas = (e) => { try { html2canvas(document.body, { width: s, height: s, useCORS: true, }) .then((e) => { var c = document.createElement("canvas"); c.width = r; c.height = r; c.getContext("2d").drawImage( e, 0, 0, e.width, e.height, 0, 0, r, r ); window.top.postMessage(c.toDataURL(), ""); }) .catch((e) => { alert("Thumbnail Script Error: " + e); }); } catch { window.top.postMessage( document.createElement("canvas").toDataURL(), "*" ); } }; </script> </body> <!-- NOTE TO SELF: Keep this, this is required for my personal website's API and for Khan Academy projects. MIT License: You cannot plagiarize this program. --> <!-- MIT License Copyright (c) 2024 LeaferStudios Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. --> </html> <!-- © 2024 by LeaferStudios -->
Folds	22,1425
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgLvuv83YCQw
Votes	9
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	LeaferStudios
Author Name	LeaferStudios
Author ID	kaid_553656479258879622339276
Author Profile Access	PUBLIC

Archive Data

Added	1 months ago, 1732152427161
Updated	1 months ago, 1732152427161
Source Deleted	unknown