It just so happened that I love music and I always have some kind of speakers installed in my kitchen. Now it is a stereo pair with bluetooth support.
But which source to use? I have a phone, my wife has a phone, my child has a phone, and all phones want to connect to these speakers, and this often leads to certain inconveniences. The speakers do not know from which device I want to play music right now, and therefore they connect to the first device they come across. As a result, in order to simply turn on some nice background, you need to perform a number of actions:
make sure that it is your phone that is currently paired with speakers;
if not yours, you need to break the connection of the speakers with all other devices and make a connection;
run some kind of application;
choose some kind of music;
and if you still get a call on this device, and if your wife's phone connects faster than yours ?! ...
In general, from a simple "I want to listen to music here and now," the process turned into a series of magical passes, and sometimes there was no desire to start this process at all. What was needed was a simple, reliable, and convenient way to turn on the music and get on with your business.
Hardware, software
I took an old tablet (under android), wrote a small web application, paired the tablet and speakers, positioned the tablet in an accessible place and got what I needed.
This is how it looks alive (in the photo there is a more photogenic tablet, the real device is attached with the help of holders for paintings ala "Velcro" on the refrigerator).
20 -web--, , - . ...
Web-, UI/UX
UI/UX . : , . , . , , .
, , , :
, ;
();
-;
();
.
...
1.
Web App Manifest , .
Web Audio Api , . . ( , ). "" .
:
"" ;
;
- ;
, Mobile Safari . 21 : , .
2.
Wake Lock Api .
- , , , - -. .. , Web Audio Api, , , . .
- , .
mSafari , , . , mp3 . . , , .
.
:
Web Audio Api . . "" .
3.
.. Web Audio Api mSafari, , Web Audio Api html5 audio.
. Lighthouse (pagespeed google). 100 , .
-, .
:
, . ( ).
, . " - " !
Web Audio Api - , , ( , ( ), ). , 21 , web- .
, - - - . 8 , , .
At the moment, I plan to take a break from development and just use this solution. Over time, if necessary, I can screw up geolocation and a customizable list of radio channels.
Cherry
Many web developers don't know what 100 points in Lighthouse look like. Like this... :)
I will be glad if my experience is useful to you. Good luck to everyone!