Utilizo o jQuery-Tools pra criar um efeito personalizado de scroll
em uma div
como no exemplo a seguir:
"use strict";
var id_label_ms = document.getElementById("count_label_ms");
var range = document.getElementById("area");
var cronometro = {};
var countms = 0;
var counterms;
var cronometroAtivo = false;
window.onload = function () {
areaMusica();
var scroll = $(".area");
$(":range").rangeinput({
onSlide: function(ev, step) {
scroll.css({left: -step});
},
progress: true,
change: function(e, i) {
scroll.animate({left: -i}, "fast");
},
speed: 0
});
};
function areaMusica(){
var k = 1; var tabela = '';
tabela = '<table id="table">';
for (var i = 0; i < 2; i++) {
if(i < 1){
tabela += '<tr class="containerFaixa">';
for (var j = 1; j < 62; j++) {
if(j == 1){
tabela += '<td class="faixa" style="min-width: 20px;">start</td>';
}else{
tabela += '<td class="container" id="td'+k+'"></td>';
k++;
}
}
tabela += '</tr>';
}else{
tabela += '<tr><td></td>';
for(var j = 1; j < 61; j++) {
if(j % 5 == 0){
tabela += '<td class="tempo" colspan="5">'+seconds2time((j*2)-10) +"min - "+seconds2time(j*2)+'min</td>';
}
}
tabela += '</tr>'
}
}
tabela += '</table>';
document.getElementById('area').innerHTML = tabela;
}
function seconds2time(seconds){
var minutes = Math.floor((seconds ) / 60);
var seconds = seconds - (minutes * 60);
var time = "";
if(minutes < 10){
minutes = "0"+minutes;
}
if(seconds == 0){
seconds = "0"+seconds;
}
time = minutes+":"+seconds;
return time;
}
function iniciar(elemento){
var icon = elemento.dataset.option;
range.style.left = 0;
if(icon === "play"){
start();
elemento.src = "http://cdn.flaticon.com/svg/70/70419.svg";
elemento.title = "Pausar";
elemento.dataset.option = "pause";
}else{
stop();
elemento.src = "http://cdn.flaticon.com/svg/70/70409.svg";
elemento.title = "Tocar";
elemento.dataset.option = "play";
}
}
function start() {
if (cronometroAtivo) return;
cronometroAtivo = true;
counterms = setInterval(function () {
range.style.left = range.style.left.substring(0, range.style.left.length-2) - 1;
countms = countms + 1;
id_label_ms.innerHTML = countms / 100 + " s";
}, 10);
};
function stop(){
range.style.left = 0;
cronometroAtivo = false;
countms = 0;
id_label_ms.innerHTML = countms + " s";
clearInterval(counterms);
cronometroAtivo = false;
};
.containerArea{
height: auto;
width: 1030px;
border: 1px rgb(89,89,89) solid;
margin-top: 30px;
background: rgb(173,234,234);
}
.slider {
position:absolute;
cursor:pointer;
height:1px;
border:2px solid rgb(179,179,179);
width:1000px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
}
#scrollwrap {
margin-top:30px;
margin-left:10px;
overflow:hidden;
width: 1000px;
margin-left:5px;
height:auto;
}
.container{
min-width: 23px;
height: 26px;
border: 1px rgb(140, 173, 188) double;
}
.containerFaixa{
width: 1000px;
height: 26px;
border: 1px rgb(140, 173, 188) double;
background: rgb(216,216,191);
border-radius: 7px;
}
.faixa{
color: rgb(0, 0, 0);
text-align: center;
font-size: 12px;
font-weight: bold;
font-family: inherit;
font-style: inherit;
text-decoration: inherit;
text-align: center;
line-height: 1.85em;
}
.tempo{
color: rgb(0, 0, 0);
font-size: 10px;
font-weight: inherit;
font-family: 'Courier New', Courier, monospace;
font-style: inherit;
text-decoration: inherit;
}
.progress {
background-color:rgb(179,179,179);
height:3px;
position:absolute;
width:0;
}
.handle {
position: absolute;
z-index:4;
width: 28px;
height: 115px;
background-position: top center;
background-size: 25px 30px;
background-image: url(http://cdn.flaticon.com/svg/17/17736.svg);
background-repeat: no-repeat;
}
.area {
position:relative;
font:bold 90px sans-serif;
height:auto;
}
.range {
display:none;
}
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<body>
<input id="range" type="range" max="795" value="0" />
<div class="containerArea">
<div id="scrollwrap">
<div id="area" class="area"></div>
</div>
</div>
<table style="margin-top: 20px;">
<tr>
<td name="btStart"><img src="http://cdn.flaticon.com/svg/70/70409.svg" style="width: 30px;" onclick="iniciar(this)" data-option="play" title="Tocar" /></td>
</tr>
</table>
<div>
Count: <label id="count_label_ms"></label>
</div>
A intenção é criar um player de áudio personalizado, quando clicar em play, o handle começar a se movimentar junto com o count. Cada coluna da tabela representa 2 segundos.
Problema 1: Esse meu exemplo funciona localmente, mas não consegui fazer funcionar online, tanto aqui no Stack Snippets, quanto no jsFiddle e tanto quanto no codeOpen. A contagem inicia mas o handle não começa a se mover, criei um zip pra quem quiser testar localmente.
Essa nem é a questão principal, mas gostaria de entender o que há de errado pra que nessas ferramentas online ele não funcione corretamente?
Problema 2: Sei que a velocidade constante do handle deveria ser: ou seja 2/24 = 0,0834
. Então, teoricamente na função start
o calculo deveria ser:
range.style.left = range.style.left.substring(0, range.style.left.length-2) - 0,0834;
Porém não está se movimentando corretamente, está se movimentando muito devagar, tentei ajustar para mais e para menos, mas sempre parece ficar ou muito lento, ou muito rápido, isso também afeta o problema 3.
Problema 3: Desejo fazer um handle que possa ser personalizado, localmente se eu altero o estilo do handle, como no exemplo a seguir:
"use strict";
var id_label_ms = document.getElementById("count_label_ms");
var range = document.getElementById("area");
var cronometro = {};
var countms = 0;
var counterms;
var cronometroAtivo = false;
window.onload = function () {
areaMusica();
var scroll = $(".area");
$(":range").rangeinput({
onSlide: function(ev, step) {
scroll.css({left: -step});
},
progress: true,
change: function(e, i) {
scroll.animate({left: -i}, "fast");
},
speed: 0
});
};
function areaMusica(){
var k = 1; var tabela = '';
tabela = '<table id="table">';
for (var i = 0; i < 2; i++) {
if(i < 1){
tabela += '<tr class="containerFaixa">';
for (var j = 1; j < 62; j++) {
if(j == 1){
tabela += '<td class="faixa" style="min-width: 20px;">start</td>';
}else{
tabela += '<td class="container" id="td'+k+'"></td>';
k++;
}
}
tabela += '</tr>';
}else{
tabela += '<tr><td></td>';
for(var j = 1; j < 61; j++) {
if(j % 5 == 0){
tabela += '<td class="tempo" colspan="5">'+seconds2time((j*2)-10) +"min - "+seconds2time(j*2)+'min</td>';
}
}
tabela += '</tr>'
}
}
tabela += '</table>';
document.getElementById('area').innerHTML = tabela;
}
function seconds2time(seconds){
var minutes = Math.floor((seconds ) / 60);
var seconds = seconds - (minutes * 60);
var time = "";
if(minutes < 10){
minutes = "0"+minutes;
}
if(seconds == 0){
seconds = "0"+seconds;
}
time = minutes+":"+seconds;
return time;
}
function iniciar(elemento){
var icon = elemento.dataset.option;
range.style.left = 0;
if(icon === "play"){
start();
elemento.src = "http://cdn.flaticon.com/svg/70/70419.svg";
elemento.title = "Pausar";
elemento.dataset.option = "pause";
}else{
stop();
elemento.src = "http://cdn.flaticon.com/svg/70/70409.svg";
elemento.title = "Tocar";
elemento.dataset.option = "play";
}
}
function start() {
if (cronometroAtivo) return;
cronometroAtivo = true;
counterms = setInterval(function () {
range.style.left = range.style.left.substring(0, range.style.left.length-2) - 1;
countms = countms + 1;
id_label_ms.innerHTML = countms / 100 + " s";
}, 10);
};
function stop(){
range.style.left = 0;
cronometroAtivo = false;
countms = 0;
id_label_ms.innerHTML = countms + " s";
clearInterval(counterms);
cronometroAtivo = false;
};
.containerArea{
height: auto;
width: 1030px;
border: 1px rgb(89,89,89) solid;
margin-top: 30px;
background: rgb(173,234,234);
}
.slider {
position:absolute;
cursor:pointer;
height:1px;
border:2px solid rgb(179,179,179);
width:1000px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
}
#scrollwrap {
margin-top:30px;
margin-left:10px;
overflow:hidden;
width: 1000px;
margin-left:5px;
height:auto;
}
.container{
min-width: 23px;
height: 26px;
border: 1px rgb(140, 173, 188) double;
}
.containerFaixa{
width: 1000px;
height: 26px;
border: 1px rgb(140, 173, 188) double;
background: rgb(216,216,191);
border-radius: 7px;
}
.faixa{
color: rgb(0, 0, 0);
text-align: center;
font-size: 12px;
font-weight: bold;
font-family: inherit;
font-style: inherit;
text-decoration: inherit;
text-align: center;
line-height: 1.85em;
}
.tempo{
color: rgb(0, 0, 0);
font-size: 10px;
font-weight: inherit;
font-family: 'Courier New', Courier, monospace;
font-style: inherit;
text-decoration: inherit;
}
.progress {
background-color:rgb(179,179,179);
height:3px;
position:absolute;
width:0;
}
.handle {
position: absolute;
z-index:4;
width: 28px;
height: 55px;
border: rgb(161, 233, 240) solid;
background-position: top center;
background-size: 25px 30px;
background-image: url(http://cdn.flaticon.com/svg/17/17736.svg);
background-repeat: no-repeat;
box-shadow: 0px 0px 0px 1px rgb(0, 0, 0),inset 0px 0px 0px 1px rgb(0, 0, 0);
}
.area {
position:relative;
font:bold 90px sans-serif;
height:auto;
}
.range {
display:none;
}
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<body>
<input id="range" type="range" max="795" value="0" />
<div class="containerArea">
<div id="scrollwrap">
<div id="area" class="area"></div>
</div>
</div>
<table style="margin-top: 20px;">
<tr>
<td name="btStart"><img src="http://cdn.flaticon.com/svg/70/70409.svg" style="width: 30px;" onclick="iniciar(this)" data-option="play" title="Tocar" /></td>
</tr>
</table>
<div>
Count: <label id="count_label_ms"></label>
</div>
O tempo do movimento do handle ao clicar no botão start
fica estranho e aparentemente fica mais rápido sendo que não há alteração nenhuma na função:
function start() {
if (cronometroAtivo) return;
cronometroAtivo = true;
counterms = setInterval(function () {
range.style.left = range.style.left.substring(0, range.style.left.length-2) - 1;
countms = countms + 1;
id_label_ms.innerHTML = countms / 100 + " s";
}, 10);
};