...
 
Commits (17)
@font-face {
font-family: "alphabet";
src: url("../fonts/osp_alfphabet/Alfphabet-IV.ttf");
font-weight: normal;
font-style: normal; }
main {
font-family: "alphabet"; }
main .slides {
font-size: 8rem; }
main .slides div.sing {
background: linear-gradient(#f1f441, #f44141);
text-align: center; }
main .slides div.sing .blue {
color: blue;
display: inline; }
@font-face{
font-family: "alphabet";
src:url("../fonts/osp_alfphabet/Alfphabet-IV.ttf");
font-weight: normal;
font-style: normal;
}
main{
font-family: "alphabet";
.slides{
font-size: 8rem;
div.sing{
background: linear-gradient(#f1f441, #f44141);
text-align: center;
.blue{
color: blue;
display: inline;
}
}
}
}
\ No newline at end of file
@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
......@@ -65,19 +66,69 @@ select {
select::-ms-expand {
display: none; }
@font-face {
font-family: "archivo";
src: url("../fonts/archivo/ArchivoBlack-Regular.otf");
font-style: normal;
font-weight: normal; }
@font-face {
font-family: "not-courr";
src: url("../fonts/not-courrier/NotCourierSans.otf");
font-style: normal;
font-weight: normal; }
html {
font-size: 10vw; }
font-size: 20px; }
body {
font-size: 1rem; }
main .frames > div {
display: none; }
width: 100%; }
body > header {
font-family: "archivo";
padding: 1rem;
position: fixed;
bottom: 0;
right: 0.5rem; }
body > header h1 > span {
color: blue; }
body .track {
display: none; }
main .frames div.sing {
display: block;
background-color: yellow;
min-width: 100%;
height: 80vh;
text-align: center;
padding: 1rem 0 1rem 0; }
main {
font-size: 10rem; }
main .controls {
position: absolute;
font-size: 1rem;
margin: -4rem 0.5rem 0 1.5rem;
display: flex;
width: calc(100% - 2rem);
font-family: "not-courr"; }
main .controls > div {
padding: 0.25rem 0 0.25rem 0;
margin: 0.5rem;
background-color: white;
border: solid 1px; }
main .controls .bar {
width: 20rem;
padding: 0; }
main .controls .bar .progress {
width: 0;
background-color: blue;
height: 100%; }
main .controls .play,
main .controls .pause {
width: 2rem;
text-align: center; }
main .controls .play::before {
content: "❙❙"; }
main .controls .pause::before {
content: "▶"; }
main .controls .seconds {
padding: 0.25rem 0.25rem 0.1rem 0.25rem; }
main .slides > div {
display: none; }
main .slides div.sing {
display: block;
min-width: 100%;
height: 100vh;
padding: 4rem; }
@import "reset";
@font-face{
font-family: "archivo";
src:url("../fonts/archivo/ArchivoBlack-Regular.otf");
font-style: normal;
font-weight: normal;
}
@font-face{
font-family: "not-courr";
src:url("../fonts/not-courrier/NotCourierSans.otf");
font-style: normal;
font-weight: normal;
}
html{
font-size: 20px;
}
body{
width: 100%;
>header{
font-family: "archivo";
padding: 1rem;
position: fixed;
bottom: 0;
right: 0.5rem;
h1{
>span{
color: blue;
}
}
}
.track{
display: none;
}
}
main{
.controls{
position: absolute;
font-size: 1rem;
margin: -4rem 0.5rem 0 1.5rem;
display: flex;
width: calc(100% - 2rem);
font-family: "not-courr";
>div{
padding: 0.25rem 0 0.25rem 0;
margin: 0.5rem;
background-color: white;
border: solid 1px;
}
.bar{
width: 20rem;
padding: 0;
.progress{
width: 0;
background-color: blue;
height: 100%;
}
}
.play,
.pause{
width: 2rem;
text-align: center;
}
.play::before{
content: "❙❙";
}
.pause::before{
content: "▶";
}
.seconds{
padding: 0.25rem 0.25rem 0.1rem 0.25rem;
}
}
.slides{
>div{
display: none;
}
div.sing{
display: block;
min-width: 100%;
height: 100vh;
padding: 4rem;
}
}
}
\ No newline at end of file
@import "reset";
html{
font-size: 10vw;
}
body{
font-size: 1rem;
}
main{
.frames{
>div{
display: none;
}
div.sing{
display: block;
background-color: yellow;
min-width: 100%;
height: 80vh;
text-align: center;
padding: 1rem 0 1rem 0;
}
}
}
\ No newline at end of file
/* ---- MATH ---- */
var time = 0;
function map_range(value, low1, high1, low2, high2) {
var counter = (frameRate, track) => {
return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
var inter = (track) => {
}
/* ---- STRINGS ---- */
function getVidId(src){
var last = src.lastIndexOf("v=")+2;
var vidId = src.substr(last);
return vidId;
}
/* ---- DOM ---- */
function setIds(){
tracks.forEach((track, index) => {
var id = "track-"+index;
track.id=id;
tracksIds.push(id);
counts.push(0);
track.dataset.num=index;
});
}
/* ---- KARAOKE ---- */
function counter(track, index){
var frameRate = 10;
var inter = (track, index) => {
var time = Math.trunc(track.getCurrentTime()*10)/10;
var nowFrame = karaokes[index].querySelector("[data-slide='"+time+"']");
var time = Math.trunc(track.currentTime*10)/10;
var nowFrame = document.getElementById(time);
setProgressBar(track, time, index);
if(nowFrame){
if(!nowFrame.classList.contains("sing")){
var frames = document.querySelectorAll(".frames>div");
var slides = karaokes[index].querySelectorAll(".slides>div");
frames.forEach((frame) => {
slides.forEach((slide) => {
if(frame.classList.contains("sing")){
if(slide.classList.contains("sing")){
frame.classList.remove("sing");
slide.classList.remove("sing");
}
});
nowFrame.classList.add("sing");
console.log("added! "+time);
}
......@@ -32,47 +71,203 @@ var counter = (frameRate, track) => {
}
return setInterval(inter, frameRate, track);
return setInterval(inter, frameRate, track, index);
}
var onPlayed = () => {
function setKaraoke(player, event, index){
var tracks = document.querySelectorAll(".karaoPrint");
var frameRate = 10;
var count;
var state = event.data;
tracks.forEach((track) => {
if(state == 1){
track.addEventListener("play", () => {
counts[index] = counter(player, index);
count = counter(frameRate, track);
}
});
if(state == 2){
track.addEventListener("pause", () => {
clearInterval(counts[index]);
}
clearInterval(count);
if(state == 0){
});
clearInterval(counts[index]);
count = 0;
track.addEventListener("end", () => {
}
}
clearInterval(count);
count = 0;
});
function setCurrentFrame(index, seconds){
track.addEventListener("change", () => {
var slides = karaokes[index].querySelectorAll(".slides>div");
var slideTimes = [];
clearInterval(count);
count = counter(frameRate, track);
});
slides.forEach((slide) => {
var slideTime = parseFloat(slide.dataset.slide);
if(slideTime <= seconds){
slideTimes.push(slideTime);
}
if(slide.classList.contains("sing")){
slide.classList.remove("sing");
}
});
var thatSlide = karaokes[index].querySelector("[data-slide='"+slideTimes[slideTimes.length-1]+"']");
thatSlide.classList.add("sing");
}
function fillTotalTimes(player){
totalTimes.push(player.getDuration());
}
/* CONTROLS PLAYER */
function setProgressBar(player, currentTime, index){
var bar = progressBars[index];
var totalTime = totalTimes[index];
var progress = bar.querySelector(".progress");
var length = bar.offsetWidth;
var progLength = Math.round(map_range(currentTime, 0, totalTime, 0, length));
progress.style.width=progLength+"px";
setTimer(index, currentTime);
}
function setTimer(index, time){
var counter = karaokes[index].querySelector(".seconds");
counter.innerHTML=time+" (s)";
}
onPlayed();
\ No newline at end of file
function navigateInProgressBar(player, index){
let bar = progressBars[index];
bar.addEventListener("click", (e) => {
var rect = e.target.getBoundingClientRect();
var pos = e.clientX - rect.left;
var length = bar.offsetWidth;
var progress = bar.querySelector(".progress");
var secs = Math.round(map_range(pos, 0, length, 0, totalTimes[index]));
player.seekTo(secs);
progress.style.width=pos+"px";
if(player.getPlayerState() == 1){
player.playVideo();
}
setCurrentFrame(index, secs);
setTimer(index, secs);
});
}
function setPlayPauseButton(player, index){
var playButt = karaokes[index].querySelector("[data-action='playpause']");
playButt.addEventListener("click", () => {
if(playButt.classList.contains("pause")){
player.playVideo();
playButt.classList.remove("pause");
playButt.classList.add("play");
}else{
player.pauseVideo();
playButt.classList.remove("play");
playButt.classList.add("pause");
}
});
}
/* ---- YOUTUBE EMBED ---- */
function onYouTubeIframeAPIReady(){
tracks.forEach((track, index) => {
players[index] = new YT.Player(track.id, {
videoId: getVidId(track.dataset.src),
playerVars: { 'autoplay': 0, 'controls': 0,'autohide':1,'wmode':'opaque','origin':'http://localhost:80' },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
});
}
function onPlayerReady(event) {
var index = parseInt(event.target.getIframe().dataset.num);
fillTotalTimes(event.target);
setPlayPauseButton(event.target, index);
navigateInProgressBar(event.target, index);
}
function onPlayerStateChange(event){
var index = parseInt(event.target.getIframe().dataset.num);
setKaraoke(event.target, event, index);
}
/* ---- LOAD ---- */
var tracks = document.querySelectorAll(".track");
var karaokes = document.querySelectorAll(".karaoke")
var tracksIds = [];
var progressBars = document.querySelectorAll(".bar");
var players = [];
var counts = [];
var totalTimes = [];
document.addEventListener("DOMContentLoaded", () => {
setIds();
});
if (!window['YT']) {var YT = {loading: 0,loaded: 0};}if (!window['YTConfig']) {var YTConfig = {'host': 'http://www.youtube.com'};}if (!YT.loading) {YT.loading = 1;(function(){var l = [];YT.ready = function(f) {if (YT.loaded) {f();} else {l.push(f);}};window.onYTReady = function() {YT.loaded = 1;for (var i = 0; i < l.length; i++) {try {l[i]();} catch (e) {}}};YT.setConfig = function(c) {for (var k in c) {if (c.hasOwnProperty(k)) {YTConfig[k] = c[k];}}};var a = document.createElement('script');a.type = 'text/javascript';a.id = 'www-widgetapi-script';a.src = 'https://s.ytimg.com/yts/jsbin/www-widgetapi-vfljrlvNi/www-widgetapi.js';a.async = true;var c = document.currentScript;if (c) {var n = c.nonce || c.getAttribute('nonce');if (n) {a.setAttribute('nonce', n);}}var b = document.getElementsByTagName('script')[0];b.parentNode.insertBefore(a, b);})();}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
\ No newline at end of file
......@@ -2,39 +2,208 @@
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
<title>KaraoPrint</title>
<link rel="stylesheet" type="text/css" href="assets/css/karaoprint.css">
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
<title>☆☆ KaraoPrint / Demo ☆☆</title>
</head>
<body>
<header>
<h1><span>KaraoPr</span>int.js
</div></h1>
</header>
<main>
<section class="frames">
<div id="0" class="sing">
WELCOME TO KARAOPRINT
<section id="marianne" class="karaoke">
<div class="slides">
<div data-slide="0" class="sing">
Welcome to
<div>Karaoprint.js</div>
</div>
<div data-slide="1">
Welcome to
<div>
<span class="blue">K</span>araoprint.js
</div>
</div>
<div data-slide="1.2">
Welcome to
<div>
<span class="blue">Ka</span>raoprint.js
</div>
</div>
<div data-slide="1.4">
Welcome to
<div>
<span class="blue">Kar</span>aoprint.js
</div>
</div>
<div data-slide="1.6">
Welcome to
<div>
<span class="blue">Kara</span>oprint.js
</div>
</div>
<div data-slide="1.8">
Welcome to
<div>
<span class="blue">Karao</span>print.js
</div>
</div>
<div data-slide="2">
Welcome to
<div>
<span class="blue">Karaop</span>rint.js
</div>
</div>
<div data-slide="2.2">
Welcome to
<div>
<span class="blue">Karaopr</span>int.js
</div>
</div>
<div data-slide="2.4" >
Welcome to
<div>
<span class="blue">Karaopri</span>nt.js
</div>
</div>
<div data-slide="2.6" >
Welcome to
<div>
<span class="blue">Karaoprin</span>t.js
</div>
</div>
<div data-slide="2.8">
Welcome to
<div>
<span class="blue">Karaoprint</span>.js
</div>
</div>
<div data-slide="3" >
Welcome to
<div>
<span class="blue">Karaoprint.</span>js
</div>
</div>
<div data-slide="3.2">
Welcome to
<div>
<span class="blue">Karaoprint.j</span>s
</div>
</div>
<div data-slide="3.4">
Welcome to
<div>
<span class="blue">Karaoprint.js</span>
</div>
</div>
<div data-slide="3.6">
Welcome to
<div>
<span class="blue">Karaoprint.js</span>
</div>
<div>
</div>
</div>
<div data-slide="3.8">
Welcome to
<div>
<span class="blue">Karaoprint.js</span>
</div>
<div>
☺☺
</div>
</div>
<div data-slide="4">
Welcome to
<div>
<span class="blue">Karaoprint.js</span>
</div>
<div>
☺☺☺
</div>
</div>
<div data-slide="4.2">
Welcome to
<div>
<span class="blue">Karaoprint.js</span>
</div>
<div class="blue">
☺☺☺
</div>
</div>
<div data-slide="4.4">
Welcome to
<div>
<span class="blue">Karaoprint.js</span>
</div>
<div>
☺☺☺
</div>
</div>
<div data-slide="4.6">
Welcome to
<div>
<span class="blue">Karaoprint.js</span>
</div>
<div class="blue">
☺☺☺
</div>
</div>
<div data-slide="4.8">
Welcome to
<div>
<span class="blue">Karaoprint.js</span>
</div>
<div>
☺☺☺
</div>
</div>
<div data-slide="5">
Welcome to
<div>
<span class="blue">Karaoprint.js</span>
</div>
<div>
☺☺☺
</div>
</div>
<div data-slide="5.2">
Welcome to
<div>
<span class="blue">Karaoprint.js</span>
</div>
<div>
☺☺☺
</div>
</div>
<div data-slide="6">
WITH
</div>
<div data-slide="8">
<div>
G
</div>
</div>
<div data-slide="8.2">
<div>
GI
</div>
</div>
</div>
<div id="2">
YEAH
</div>
<div id="4">
EST-CE QUE VOUS ÊTES PRÊTS ???
</div>
<div id="6">
OUIIIIIIIII
</div>
<div id="10">
GROSSE AMBIANCE
</div>
<div id="12.5">
INSTRUMENTAL
</div>
<div id="29">
Eisbär
<div class="controls">
<div class="pause" data-action="playpause"></div>
<div class="bar">
<div class="progress"></div>
</div>
<div class="seconds">
0 (s)
</div>
</div>
<div class="track" data-src="https://www.youtube.com/watch?v=6iUAu3aBSlI"></div>
</section>
<audio controls class="karaoPrint">
<source src="content/tracks/test.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</main>
<script type="text/javascript" src="assets/js/youtube_iframe_api.js"></script>
<script type="text/javascript" src="assets/js/karaoPrint.js"></script>
</body>
</html>
\ No newline at end of file
</main>
</body>
</html>
\ No newline at end of file