Viewing Program

Program Data

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

Title	🔊 Song Player: Warriyo - Mortals (feat. Laura Brehm) [NCS Release]
ID	6431239874985984
Created	3 months ago, 1727727479146
Updated	3 months ago, 1727728050854
Code	<!DOCTYPE html> <!-- Song Player: Warriyo - Mortals (feat. Laura Brehm) by LeaferStudios Turn up your volume and press start. What song is this? It is a very popular no-copyright song from 2016. What genre? Future trap. Lyrics? No. First ever complete song player on Khan Academy! For more quality programs, subscribe: https://www.khanacademy.org/computer-programming/leaferstudios/4934504502870016 Track: Warriyo - Mortals (feat. Laura Brehm) [NCS Release] Music provided by NoCopyrightSounds. This is an audio player demonstration complete with an audio visualizer. 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 September 30, 2024 All code by LeaferStudios (https://www.khanacademy.org/profile/kaid_553656479258879622339276/projects) --> <!-- Optimized for Khan Academy. 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: Warriyo - Mortals (feat. Laura Brehm) [NCS Release]</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: #FFF; } html, body { background-color: #212121; height: 100%; width: 100%; overflow: hidden; margin: 0; padding: 0; font-family: var(--main-font); color: #FFF; } 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: #1B5E20; color: #FFF; font-family: var(--main-font); transition: background-color 0.2s, transform 0.4s; } #toggleButton span, #playButton span, #pauseButton span { display: block; } #toggleButton:hover, #playButton:hover, #pauseButton:hover { cursor: pointer; background-color: #388E3C; color: #FFF; } #pauseButton { background-color: #004D40 !important; } #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 { border: 2px solid rgba(46, 125, 50, 0.8); background-color: rgba(46, 125, 50, 0.8); color: #FFF; 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 #33691E; background-color: #33691E !important; } #nextButton i.material-icons { margin-left: 0.2px; } #prevButton i.material-icons { margin-right: 0.2px; } #prevButton:hover, #nextButton:hover { border: 2px solid #1B5E20; cursor: pointer; color: #FFF; background-color: #1B5E20; } #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: #FFF; 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: #1B5E20; height: 65px; line-height: 65px; width: 100%; display: flex; justify-content: center; } .navbar a.navlink { color: #FFF; 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); background-image: radial-gradient(#14532D, #052E16); width: 100%; height: calc(100% - 70px - 65px - 50px); overflow: hidden; } #title { font-size: 27px; margin: 0; height: 70px; line-height: 70px; } ul li { margin: 20px 0; } a { color: rgb(100, 221, 23); text-decoration: none; transition: all 0.1s; } a:hover { color: rgb(68, 158, 3); text-decoration: underline; } </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> </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'> <h1 class='center p-l-4 p-r-4' id='title'>Warriyo - Mortals (feat. Laura Brehm)</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> </div> <div class='scene full-height p-3 p-l-5 p-r-5'> <h1>Welcome</h1> <ul><li>Track: Warriyo - Mortals (feat. Laura Brehm) [NCS Release]<br>Music provided by NoCopyrightSounds.</li><li>This is an audio player demonstration. 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 September 30, 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/test1.js"></script> <script></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 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.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.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(" + s / 2 + ", 200, 83)", t.canvasCtx.fillRect(o, t.canvas.height - s / 3, n, s / 3), o += n + 1 }() }, 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.nextTrack = function() { this.currentIndex < this.audioArray.length - 1 ? (this.currentIndex++, this.loadAudio(this.currentIndex), this.elapsedTime = 0, this.togglePlayPause()) : document.getElementById("loadingNotif").innerHTML = "No more tracks available" }, Base64AudioPlayer.prototype.prevTrack = function() { this.currentIndex > 0 ? (this.currentIndex--, this.loadAudio(this.currentIndex), this.elapsedTime = 0, this.togglePlayPause()) : 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 = [LeaferStudios64NCSTest1], 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() }); </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! You must always keep the license below or else I will submit a DMCA takedown notice. If it is on Khan Academy, it will get taken down. --> <!-- 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	26,1117
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNvB26W2Cww
Votes	6
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	3 months ago, 1727727713372
Updated	3 months ago, 1727730105075
Source Deleted	unknown