Как синхронизировать прогресс между несколькими звуковыми дорожками как в обычном, так и в медленном режиме сети ⇐ Jquery

[Гость]

Привет, я хочу синхронизировать индикатор выполнения на основе воспроизводимого звука с несколькими звуковыми дорожками.
Мой реальный сценарий заключается в том, что одновременно у меня может быть две звуковые дорожки на разных языках, которые мне нужны. синхронизироваться с моим индикатором выполнения, даже учитывая задержку сети.
Проблема/вопрос: не происходит синхронизация между всеми воспроизводимыми звуками и индикатором выполнения
Пожалуйста, предоставьте мне лучший алгоритм для того же самого
Вот что я пробовал

Код: Выделить всё

const range = document.getElementById("range");

let soundTracks = [{id:1,sound:"https://actions.google.com/sounds/v1/alarms/dosimeter_alarm.ogg"},{id:2,sound:"https://actions.google.com/sounds/v1/alarms/phone_alerts_and_rings.ogg"},{id:3, sound:"https://actions.google.com/sounds/v1/animals/afternoon_crickets_long.ogg"},{id:4, sound:"https://actions.google.com/sounds/v1/alarms/medium_bell_ringing_near.ogg"}];

let allSoundLoaded = [] , sounds = [], progress = 0;

function handleProgress(event){
let audio = event.target;
let percentComplete = (audio.currentTime / audio.duration) * 100;
console.log("Progress:", percentComplete + "%");
range.value = percentComplete;
range.dispatchEvent(new Event('input'));
}

function resolveLoaded(event){
return new Promise((resolve)=>{
resolve(event);
});
}

function handleAudioLoad(event){
//console.log('[handleAudioLoad]',event);
allSoundLoaded.push(resolveLoaded(event));
}

for(let i = 0; i < soundTracks.length; i++){
let audio = new Audio(soundTracks[i].sound);
audio.id = soundTracks[i].id;
audio.autoplay = false;
audio.addEventListener("timeupdate", handleProgress); audio.addEventListener("canplaythrough",handleAudioLoad);
sounds.push(audio)
}

playbtn.onclick = () => {
sounds.forEach((sound) => sound.play());
}

range.addEventListener("input", (e) => {
const value = +e.target.value;
const label = e.target.nextElementSibling;
label.innerHTML = value;
});

Код: Выделить всё

@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");

* {
box-sizing: border-box;
}

body {
background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
font-family: "Lato", sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}

h2 {
position: absolute;
top: 10px;
}

.range-container {
position: relative;
}

input[type="range"] {
width: 300px;
margin: 18px 0;
-webkit-appearance: none;
}

input[type="range"]:focus,input[type="range"]:active {
outline: none;
cursor: grabbing !important;
}

input[type="range"] + label {
background-color: #fff;
position: absolute;
top: -25px;
left: 110px;
width: 80px;
padding: 5px 0;
text-align: center;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/* Chrome & Safari */
input[type="range"]::-webkit-slider-runnable-track {
background: transparent;
border-radius: 4px;
width: 100%;
height: 10px;
cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 120px;
width: 2px;
background: red;
cursor: grab;
}

input[type="range"]::-webkit-slider-thumb::before {
content: "";
display: block;
width: 20px;
height: 20px;
background-color: yellow;
position: absolute;
top: 5%;
left: 30;
}

Код: Выделить всё

50

Play

Note: please click on Play button to see what is not working in it.


Источник: https://stackoverflow.com/questions/781 ... al-as-well