Audio lag on mobile browser

[mirceaciu (Stanciu Bogdan Mircea)]

Lucrez la o hărtă interactivă, folosesc React și Leaflet. Am generat harta, am adăugat obiecte (județe) și atribui fiecărui obiect un sunet, redat la un anumit event.

onEachFeature(feature, layer) {
    const sing = () => {
      const audio = new Audio('Cough3.wav');
      audio.play()
    };

    layer.on({
      click: sing,
    });
  }

Codul de mai sus funcționează. onEachFeature este o metodă a Leaflet ce mă ajută să atașez evenimente obiectelor mele. Când dau un click pe un obiect din hartă este redat sunetul Cough3.wav.

Problema este că vreau să folosesc acest proiect pe mobil, unde apare un lag foarte evident la redarea sunetului. Scopul este să creez un instrument muzical (drum machine) ce poate fi folosit și pe Android și pe iPhone.

V-ați lovit de această problemă până acum? Oare dacă aș împacheta codul cu Cordova voi scăpa de acest delay?

[isti37 (István F.)]

Verifica de ce ai delay cu chrome devtools si CPU throttling. Uita-te si la call stack cu debugging.

Ai ceva cod sincron care blocheaza event loop-ul sau cod care iti omoara procesorul. Incarca in primul rand obiectul audio la incarcare, nu la event. (dar daca fisierul e mic ar trebui sa mearga fara delay sesizabil, schimba wav in ceva format mult mai mic daca vrei sa il tii in event)

Cordova e doar chrome cu binding-uri la api-uri android, nu are relevanta.

[pghoratiu (Gabriel Horatiu Petchesi)]

Daca muti partea de initializare a obiectului audio in afara?

@mirceaciu

onEachFeature(feature, layer) {
    const audio = new Audio('Cough3.wav');
    const sing = () => {
      // adauga aici un seek la inceput daca trebuie
      audio.play()
    };

    layer.on({
      click: sing,
    });

Banuiesc ca initializarea obiectului audio la fiecare click nu e necesara.

[bystefu (Stefu Catalin)]

Banuiesc ca trebuie incarcat inaintea continutului paginii,avand in vedere ca e mic ca dimensiune (banuiesc), si lag-ul acela poate ca se face atunci cand wav-ul se incarca. Scz daca am zis tampenii