CODEWITHSUNDEEP
htmlaudiohtml5-audioweb-audio-api
Vandervidi
Vandervidi

Reputation: 692

Web Audio API: Merging stream of mp3 sounds to one file and playing it in <audio> tag

I did a little research about streaming mp3 files from a remote server and playing them as one but because i'm totally new to Web Audio API , i'm a little bit confused.

What i have is PATHs to 5 MP3 files that are stored on another server. Their length is around 10 minutes so the file size is "big". What i want to do to download the first one, start playing it and while it is playing i want to continue and download the other files in their sequence.

I have read that i need to create a XMLHttpRequest to each file and get it as "arraybuffer". Then what i need to do is to decode the arraybuffer. What does it mean to decode it?

Lets say the arraybuffer is decoded, how do i play it in the html5 tag? How do i keep doing XMLHttpRequests and adding them to the arraybuffer of the first file that is already playing?

EDIT: i forgot to mention that i dont want the progress bar to restart every time a new sound file starts playing... I want it to show duration from the first sound file till the last one.

Upvotes: 2

Views: 1137

Answers (1)

aldel
aldel

Reputation: 6758

If all you want to do is play the files end-to-end, I think the way you're trying to do it is overkill. XMLHttpRequest and decoding the buffer would be the way to do it if you're using the Web Audio API, but you should be able to do it without that. Just put tags in your HTML like this:

<audio src="1.mp3" autoplay></audio>
<audio src="2.mp3" preload="auto"></audio>
<audio src="3.mp3" preload="auto"></audio>
<audio src="4.mp3" preload="auto"></audio>
<audio src="5.mp3" preload="auto"></audio>

So the first one will, of course, start playing on its own (except maybe on iOS, where I think autoplay is not supported on principle). Then your JavaScript can listen for events on each audio element and start playing then next one at the appropriate time. The onended event is the one to listen for.

Upvotes: 2

Related Questions