"Radio, clima, tiempo siempre a mano" o la historia de una solución (hardware, software, interfaz)

Dio la casualidad de que amo la música y siempre tengo algún tipo de parlantes instalados en mi cocina. Ahora es un par estéreo con soporte bluetooth.





Pero, ¿qué fuente usar? Tengo un teléfono, mi esposa tiene un teléfono, mi hijo tiene un teléfono y todos los teléfonos quieren conectarse a estos altavoces, y esto a menudo genera ciertos inconvenientes. Los altavoces no saben desde qué dispositivo quiero reproducir música en este momento y, por lo tanto, se conectan al primer dispositivo que encuentran. Como resultado, para simplemente activar un fondo agradable, debe realizar una serie de acciones:





  • asegúrese de que sea su teléfono el que esté emparejado actualmente con altavoces;





  • si no es el tuyo, debes romper la conexión de los altavoces con todos los demás dispositivos y hacer una conexión;





  • ejecutar algún tipo de aplicación;





  • elige algún tipo de música;





  • y si aún recibe una llamada en este dispositivo, y si el teléfono de su esposa se conecta más rápido que el suyo?! ...





En general, a partir de un simple "quiero escuchar música aquí y ahora", el proceso se convirtió en una serie de pases mágicos, y en ocasiones no había ningún deseo de iniciar este proceso. Lo que se necesitaba era una forma simple, confiable y conveniente de encender la música y continuar con su negocio.





Hardware software

Tomé una tableta vieja (debajo de Android), escribí una pequeña aplicación web, emparejé la tableta y los parlantes, coloqué la tableta en un lugar accesible y obtuve lo que necesitaba.





Así se ve vivo (en la foto hay una tableta más fotogénica, el dispositivo real se adjunta con la ayuda de soportes para pinturas ala "Velcro" en el refrigerador).





Radio, clima, el tiempo siempre está a la mano
Radio, clima, el tiempo siempre está a la mano

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 , .





-, .





:





  • , . ( ).





Evolución de la interfaz

  1. , . " - " !





  2. Web Audio Api - , , ( , ( ), ). , 21 , web- .





  3. , - - - . 8 , , .





Por el momento, planeo tomarme un descanso del desarrollo y usar esta solución. Con el tiempo, si es necesario, puedo estropear la geolocalización y una lista personalizable de canales de radio.





cereza

Muchos desarrolladores web no saben cómo son los 100 puntos Lighthouse. Me gusta esto... :)





Faro.  Los 100.
Faro. Los 100.

Sitio del proyecto





Estaré encantado si mi experiencia te resulta útil. Buena suerte a todos!








All Articles