2

I have two songs, which I both need to play at the EXACT same time (down the the index of the AudioBuffer, which I convert to seconds by dividing by the sample rate), the problem is, executing song1.play(); andsong2.play(); takes ~200ms (using console.time) to execute, which throws off the timing - is there anyway to use the buffer or some JS magic to play them EXACTLY at the same time?

javatripping
  • 33
  • 4
  • possible duplicate of [html5/javascript audio play multiple tracks at the same time](http://stackoverflow.com/questions/21016656/html5-javascript-audio-play-multiple-tracks-at-the-same-time) – Maximillian Laumeister Aug 23 '15 at 05:18
  • hm, I tried that answer, but when I execute `song1.play()`, only song1 plays? – javatripping Aug 23 '15 at 05:29
  • Yes, with WebAudio API, you've got an [internal audio clock](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/currentTime) that you can use. check this [MDN demo](https://developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games#Loading_your_tracks) – Kaiido Aug 23 '15 at 05:42

2 Answers2

1

With web audio, you can specify the starting time of AudioBufferSources:

https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/start

László Kardinál
  • 316
  • 1
  • 7
0

Ive made a simple page and tested it.

<html>
<head>
<meta charset="utf-8" />
</head>
<body>

<audio id="player1" controls style="width: 400px;">
<source type="audio/mpeg" src="http://127.0.0.1:8080/1.mp3"></source>
</audio>

<audio id="player2" controls style="width: 400px;">
<source type="audio/mpeg" src="http://127.0.0.1:8080/1.mp3"></source>
</audio>

<script>
    var plyr1 = document.getElementById('player1');
    var plyr2 = document.getElementById('player2');
</script>
</body>
</html>

I put plyr1.play(); plyr2.play(); in console (firefox) and hit enter. there is no difference between those sounds! I dont know what the problem is in your case, but you can give plyr1.autoplay = true; plyr2.autoplay = true; a try , which is not a function so as experience says should take less time ;)
aha, if you are using new Audio() you should note that using new keyword causes javascript to go slow. avoid it and use document.createElement('audio') instead.

Amir Hossein Baghernezad
  • 3,616
  • 27
  • 28
  • if you make the calls `audio1.play(); audio2.play()`it won't matter if you used `new Audio` or `document.createElement` Also, your assumption doesn't sound correct to me, autoplay will fire the `play` method when the file is buffered with the state `canplay` so IMO js or html attribute won't change anything. – Kaiido Aug 23 '15 at 05:46
  • @Kaiido I should say that [in matter of time it differs](http://www.w3schools.com/js/js_object_definition.asp). assuming your second word is true (but I dont think setting a property of an object can fire a method! can it? does it have to do with getters or setters (accessors)? new question made ...), i dont see any differences between those sounds played. I dont know why he is getting mis-timed playing sounds. – Amir Hossein Baghernezad Aug 23 '15 at 06:38
  • I don't see anything about time in your link (you should avoid w3School). But `new Audio()` creator and `document.createElement` method are both synchronous, so if you call the two objects'`play`method, after the creation of these objects, it won't matter how they were created. Now, note taht I used the term `attribute`and not property, for a reason : HTML has attribute, which, when parsed by browser do set properties of the object created. In the case of the àutoplay` attribute, it's just a boolean, which is checked in the internal `canplay` event of the audio. – Kaiido Aug 23 '15 at 07:04
  • It should be verified but I think that `play()` method is deferred until the playState of the audio element is set to `'canplay'` so once again, it won't matter. And now as to why OP has these problems, it can be a lot of things, that you don't encounter like the loading time on a remote server, or even [a chrome bug which doesn't cache audios](http://stackoverflow.com/questions/30433667/cloning-audio-source-without-having-to-download-it-again) and so on. – Kaiido Aug 23 '15 at 07:07