valknar/v1.pivoine.art
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: audio from jellyfin

Browse Source
This commit is contained in:
Sebastian Krüger
2025-11-15 10:05:15 +01:00
parent f7e8d3c5bb
commit 167b1521d4
37 changed files with 163 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

181
_js/src/sound.js
View File

@@ -1,109 +1,112 @@
import { fromEvent } from "rxjs";
import { webComponentsReady, stylesheetReady } from "./common.js";
import { Wave } from "@foobar404/wave";
import { fromEvent } from 'rxjs';
import { webComponentsReady, stylesheetReady } from './common.js';
import { Wave } from '@foobar404/wave';
(async () => {
await Promise.all([
...("customElements" in window
? []
: [
import(
/* webpackChunkName: "webcomponents" */ "./polyfills/webcomponents.js"
).then(
() =>
import(
/* webpackChunkName: "shadydom" */ "./polyfills/shadydom.js"
),
),
]),
]);
await Promise.all([
...('customElements' in window
? []
: [
import(/* webpackChunkName: "webcomponents" */ './polyfills/webcomponents.js').then(() =>
import(/* webpackChunkName: "shadydom" */ './polyfills/shadydom.js'),
),
]),
]);
await webComponentsReady;
await stylesheetReady;
await webComponentsReady;
await stylesheetReady;
const sound = document.querySelector(".sound-player");
const sound = document.querySelector('.sound-player');
if (!sound) return;
if (!sound) return;
const fallback = JSON.parse(sound.getAttribute("data-featured"));
let featured = fallback;
let currentIndex = undefined;
const fallback = JSON.parse(sound.getAttribute('data-featured'));
let featured = fallback;
let currentIndex = undefined;
const randomTrackIndex = () =>
Math.floor(Math.random() * (featured.tracks.length - 1));
const randomTrackIndex = () => Math.floor(Math.random() * (featured.tracks.length - 1));
const updateTrack = (index, active) => {
if (index != null) {
const track = featured.tracks[index];
audioElement.setAttribute(
"src",
`/assets/sounds/${featured.slug}/${track}`,
);
currentIndex = index;
}
const updateTrack = (index, active) => {
if (index != null) {
const track = featured.tracks[index];
audioElement.setAttribute('src', track.url);
currentIndex = index;
}
if (active) {
const track = featured.tracks[currentIndex];
buttonElement.textContent = `[ ${track.substring(0, track.lastIndexOf("."))} ]`;
audioElement.play();
canvasElement.classList.remove("hidden");
} else {
buttonElement.textContent = "[ SOUND ON ]";
audioElement.pause();
canvasElement.classList.add("hidden");
}
};
if (active) {
const track = featured.tracks[currentIndex];
buttonElement.textContent = `[ ${track.title} ]`;
audioElement.play();
canvasElement.classList.remove('hidden');
} else {
buttonElement.textContent = '[ SOUND ON ]';
audioElement.pause();
canvasElement.classList.add('hidden');
}
};
const updateSound = () => {
const sound = document.querySelector(".sound-wrapper");
const updateSound = () => {
const sound = document.querySelector('.sound-wrapper');
if (!sound) return;
if (!sound) return;
featured = JSON.parse(sound.getAttribute("data-featured"));
updateTrack(0, !audioElement.paused);
featured = JSON.parse(sound.getAttribute('data-featured'));
updateTrack(0, !audioElement.paused);
const buttons = document.querySelectorAll(".sound-wrapper .sound-item");
buttons.forEach((button, i) => {
fromEvent(button, "click").subscribe((event) => {
event.preventDefault();
updateTrack(i, true);
});
});
};
const buttons = document.querySelectorAll('.sound-wrapper .sound-item');
buttons.forEach((button, i) => {
fromEvent(button, 'click').subscribe((event) => {
event.preventDefault();
updateTrack(i, true);
});
});
};
const audioElement = document.querySelector(".sound-player audio");
const buttonElement = document.querySelector(".sound-player a");
const canvasElement = document.querySelector(".sound-player canvas");
const pushStateEl = document.querySelector("hy-push-state");
const wave = new Wave(audioElement, canvasElement);
const audioElement = document.querySelector('.sound-player audio');
audioElement.crossOrigin = 'anonymous';
const buttonElement = document.querySelector('.sound-player a');
const canvasElement = document.querySelector('.sound-player canvas');
const pushStateEl = document.querySelector('hy-push-state');
const wave = new Wave(audioElement, canvasElement);
wave.addAnimation(
new wave.animations.Arcs({
lineColor: {
gradient: [
"#ce275b", "#cc2269", "#c82176", "#c22484", "#ba2a91", "#af329e", "#a33aaa", "#9342b5", "#814abe", "#6c51c5", "#5157cb", "#275cce"
],
rotate: 45,
},
lineWidth: 10,
diameter: 4,
count: 20,
frequencyBand: "lows",
}),
);
wave.addAnimation(
new wave.animations.Arcs({
lineColor: {
gradient: [
'#ce275b',
'#cc2269',
'#c82176',
'#c22484',
'#ba2a91',
'#af329e',
'#a33aaa',
'#9342b5',
'#814abe',
'#6c51c5',
'#5157cb',
'#275cce',
],
rotate: 45,
},
lineWidth: 10,
diameter: 4,
count: 20,
frequencyBand: 'lows',
}),
);
fromEvent(buttonElement, "click").subscribe(() => {
updateTrack(undefined, audioElement.paused);
});
fromEvent(buttonElement, 'click').subscribe(() => {
updateTrack(undefined, audioElement.paused);
});
fromEvent(audioElement, "ended").subscribe(() => {
updateTrack(randomTrackIndex(), true);
});
fromEvent(audioElement, 'ended').subscribe(() => {
updateTrack(randomTrackIndex(), true);
});
fromEvent(pushStateEl, "hy-push-state-after").subscribe(() => {
updateSound();
});
fromEvent(pushStateEl, 'hy-push-state-after').subscribe(() => {
updateSound();
});
updateTrack(randomTrackIndex(), false);
updateSound();
updateTrack(randomTrackIndex(), false);
updateSound();
})();