VotemReferente ao Problema 2:
Temos os blocos com 23px + 1px de padding + 1 px de borda, da 25px, mas eles estão espaçados por causa do table então tens que tirar o cellspacing deixa ele zerado, então teremos 25px por bloco, ai podemos começar a fazer uma formula e alguns testes ficaria assim:
"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
});
//iniciar( document.getElementById("teste") );
};
function areaMusica(){
var k = 1; var tabela = '';
tabela = '<table id="table" cellspacing="0">';
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: 13px;"></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) - 0.129;
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;
overflow:hidden;
width: 1000px;
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;
left: 13px;
}
.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>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style-teste.css" />
</head>
<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 id="teste" 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>
<script src="script-teste.js"></script>
</body>
</html>
eu testei e ficou quase lá com um tempo em torno de 0.12 a 0.13 lá na resposta somente referenteparte range.style.left.substring(0, range.style.left.length-2) - 0.13; // por exemplo
agora sou ruim de matemática ao meu ver teria que ser uma formula tipo 2/25 = 0.08, talvez seja esse setInterval=10 que esteja bugando sua formula a cada 10 mms tanto para mais quanto para menos, minha contribuição sobre o problema 1seria isso, obrigado ;)os tamanhos dos blocos e o espaçamentos estava equivocado sobre eles.
Obs: Seu marcador esta mal posicionado no Start, ele tem que ficar encostado no primeiro bloco, fiz uma gambi ai removendo a palavra Start e mexi para posicionar ele ali rente ao primeiro bloco, vai de você ou deixar a palavra Start e posicionar ele, ou remover como eu fiz...