Textcreator LIVE V13.1 Cloud Music OS — Deel 10 van 23
Dit deel gaat direct verder onder deel 9.
Toegevoegd:
mobiele swipe engine
vorige/volgende song navigatie
actieve jukebox state
favorieten laden
verbeterde mobiele ervaring
/*
====================================================
TEXTCREATOR LIVE V13.1
PART 10
MOBILE JUKEBOX EXPERIENCE ENGINE
====================================================
*/
const playerState={
current:0,
playing:false,
history:[]
};
/*
====================================================
SWIPE ENGINE
====================================================
*/
let swipeStartX=0;
let swipeEndX=0;
function swipeStart(event){
if(!event.changedTouches)
return;
swipeStartX=
event.changedTouches[0].clientX;
}
function swipeEnd(event,index){
if(!event.changedTouches)
return;
swipeEndX=
event.changedTouches[0].clientX;
const distance=
swipeEndX-swipeStartX;
if(Math.abs(distance)<80)
return;
if(distance<0){
nextSong();
}
else{
previousSong();
}
}
/*
====================================================
NEXT SONG
====================================================
*/
function nextSong(){
if(!jukebox.songs.length)
return;
playerState.current++;
if(
playerState.current >=
jukebox.songs.length
){
playerState.current=0;
}
openCurrentSong();
}
/*
====================================================
PREVIOUS SONG
====================================================
*/
function previousSong(){
if(!jukebox.songs.length)
return;
playerState.current--;
if(
playerState.current < 0
){
playerState.current=
jukebox.songs.length-1;
}
openCurrentSong();
}
/*
====================================================
OPEN CURRENT SONG
====================================================
*/
function openCurrentSong(){
const song=
jukebox.songs[
playerState.current
];
if(!song)
return;
playerState.history.push(song);
document.getElementById(
"workspace"
)
.innerHTML=
`
<h2>
🎧 Now Playing
</h2>
<div class="song-card">
<h3>
🎵 ${
song.title ||
song.Titel ||
"Song"
}
</h3>
<p>
👤 ${
song.User ||
song.name ||
""
}
</p>
<p>
🎼 ${
song.genre ||
song.Genre ||
""
}
</p>
<button
class="btn"
onclick="playCurrentSong()">
▶ Open Suno
</button>
<button
class="btn"
onclick="nextSong()">
➡ Volgende
</button>
<button
class="btn"
onclick="previousSong()">
⬅ Vorige
</button>
</div>
`;
}
/*
====================================================
PLAY CURRENT SONG
====================================================
*/
function playCurrentSong(){
const song=
jukebox.songs[
playerState.current
];
if(!song)
return;
const url=
song.suno ||
song.Suno_URL;
if(url){
window.open(
url,
"_blank"
);
}
}
/*
====================================================
LOAD FAVORITES
====================================================
*/
function loadFavorites(){
const box=
document.getElementById(
"workspace"
);
if(
!jukebox.favorites ||
jukebox.favorites.length===0
){
box.innerHTML=
`
<h2>
⭐ Favorieten
</h2>
<p>
Nog geen favorieten opgeslagen.
</p>
`;
return;
}
box.innerHTML=
`
<h2>
⭐ Mijn Favorieten
</h2>
<div id="favoriteList">
</div>
`;
document.getElementById(
"favoriteList"
)
.innerHTML=
jukebox.favorites.map(
(song,index)=>{
return `
<div class="song-card">
<h3>
🎵 ${
song.title ||
song.Titel ||
"Song"
}
</h3>
<p>
${
song.User ||
song.name ||
""
}
</p>
<button
class="btn"
onclick="playFavorite(${index})">
▶ Luisteren
</button>
</div>
`;
}
).join("");
}
function playFavorite(index){
const song=
jukebox.favorites[index];
const url=
song.suno ||
song.Suno_URL;
if(url){
window.open(
url,
"_blank"
);
}
}
console.log(
"Mobile Jukebox Experience V13.1 loaded"
);
Einde deel 10/23.
Deel 11 gaat verder met:
Suno Artist Studio
artiest profielpagina
songs per maker
koppeling naar @GoDoGood profiel.