How to use readableStream to stream audio at the same time for all website users?

I’m making a website for someone who wants to have a constantly looping audio file that streams at the same time to all users. For instance, if a user were to access the website at 12:30, and the website were to have looped the audio file at 12, the user would hear the audio 30 minutes into the file.

In investigating possible methods to accomplish this, readableStream seemed like a good option; but I’m not sure how to implement it, which I attribute to myself needing to study more javascript in order to understand the resources that explain it.

Might anyone be able to help me understand how to code readableStream to accomplish this?

I currently have the website fully prepared aside from this crucial point and, currently, the website just starts playing the audio file from the beginning for any user who loads for the page.

Answer

Not really my field but happy to try as requested! Wiser heads please step in. Assume you are using a fixed size (say mp3) file that is downloaded, and not streaming. And use your server clock rather than the user’s clock for consistency among users.

Be aware that there normally has to be a user interaction (like a click) for media to play.

Use the modulus operator (%) to get the start point. e.g. with simple numbers, if the time now is +120 seconds from your “day start”, and the file is 35 seconds long, you should scrub to 15 secs in the file. 120 % 35 = 15.

You can set the “”scrub-to”” time in the file URI when you deliver the html

<audio
    src="file.mp3#t=00:00:15" 
    loop
...
</audio>

or use javascript, e.g. see HTML 5 <audio> – Play file at certain time point and others, which would also allow you to further increment the scrub after the download, while waiting for the user to click. Hope that can get you started.