I’ve attached sound to my Pi, and now I’m trying to make a web-controlled internet radio receiver out of it. Everything already works, i.e., the chassis is in place. There’s not much to write about really, a small web wrapper over the player and mixer that I screwed together in 10 minutes.
But I need help from client-side experts. I.e., I want to show this in a computer and phone browser, and for that I need a bit of HTML, a bit of CSS, and a touch of JS. If you happen to have nothing to do for the new year, then welcome to the spec:
request: /list
response: {"response":{"list":{"Jazz":"http://streaming208.radionomy.com:80/A-JAZZ-FM-WEB","FoxNews":"http://fnradio-shoutcast-32.ng.akacast.akamaistream.net/7/115/13873/v1/auth.akacast.akamaistream.net/fnradio-shoutcast-32","Mozart":"http://radio.skypherence.com:8000/radiomozart"}}}
request: /play/FoxNews
response: {"response":{"station":"http://fnradio-shoutcast-32.ng.akacast.akamaistream.net/7/115/13873/v1/auth.akacast.akamaistream.net/fnradio-shoutcast-32"}}
request: /stop
response: {"response":{"result":1}}
request: /status
response: {"response":{"status":"stop"}} #when silent
response: {"response":{"status":"play","station":"FoxNews"}} #when playing
request: /volume/4 #0-mute, 10-max
response: {"response":{"level":"4"}}
Here’s such a “mockup” in my head
Everything here is clear without explanations, right? I’ll be happy if someone is found and writes something. You can write to me at email which is [email protected], or post wherever convenient for you.
Happy holidays!
RESULTS
- The first working and beautiful variant was proposed by @yurtaev and he is appointed ChiefWebSpecialist and in general, a cool dude! Thanks to everyone who sent their variants — I’ll definitely look at them, but you don’t have much chance against the ChiefWebSpecialist, I can hardly imagine something so simple and so suitable.
- here are the results of all our creativity — server part and client part
- here someone launched this whole thing on Windows
This post was translated from the Russian original with AI assistance and reviewed by a human.