├── CNAME
├── .gitignore
├── img
├── logo-512.png
├── folder.svg
├── githubIcon.svg
└── discordIcon.svg
├── manifest.json
├── js
├── maxVolume.js
├── keyboardControls.js
├── audio.js
├── lightColors.js
├── app.js
├── interface.js
├── loop.js
└── data.js
├── LICENSE.md
├── README.md
├── service-worker.js
├── index.html
└── main.css
/CNAME:
--------------------------------------------------------------------------------
1 | stemplayeronline.com
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | notes.txt
2 | /songs
3 |
--------------------------------------------------------------------------------
/img/logo-512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lukew3/stemPlayerOnline/HEAD/img/logo-512.png
--------------------------------------------------------------------------------
/img/folder.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "dir": "ltr",
3 | "lang": "en",
4 | "name": "Stem Player Online",
5 | "short_name": "Stem Player",
6 | "description": "Play stems online",
7 | "icons": [
8 | {
9 | "src": "img/logo-512.png",
10 | "sizes": "512x512",
11 | "type": "image/png",
12 | "purpose": "any maskable"
13 | }
14 | ],
15 | "display": "standalone",
16 | "orientation": "portrait",
17 | "start_url": "/",
18 | "theme_color": "#2c2f33",
19 | "background_color": "#2c2f33"
20 | }
21 |
--------------------------------------------------------------------------------
/img/githubIcon.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/js/maxVolume.js:
--------------------------------------------------------------------------------
1 | /* Max Volume Control */
2 | const updateVolumes = (prevWholeMaxVol) => {
3 | tracks.forEach((track, index) => {
4 | track.volume = ((levels[index]-1)/3)*(wholeMaxVolume/8);
5 | });
6 | }
7 |
8 | const volumeLights = ["bottom_4", "bottom_3", "bottom_2", "bottom_1", "top_1", "top_2", "top_3", "top_4"];
9 | const displayVolume = () => {
10 | allLightsOff();
11 | for (let i=0; i<8; i++) {
12 | $(volumeLights[i]).style.backgroundColor = null;
13 | }
14 | for (let i=0; i {
19 | for (let i=0; i<8; i++) {
20 | $(volumeLights[i]).style.backgroundColor = null;
21 | }
22 | if (!inLoopMode) showStemLights();
23 | }, 800);
24 | }
25 |
--------------------------------------------------------------------------------
/js/keyboardControls.js:
--------------------------------------------------------------------------------
1 | document.addEventListener("keydown", (e) => {
2 | if (e.key == " ") {
3 | togglePlayback();
4 | } else if (e.key == "Control") {
5 | controlPressed = true;
6 | } else if (e.key.substring(0,5) == "Arrow") {
7 | let dir;
8 | if (e.key == "ArrowRight") dir = "right";
9 | else if (e.key == "ArrowUp") dir = "top";
10 | else if (e.key == "ArrowLeft") dir = "left";
11 | else if (e.key == "ArrowDown") dir = "bottom";
12 | dirLevel = levels[sliderNames.indexOf(dir)];
13 | if (controlPressed && dirLevel != 1)
14 | handleLightTap(dir, (dirLevel-1).toString());
15 | else if (!controlPressed && dirLevel != 4)
16 | handleLightTap(dir, (dirLevel+1).toString());
17 | }
18 | //todo: enable holding arrow key to isolate track (or shift+arrow maybe)
19 | })
20 |
21 | document.addEventListener("keyup", (e) => {
22 | if (e.key == "Control") controlPressed = false;
23 | });
24 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | This is free and unencumbered software released into the public domain.
2 |
3 | Anyone is free to copy, modify, publish, use, compile, sell, or
4 | distribute this software, either in source code form or as a compiled
5 | binary, for any purpose, commercial or non-commercial, and by any
6 | means.
7 |
8 | In jurisdictions that recognize copyright laws, the author or authors
9 | of this software dedicate any and all copyright interest in the
10 | software to the public domain. We make this dedication for the benefit
11 | of the public at large and to the detriment of our heirs and
12 | successors. We intend this dedication to be an overt act of
13 | relinquishment in perpetuity of all present and future rights to this
14 | software under copyright law.
15 |
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
22 | OTHER DEALINGS IN THE SOFTWARE.
23 |
24 | For more information, please refer to
25 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://stemplayeronline.com)
2 |
3 | # Stem Player Online
4 | An online stem player. Inspired by but not affiliated with YEEZY TECH X KANO Stem Player.
5 |
6 | See it live: https://stemplayeronline.com
7 |
8 | Join the Stem Player Online community: https://discord.gg/jfnFhggJGZ
9 |
10 | ## Usage
11 | This site aims to function as closely to the original stem player device as possible. All usage instructions unique to the site are listed below.
12 |
13 | ### Loading local files
14 | If you have local stem files that you would like to load into the stem player, you can do so by clicking on the folder icon in the top left corner of the page and selecting the folder. Folders should contain 4 audio files, ideally named 1-4 with a typical audio format type such as .mp3, .flac, .wav. If files are not named by numbers 1-4, they will still play fine, but their positions on the player may be unpredictable.
15 |
16 |
17 | ### Keyboard shortcuts
18 | Keyboard shortcuts have been included to help better the experience of using the stem player on a pc. They simply allow an alternative way of interacting with the stem player other than touching with the mouse.
19 |
20 | * `Spacebar` - Toggles playback, pausing and playing the entire track
21 | * `` - Each arrow key controls the volume of it's respective slider. Pressing the arrow key will increase the volume and holding control while pressing the arrow key will decrease the volume.
22 |
--------------------------------------------------------------------------------
/service-worker.js:
--------------------------------------------------------------------------------
1 | // Service worker adapted from: https://developers.google.com/web/fundamentals/primers/service-workers
2 | var CACHE_NAME = 'stemplayeronline-cache';
3 | var urlsToCache = [
4 | //'/',
5 | ];
6 |
7 | self.addEventListener('install', function(event) {
8 | // Perform install steps
9 | event.waitUntil(
10 | caches.open(CACHE_NAME)
11 | .then(function(cache) {
12 | return cache.addAll(urlsToCache);
13 | })
14 | );
15 | });
16 |
17 | self.addEventListener('activate', (event) => {
18 | event.waitUntil((async () => {
19 | if ('navigationPreload' in self.registration) {
20 | await self.registration.navigationPreload.enable();
21 | }
22 | })());
23 |
24 | self.clients.claim();
25 | });
26 |
27 | self.addEventListener('fetch', function(event) {
28 | event.respondWith(
29 | caches.match(event.request)
30 | .then(function(response) {
31 | // Cache hit - return response
32 | if (response) {
33 | return response;
34 | }
35 | return fetch(event.request);
36 | }
37 | )
38 | );
39 | });
40 |
41 |
--------------------------------------------------------------------------------
/img/discordIcon.svg:
--------------------------------------------------------------------------------
1 |
2 |
7 |
--------------------------------------------------------------------------------
/js/audio.js:
--------------------------------------------------------------------------------
1 | let songIndex = 1;
2 | let nowPlaying = false;
3 | let tracks = [];
4 | let tracksReady = [false, false, false, false];
5 |
6 | // Load starting stems
7 | for (var i=0; i<4; i++) {
8 | tracks[i] = new Audio(playlist[songIndex].tracks[i]);
9 | tracks[i].type = "audio/wav";
10 | }
11 | tracks[0].onended = () => {
12 | if (songIndex < playlist.length - 1) {
13 | songIndex++;
14 | loadSong();
15 | } else {
16 | nowPlaying = false;
17 | }
18 | }
19 | const loadSong = () => {
20 | tracksReady = [false, false, false, false];
21 | let song = playlist[songIndex].tracks;
22 | for (var i=0; i<4; i++) {
23 | tracks[i].src = song[i];
24 | }
25 | setTimeout(playAudio, 500);
26 | if (bpm) {
27 | bpm = playlist[songIndex].bpm || 120;
28 | beatDuration = 60/bpm*1000;
29 | }
30 | }
31 |
32 | const key = {
33 | "right": tracks[0],
34 | "top": tracks[1],
35 | "left": tracks[2],
36 | "bottom": tracks[3]
37 | }
38 |
39 | tracks.forEach((track, i) => {
40 | track.addEventListener("canplaythrough", (e) => {
41 | tracksReady[i] = true;
42 | })
43 | })
44 | function playAudio() {
45 | $("loading").style.display = "block";
46 | setTimeout(() => {
47 | if (tracksReady.indexOf(false) === -1) {
48 | try {
49 | tracks.forEach((track) => {track.play()});
50 | nowPlaying = true;
51 | } catch (err) {
52 | console.log('Failed to play...' + err);
53 | }
54 | $("loading").style.display = "none";
55 | } else {
56 | playAudio();
57 | }
58 | }, 100)
59 | }
60 |
61 | const pauseAudio = () => {
62 | tracks.forEach((track) => {track.pause();});
63 | nowPlaying = false;
64 | }
65 |
66 | const togglePlayback = () => {
67 | if (nowPlaying) {
68 | pauseAudio();
69 | } else {
70 | playAudio();
71 | }
72 | }
73 |
74 |
--------------------------------------------------------------------------------
/js/lightColors.js:
--------------------------------------------------------------------------------
1 | let storedColors = window.localStorage.colors ? JSON.parse(window.localStorage.colors) : [$('color4Input').value, $('color1Input').value];
2 | $('color4Input').value = storedColors[0];
3 | $('color1Input').value = storedColors[1];
4 |
5 | const colorHex2Dec = (color) => {
6 | return [parseInt(color.substring(1,3), 16), parseInt(color.substring(3,5), 16), parseInt(color.substring(5,7), 16)]
7 | }
8 | const colorDec2Hex = (colorDec) => {
9 | const add0 = (val) => {return (val<17) ? "0" : ""};
10 | let r = add0(colorDec[0]) + colorDec[0].toString(16);
11 | let g = add0(colorDec[1]) + colorDec[1].toString(16);
12 | let b = add0(colorDec[2]) + colorDec[2].toString(16);
13 | return "#" + r + g + b;
14 | }
15 | const generateGradient = () => {
16 | let color4 = $('color4Input').value;
17 | let color1 = $('color1Input').value;
18 | window.localStorage.setItem("colors", JSON.stringify([color4, color1]));
19 | let color4Dec = colorHex2Dec(color4);
20 | let color1Dec = colorHex2Dec(color1);
21 | let diff = [
22 | color4Dec[0] - color1Dec[0],
23 | color4Dec[1] - color1Dec[1],
24 | color4Dec[2] - color1Dec[2],
25 | ]
26 | let color2 = colorDec2Hex([
27 | color1Dec[0] + Math.trunc(diff[0] / 3),
28 | color1Dec[1] + Math.trunc(diff[1] / 3),
29 | color1Dec[2] + Math.trunc(diff[2] / 3)
30 | ]);
31 | let color3 = colorDec2Hex([
32 | color1Dec[0] + 2 * Math.trunc(diff[0] / 3),
33 | color1Dec[1] + 2 * Math.trunc(diff[1] / 3),
34 | color1Dec[2] + 2 * Math.trunc(diff[2] / 3)
35 | ]);
36 | let r = document.querySelector(':root');
37 | r.style.setProperty('--light-1', color1);
38 | r.style.setProperty('--light-2', color2);
39 | r.style.setProperty('--light-3', color3);
40 | r.style.setProperty('--light-4', color4);
41 | }
42 | $("color4Icon").addEventListener("click", () => {
43 | $("color4Input").click();
44 | })
45 | $("color1Icon").addEventListener("click", () => {
46 | $("color1Input").click();
47 | })
48 | $("color4Input").addEventListener("change", () => {
49 | generateGradient();
50 | })
51 | $("color1Input").addEventListener("change", () => {
52 | generateGradient();
53 | })
54 | generateGradient();
55 |
--------------------------------------------------------------------------------
/js/app.js:
--------------------------------------------------------------------------------
1 | let isolating = false;
2 | let controlPressed = false;
3 | let pointerdown = false;
4 | let maxVolume = 1;
5 | let wholeMaxVolume = 8; // Max volume in non-decimal
6 | let lightNum;
7 | let levels = [4, 4, 4, 4];
8 | let sliderNames = ["right", "top", "left", "bottom"];
9 | let hideLightsTimeout;
10 |
11 | const loadPlaylistViewer = () => {
12 | const pv = $("playlistViewer");
13 | pv.innerHTML = "";
14 | playlist.forEach((song, i) => {
15 | let songDiv = document.createElement('div');
16 | songDiv.classList.add("playlistViewerItem");
17 | songDiv.innerHTML = i+1 + ") " + song.title;
18 | songDiv.addEventListener("click", () => {
19 | songIndex = i;
20 | loadSong();
21 | })
22 | pv.append(songDiv);
23 | })
24 | }
25 | loadPlaylistViewer();
26 |
27 | const levelToVolume = (level) => {
28 | return (level-1)/3*maxVolume;
29 | }
30 |
31 | const setLightBrightness = (light, brightness) => {
32 | if (brightness == 0) {
33 | light.classList.add("lightOff");
34 | light.classList.remove("lightBright");
35 | } else if (brightness == 1) {
36 | light.classList.remove("lightOff");
37 | light.classList.remove("lightBright");
38 | } else if (brightness == 2) {
39 | light.classList.remove("lightOff");
40 | light.classList.add("lightBright");
41 | }
42 | }
43 |
44 | const allLightsOff = () => {
45 | Array.from(document.getElementsByClassName('light')).forEach((light) => {
46 | setLightBrightness(light, 0);
47 | });
48 | }
49 |
50 | const showStemLights = () => {
51 | sliderNames.forEach((sliderName, index) => {
52 | Array.from(document.getElementsByClassName(sliderName + 'Light')).forEach((light) => {
53 | setLightColor(light, levels[index]);
54 | });
55 | });
56 | }
57 |
58 | const setLightColor = (light, lightIndex) => {
59 | (light.id.split("_")[1] > lightIndex) ?
60 | setLightBrightness(light, 0) :
61 | setLightBrightness(light, 1);
62 | }
63 |
64 | const isolateStem = (sliderName) => {
65 | if (isolating) return;
66 | isolating = true;
67 | tracks.forEach((track) => {track.muted = true;});
68 | allLightsOff();
69 |
70 | key[sliderName].muted = false;
71 | Array.from(document.getElementsByClassName(sliderName + 'Light')).forEach((light) => {
72 | setLightBrightness(light, 1);
73 | });
74 | const resetVolume = () => {
75 | tracks.forEach((track, i) => {track.muted = false});
76 | sliderNames.forEach((sliderName, index) => {
77 | Array.from(document.getElementsByClassName(sliderName + 'Light')).forEach((light) => {
78 | setLightColor(light, levels[index]);
79 | });
80 | });
81 | isolating = false;
82 | // remove the event listener after it is used once
83 | document.removeEventListener('pointerup', resetVolume);
84 | }
85 | document.addEventListener('pointerup', resetVolume)
86 | }
87 |
88 | /* Folder Select */
89 | $("folderSelectGroup").addEventListener("click", () => {
90 | $("folderSelectField").click();
91 | });
92 |
93 | $("folderSelectField").addEventListener("change", () => {
94 | // load the first 4 mp3 files in the directory as stems
95 | // todo: ensure that 4 audio files are used as stems
96 | let files = $("folderSelectField").files;
97 | nowPlaying = false;
98 | // this will automatically place tracks in the right position if they are numbered
99 | tracks.forEach((track, i) => {track.src = URL.createObjectURL(files[i]);});
100 | // set label to folder name
101 | $("folderSelectLabel").innerHTML = files[0].webkitRelativePath.split("/")[0];
102 | });
103 |
104 |
--------------------------------------------------------------------------------
/js/interface.js:
--------------------------------------------------------------------------------
1 | // include getsliders, handleLighttap, etc
2 |
3 | const handleLightTap = (sliderName, lightIndex) => {
4 | if (levels[sliderNames.indexOf(sliderName)] == parseInt(lightIndex)) return; //Dont update volume or lights if same light as active light is selected
5 | key[sliderName].volume = levelToVolume(lightIndex);
6 | levels[sliderNames.indexOf(sliderName)] = parseInt(lightIndex);
7 | Array.from(document.getElementsByClassName(sliderName + 'Light')).forEach((light) => {
8 | setLightColor(light, lightIndex);
9 | });
10 | }
11 |
12 | /* Detect slider click */
13 | document.addEventListener('pointerdown', (e) => {
14 | pointerdown = true;
15 | handlePointerDown(e);
16 | })
17 | document.addEventListener('pointerup', (e) => {
18 | pointerdown = false;
19 | })
20 |
21 | let sliderBounds = [];
22 | const getSliders = () => {
23 | sliderBounds = [
24 | $("rightSlider").getBoundingClientRect(),
25 | $("topSlider").getBoundingClientRect(),
26 | $("leftSlider").getBoundingClientRect(),
27 | $("bottomSlider").getBoundingClientRect()
28 | ];
29 | }
30 | getSliders();
31 | window.addEventListener('resize', (e) => {
32 | getSliders();
33 | })
34 |
35 | document.addEventListener("pointermove", (e) => {
36 | if (pointerdown) handlePointerDown(e);
37 | })
38 | const handlePointerDown = (e) => {
39 | sliderBounds.forEach((bound, index) => {
40 | if (e.clientX >= bound.left &&
41 | e.clientX <= bound.right &&
42 | e.clientY >= bound.top &&
43 | e.clientY <= bound.bottom
44 | ) {
45 | lightNum = getLightClicked(e, index);
46 | if (inLoopMode) {
47 | loopHandleLightTap(sliderNames[index], lightNum)
48 | } else {
49 | handleLightTap(sliderNames[index], lightNum);
50 | // listen for hold if light 4 is touched
51 | if (lightNum == "4" && !isolating) setTimeout(() => {
52 | if (pointerdown && lightNum == "4") {
53 | //lightNum is global so that you can check new value after timeout
54 | isolateStem(sliderNames[index]);
55 | }
56 | }, 200)
57 | }
58 | }
59 | })
60 | }
61 | const getLightClicked = (clickEvent, boundIndex) => {
62 | let segLen, i;
63 | let bound = sliderBounds[boundIndex];
64 | let y = clickEvent.clientY;
65 | let x = clickEvent.clientX;
66 | const inBounds = [
67 | () => { return x <= bound.left + i * segLen},
68 | () => { return y >= bound.bottom - i * segLen},
69 | () => { return x >= bound.right - i * segLen},
70 | () => { return y <= bound.top + i * segLen}
71 | ]
72 | if ([1, 3].includes(boundIndex)) segLen = bound.height/4;
73 | else if ([2, 0].includes(boundIndex)) segLen = bound.width/4;
74 | for (i=1; i<=4; i++)
75 | if (inBounds[boundIndex]()) return i.toString();
76 | return "1"; // catch error
77 | }
78 | let centerButtonPressed = false;
79 | $("centerButton").addEventListener("pointerdown", () => {
80 | $("centerButton").style.backgroundColor = "#82664b";
81 | centerButtonPressed = true;
82 | });
83 | $("centerButton").addEventListener("pointerup", () => {
84 | if (centerButtonPressed) {
85 | if (!inLoopMode) {
86 | togglePlayback();
87 | } else {
88 | if (loopDuration == 7 && speedDotIndex == 5) {
89 | exitLoopMode();
90 | } else {
91 | loopHandleLightTap("top", "4");
92 | setSpeed("right", "2"); // Should speed be getting reset here?
93 | }
94 | }
95 | $("centerButton").style.backgroundColor = "var(--player)";
96 | centerButtonPressed = false;
97 | }
98 | });
99 |
100 | $("minusButton").addEventListener("click", () => {
101 | if (!inLoopMode) {
102 | if (wholeMaxVolume != 0) {
103 | wholeMaxVolume--;
104 | maxVolume = wholeMaxVolume/8;
105 | updateVolumes();
106 | }
107 | displayVolume();
108 | }
109 | });
110 | $("plusButton").addEventListener("click", () => {
111 | if (!inLoopMode) {
112 | if (wholeMaxVolume != 8) {
113 | wholeMaxVolume++;
114 | maxVolume = wholeMaxVolume/8;
115 | updateVolumes();
116 | }
117 | displayVolume();
118 | }
119 | });
120 |
121 | $("leftDotButton").addEventListener("click", () => {
122 | if (!inLoopMode) {
123 | if (songIndex != 0) {
124 | songIndex--;
125 | loadSong();
126 | }
127 | } else if (loopStart*1000 >= beatDuration) {
128 | loopStart -= beatDuration/1000;
129 | }
130 | });
131 |
132 | $("rightDotButton").addEventListener("click", () => {
133 | if (!inLoopMode) {
134 | if (songIndex + 1 != playlist.length) {
135 | songIndex++;
136 | loadSong();
137 | }
138 | } else {
139 | loopStart += beatDuration/1000;
140 | }
141 | });
142 |
143 |
144 |
--------------------------------------------------------------------------------
/js/loop.js:
--------------------------------------------------------------------------------
1 | let inLoopMode = false;
2 | let bpm = playlist[songIndex].bpm || 120;
3 | let beatDuration = 60/bpm*1000;// Milliseconds per beat
4 | // Index of the location of the dot moving horizontally
5 | const horizArray = ['left_4', 'left_3', 'left_2', 'left_1', 'right_1', 'right_2', 'right_3', 'right_4'];
6 | let horizLoopTracker = 0;
7 | let horizLoopTimeout;
8 | const moveHorizDot = () => {
9 | let nextLight = $(horizArray[horizLoopTracker]);
10 | nextLight.classList.add("loopLight", "lightBright");
11 | horizLoopTimeout = setTimeout(() => {
12 | if (inLoopMode && nowPlaying) {
13 | let lastLight = $(horizArray[horizLoopTracker]);
14 | if (horizLoopTracker !== speedDotIndex) {
15 | lastLight.classList.remove("loopLight");
16 | }
17 | lastLight.classList.remove("lightBright");
18 | if (horizLoopTracker < 7) {
19 | horizLoopTracker++;
20 | } else {
21 | horizLoopTracker = 0;
22 | }
23 | }
24 | moveHorizDot();
25 | }, beatDuration)
26 | }
27 |
28 | let vertLoopIndex;
29 | let loopDuration = 7;
30 | let loopStart = 0; // Time in song where loop starts (should this be rounded to the nearest beat?)
31 | let inLoop = false;
32 | let vertLoopTimeout;
33 | const vertArray = ['bottom_4', 'bottom_3', 'bottom_2', 'bottom_1', 'top_1', 'top_2', 'top_3', 'top_4'];
34 | const verticalLoop = () => {
35 | if (loopDuration < 7) {
36 | let nextLight = $(vertArray[vertLoopIndex]);
37 | nextLight.classList.add("loopLight", "lightBright");
38 | vertLoopTimeout = setTimeout(() => {
39 | $(vertArray[vertLoopIndex]).classList.remove("lightBright");
40 | if (vertLoopIndex < loopDuration) {
41 | vertLoopIndex++;
42 | } else {
43 | vertLoopIndex = 0;
44 | tracksReady = [false, false, false, false];
45 | tracks.forEach((track) => {
46 | track.pause();
47 | try {
48 | track.fastSeek(loopStart);
49 | } catch {
50 | track.currentTime = loopStart;
51 | }
52 | })
53 | playAudio();
54 | }
55 | verticalLoop();
56 | }, beatDuration)
57 | } else {
58 | vertLoopIndex = 0;
59 | }
60 | }
61 |
62 | const enterLoopMode = () => {
63 | allLightsOff();
64 | inLoopMode = true;
65 | bpm = playlist[songIndex].bpm || 120;
66 | beatDuration = 60/bpm*1000;// Milliseconds per beat
67 | // Init loop mode
68 | ["top", "bottom"].forEach((dir) => {
69 | for(let i=1; i<5; i++) {
70 | $(`${dir}_${i}`).classList.add("loopLight");
71 | }
72 | })
73 | moveHorizDot();
74 | loopDuration = 7;
75 | vertLoopIndex = 0;
76 | verticalLoop();
77 | $(horizArray[speedDotIndex]).classList.add("loopLight");
78 | }
79 | const exitLoopMode = () => {
80 | showStemLights();
81 | inLoopMode = false;
82 | // Clear manually set background colors
83 | // Could just apply a class and remove it instead
84 | ["top", "bottom", "left", "right"].forEach((dir) => {
85 | for(let i=1; i<5; i++) {
86 | $(`${dir}_${i}`).classList.remove("loopLight", "lightBright");
87 | }
88 | })
89 | clearTimeout(horizLoopTimeout);
90 | clearTimeout(vertLoopTimeout);
91 | }
92 | $("menuButton").addEventListener("click", () => {
93 | if (!inLoopMode) {
94 | enterLoopMode();
95 | } else {
96 | exitLoopMode();
97 | }
98 | })
99 |
100 | let speedDotIndex = 5;
101 | const setSpeed = (sliderName, lightIndex) => {
102 | lightIndex = parseInt(lightIndex);
103 | if (sliderName == "right") {
104 | let pbRate = 1;
105 | if (lightIndex == 1) pbRate = 0.5;
106 | else if (lightIndex == 2) pbRate = 1;
107 | else if (lightIndex == 3) pbRate = 1.5;
108 | else if (lightIndex == 4) pbRate = 2;
109 | beatDuration = 60/bpm*1000/pbRate;
110 | tracks.forEach((track) => {
111 | track.playbackRate = pbRate;
112 | })
113 | $(horizArray[speedDotIndex]).classList.remove("loopLight");
114 | speedDotIndex = 3 + lightIndex;
115 | $(horizArray[speedDotIndex]).classList.add("loopLight");
116 | }
117 | }
118 |
119 | const loopHandleLightTap = (sliderName, lightIndex) => {
120 | let nextLight;
121 | if (loopDuration === 7) {
122 | loopStart = tracks[0].currentTime;
123 | }
124 | if (["top","bottom"].includes(sliderName)) {
125 | let maxFound = false;
126 | let lightId = `${sliderName}_${lightIndex}`;
127 | for(let i=0; i i) {
135 | nextLight = $(vertArray[vertLoopIndex]);
136 | nextLight.classList.remove("loopLight", "lightBright");
137 | vertLoopIndex = 0;
138 | loopStart = tracks[0].currentTime;
139 | }
140 | } else {
141 | $(vertArray[i]).classList.add("loopLight");
142 | }
143 | }
144 | if (loopDuration == 7) {
145 | nextLight = $(vertArray[vertLoopIndex]);
146 | nextLight.classList.add("loopLight");
147 | nextLight.classList.remove("lightBright");
148 | }
149 | clearTimeout(vertLoopTimeout);
150 | verticalLoop();
151 | } else if (["left", "right"].includes(sliderName)) {
152 | setSpeed(sliderName, lightIndex);
153 | }
154 | }
155 |
156 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Stem Player Online
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
21 |
22 |
23 |
24 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
Select folder with stems
39 |
40 |
46 |
48 |
49 |
81 |
101 |
102 |
Hurricane
103 |
Jail
104 |
Jail pt 2
105 |
Jesus Lord
106 |
Jesus Lord pt 2
107 |
108 |
109 |
111 |
112 |
113 |