Предупреждение: звук (не громко, в коде установлена громкость 0,5) Моя цель — как можно лучше синхронизировать всех, кто заходит на веб-страницу.
Скажем, есть какие-то глобальные часы. Поскольку Javascript Date.now()
основан на часах устройства, полагаться на них недостаточно.
Итак, я использую worldtimeapi
который возвращает время с точностью до миллисекунд, чтобы получить diff
так что в идеале Date.now() + diff
будет оценивать на любом устройстве одно и то же значение в любой момент. diff
по сути, должен исправить отклонение устройства от некоторых глобальных часов.
Я могу слышать разницу, когда запускаю это на моем телефоне и на моем ноутбуке, но в конечном итоге я не уверен, как я могу сказать, является ли это лучшим, на что я могу рассчитывать, или есть разница, которую можно уменьшить с помощью лучшего кода и без настройки моего собственного серверного NTP.
var duration = 27193;
var diff=1000;
var handle = null;
var best_delay = 1000;
var sound = document.getElementById("sound");
var timebox = document.getElementById("time_set");
var start = document.getElementById("start");
sound.volume = 0.5;
sound.onended = (event) => {
play();
}
function play()
{
sound.currentTime = ((Date.now() - diff) % duration)/1000;
sound.play()
}
function gettime() {
console.log("getting time");
try {
clearInterval(handle);
}
catch (error) {}
var start = new Date();
xhttp = new XMLHttpRequest();
xhttp.open("GET", "https://www.worldtimeapi.org/api/Asia/Macau",true);
xhttp.onreadystatechange=function() {
if (xhttp.readyState==4 && xhttp.status == 200) {
let response = JSON.parse(xhttp.responseText);
let time_at = new Date(response.datetime);
let now = Date.now();
let delay = now - start;
let new_diff = now - time_at-delay/2;
if (delay < best_delay)
{
best_delay = delay;
diff = new_diff;
console.log(diff)
}
timebox.innerHTML += diff.toString() + "," + delay;
timebox.innerHTML+="n";
play();
}
}
xhttp.send(null);
}
start.onclick = function () {
gettime();
}
<audio id="sound" src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" type="audio/mp3" controls preload="auto"></audio>
<textarea id="time_set"></textarea>
<br>
<button id="start">
START
</button>