Commit 089121bc authored by Marianne's avatar Marianne

karaoke ok

parent a8cc6bbc
......@@ -17,49 +17,6 @@ function getVidId(src){
}
function hasComma(str){
return (str.indexOf("-") > -1) ? true : false;
}
function idToSeconds(str){
var pos1 = str.indexOf("_")+1;
var first = str.substr(pos1);
if(hasComma(first)){
var stillString = first.replace("-", ".");
return parseFloat(stillString);
}else{
return parseInt(first);
}
}
function secondsToId(secs){
var str = secs.toString();
if(Number.isInteger(secs)){
return "frame_"+str;
}else{
return "frame_"+str.replace(".", "-");
}
}
/* ---- DOM ---- */
......@@ -86,7 +43,7 @@ function counter(track, index){
var inter = (track, index) => {
var time = Math.trunc(track.getCurrentTime()*10)/10;
var nowFrame = document.getElementById(secondsToId(time));
var nowFrame = karaokes[index].querySelector("[data-slide='"+time+"']");
setProgressBar(track, time, index);
......@@ -142,16 +99,16 @@ function setKaraoke(player, event, index){
function setCurrentFrame(index, seconds){
var frames = document.querySelectorAll(".karaoke")[index].querySelectorAll(".frames>div");
var frames = karaokes[index].querySelectorAll(".frames>div");
var frameTimes = [];
frames.forEach((frame) => {
var slideTime = idToSeconds(frame.id);
var slideTime = parseFloat(frame.dataset.slide);
if(slideTime <= seconds){
frameTimes.push(frame.id);
frameTimes.push(slideTime);
}
if(frame.classList.contains("sing")){
......@@ -164,7 +121,9 @@ function setCurrentFrame(index, seconds){
var thatSlide = docuframeTimes[frameTimes.length-1]
var thatSlide = karaokes[index].querySelector("[data-slide='"+frameTimes[frameTimes.length-1]+"']");
thatSlide.classList.add("sing");
}
......@@ -293,6 +252,7 @@ function onPlayerStateChange(event){
/* ---- LOAD ---- */
var tracks = document.querySelectorAll(".track");
var karaokes = document.querySelectorAll(".karaoke")
var tracksIds = [];
var tracksTimes = [];
var progressBars = document.querySelectorAll(".bar");
......
......@@ -9,25 +9,25 @@
<main>
<section id="marianne" class="karaoke">
<div class="frames">
<div data-frame="0" class="sing">
<div data-slide="0" class="sing">
WELCOME TO KARAOPRINT
</div>
<div id="2">
<div data-slide="2">
YEAH
</div>
<div id="frame_4">
<div data-slide="4">
EST-CE QUE VOUS ÊTES PRÊTS ???
</div>
<div id="frame_6">
<div data-slide="6">
OUIIIIIIIII
</div>
<div id="frame_10">
<div data-slide="10">
GROSSE AMBIANCE
</div>
<div id="frame_12-5">
<div data-slide="12.5">
INSTRUMENTAL
</div>
<div id="frame_29">
<div data-slide="29">
Eisbär
</div>
</div>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment