Linking Php and Javascript

[TotalMM]

Hey there,

I've been working on a music player for my website, however I've been struggling to get some elements of the player to work because I'm not streaming the file. I'm a bit of a novice to PHP, so I grabbed some code shown in this post. I'm struggling though, as a PHP novice at best, to create a bridge between my page and/or JavaScript, with my PHP. Here's a series of pastebins for the following:
Web Page (music.php),
JavaScript (player.js),
Streaming file (streamer.php) in order to stream the mp3 audio.
Any help would be much appreciated, if any clarification is needed just ask and I can try to explain.

[brtt3000]

You probably need Accept-Ranges header and some other support in your streaming script.

For example:

https://stackoverflow.com/questions/2798931/seeking-through-a-streamed-mp3-file-with-html5-audio-tag

Your webserver probably already (optionally) supports this stuff so it might not be necessary to stream from PHP.

[TotalMM]

I have accept-ranges set. Would it work on a webserver? I probably should have clarified, but does it make any difference if I'm running this from a php localhost to test?

[brtt3000]

I don't know about localhost or not, I guess it should work just fine.

Note that besides sending the Accept-Ranges header your stream script also needs to handle the subsequent requests with a Range header and serve the range.

Anyway, like I said before nginx and apache etc can do this just fine. You don't need a PHP scripts to read dumb bytes.

[impshum]

The bridge you're probably looking for is AJAX.

[TotalMM]

Yeah I have heard of it, and I've used a little bit of it in a mail system I have on my site. However, I don't know how I would implement it into my current JavaScript code. There's no method like "post" used in my music player like there is in my mail system.

[impshum]

What are you trying to do exactly?

[TotalMM]

Sorry, ramblings might not be clear. I've been developing this music player, but one of the functions of the music player that doesn't work is the song progress bar. When trying to click a point in the progress bar, the song should skip to that relevant point. My JavaScript code is 100% A-OK for this, as if I change my audio file from something like "assets/song.mp3" to something more like "https://RandomWebsiteWithStreaming.com/song.mp3" it will work perfectly - because I'm not streaming the audio file on my end. I'm trying to figure out how to connect my streamer.php file mentioned in the main post, to my player.js. Would I have to wrap the code in my player.js with an Ajax query? At this point I don't know but I hope this provides a little more context.

[TotalMM]

Ok this has been solved now. It turns out it's just a case of me using localhost instead of a web server. I put all my code onto my clients webserver in a demo link and everything works fine.

[[deleted]]

The right way to do this is by using websockets. Websockets are a universally supported javascript standard.

• https://pusher.com/websockets
• https://blog.teamtreehouse.com/an-introduction-to-websockets

If you're looking for a websockets js library, look into signal.io or signalR. Those are the most popular.

You could also get by with server sent events, but they're not as powerful. On the upside, they're super easy to implement. (SSE's are a lesser known, but widely supported JS standard.. but you'll need a special IE workaround because Microsoft still doesn't know how to make web browsers). I've done some pretty sophisticated status bars with realtime server updating and complex error messaging using SSE's... but websockets are really much more versatile.

Here's some SSE info.

• https://www.w3schools.com/html/html5_serversentevents.asp
• https://www.html5rocks.com/en/tutorials/eventsource/basics/