Why does my second audio file not play using the currentTime property?

Question

I would like my audio2 file to play when audio1.currentTime is 3 seconds, but I'm not able to make it work. I'm a newbie in javascript, what am I missing?. This is my current javascript code:

    function initAudioPlayer(){
            var audio1, audio2, ext, agent;

            ext = ".mp3";
            agent = navigator.userAgent.toLocaleLowerCase();

            if(agent.indexOf('firefox') != -1 || agent.indexOf('opera') != -1) { ext = ".ogg";}


//Audio Objects: audio1 and audio2

            audio1 = new Audio();
            audio1.src = "folder/Audio1"+ext;
            audio1.loop = false;
            audio1.play();

            audio2 = new Audio();
            audio2.src = "folder/Audio2"+ext;
            audio2.loop = false;
            audio2.play();

//Function that reproduces the second audio file at second 3 of the first audio file

    function audio2(){
            if(audio1.currentTime == 3) {audio2.play();}
        };    
    }

    window.addEventListener("load", initAudioPlayer);

do you want to merge theme and play final audio? – Mehran Hafizi Oct 04 '18 at 05:20 — Mehran Hafizi, Oct 04 '18 at 05:20
Yes @MehranHafizi! But one starts after the other. – Isaias Herrera Oct 04 '18 at 20:08 — Isaias Herrera, Oct 04 '18 at 20:08

Mehran Hafizi · Accepted Answer · 2018-10-05T08:43:25.633

You Must use Audio Api and fetch buffers of your files. Then you must plus each byte and copy to another new buffer. this code can help you:

let idnex=0;
    samples.forEach(buufer => {


      if (index === 0) {
        tempBuf = buufer;
      } else {
        tempBuf = this.appendBuffer(tempBuf, buufer);
      }
      index++;
    });

and by thi method you can append two buffer:

 private appendBuffer(buffer1, buffer2) {


const numberOfChannels = Math.min(buffer1.numberOfChannels, buffer2.numberOfChannels);
const tmp = this.audioContextService.createBuffer(Math.max(buffer1.numberOfChannels, buffer2.numberOfChannels),
  Math.max(buffer1.length, buffer2.length), buffer1.sampleRate);

for (let i = 0; i < numberOfChannels; i++) {

  const channel = tmp.getChannelData(i);
  let finallArray = [];
  let d = [];
  const chanelTemp = buffer1.getChannelData(i);


  if (buffer2.numberOfChannels <= i) {

    finallArray = chanelTemp;
  } else {
    const c = buffer2.getChannelData(i);
    if (chanelTemp.length > c.length) {

      finallArray = chanelTemp;
      d = c;
    } else {

      finallArray = c;
      d = chanelTemp;
    }

    for (let j = 0; j < d.length; j++) {

      finallArray[j] += d[j] / 2;


    }

  }


  channel.set(finallArray, i);

}

you can see my demo here

Also You Can See this Answer

I worked on it a lot last year.if it can help you please check the answer as true — Mehran Hafizi, Oct 06 '18 at 05:30

score 0 · Answer 2 · answered Oct 04 '18 at 15:42

If you truly want this to be accurate in time, you can't use Audio() - that's the HTML5 <audio> element, which is not sample-accurate. Javascript is also not accurate enough in event delivery to use a callback to do this (to be fair, neither are most general-purpose native OS APIs). You need to schedule the playback in advance, which is where Web Audio (https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API) comes in. You need to load both samples, decode them into AudioBuffers, and then schedule playing back each of them with an AudioBufferSourceNode.

Why does my second audio file not play using the currentTime property?

2 Answers2