"Radio, météo, l'heure est toujours à portée de main" ou l'histoire d'une solution (matériel, logiciel, interface)

Il se trouve que j'aime la musique et que j'ai toujours une sorte d'enceintes installées dans ma cuisine. Il s'agit maintenant d'une paire stéréo avec prise en charge Bluetooth.





Mais quelle source utiliser? J'ai un téléphone, ma femme a un téléphone, mon enfant a un téléphone et tous les téléphones veulent se connecter à ces haut-parleurs, ce qui entraßne souvent certains inconvénients. Les haut-parleurs ne savent pas à partir de quel appareil je veux écouter de la musique pour le moment, et ils se connectent donc au premier appareil qu'ils rencontrent. En conséquence, pour simplement activer un joli arriÚre-plan, vous devez effectuer un certain nombre d'actions:





  • assurez-vous que c'est votre tĂ©lĂ©phone qui est actuellement couplĂ© avec des haut-parleurs;





  • si ce n'est pas le vĂŽtre, vous devez interrompre la connexion des haut-parleurs avec tous les autres appareils et Ă©tablir une connexion;





  • exĂ©cutez une application;





  • choisissez une sorte de musique;





  • et si vous recevez toujours un appel sur cet appareil, et si le tĂ©lĂ©phone de votre femme se connecte plus rapidement que le vĂŽtre?! ...





En général, à partir d'un simple «Je veux écouter de la musique ici et maintenant», le processus s'est transformé en une série de passes magiques, et parfois il n'y avait aucune envie de démarrer ce processus du tout. Ce qu'il fallait, c'était un moyen simple, fiable et pratique d'activer la musique et de poursuivre vos activités.





Matériel, logiciel

J'ai pris une vieille tablette (sous Android), écrit une petite application Web, jumelé la tablette et les haut-parleurs, positionné la tablette dans un endroit accessible et obtenu ce dont j'avais besoin.





Voici comment il a l'air vivant (sur la photo, il y a une tablette plus photogénique, le véritable appareil est fixé à l'aide de supports pour peintures ala "Velcro" sur le réfrigérateur).





Radio, météo, l'heure est toujours à portée de main
Radio, météo, le temps est toujours à portée de main

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





-, .





:





  • , . ( ).





Évolution de l'interface

  1. , . " - " !





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





  3. , - - - . 8 , , .





Pour le moment, je prévois de faire une pause dans le développement et d'utiliser simplement cette solution. Au fil du temps, si nécessaire, je peux visser la géolocalisation et une liste personnalisable de chaßnes radio.





cerise

De nombreux développeurs Web ne savent pas à quoi ressemblent 100 points Lighthouse. Comme ça... :)





Phare.  Tous les 100.
Phare. Tous les 100.

Site du projet





Je serai heureux si mon expérience vous est utile. Bonne chance à tous!








All Articles