"Rádio, clima, o tempo está sempre à mão" ou a história de uma solução (hardware, software, interface)

Acontece que eu adoro música e sempre tenho algum tipo de caixa de som instalada na minha cozinha. Agora é um par estéreo com suporte para bluetooth.





Mas qual fonte usar? Eu tenho um telefone, minha esposa tem um telefone, meu filho tem um telefone e todos os telefones querem se conectar a esses alto-falantes, e isso geralmente causa alguns inconvenientes. Os alto-falantes não sabem de qual dispositivo eu desejo tocar música agora e, portanto, eles se conectam ao primeiro dispositivo que encontrarem. Como resultado, para simplesmente ativar um bom plano de fundo, você precisa realizar uma série de ações:





  • certifique-se de que é o seu telefone que está emparelhado com alto-falantes;





  • se não for o seu, você precisa interromper a conexão dos alto-falantes com todos os outros dispositivos e fazer a conexão;





  • execute algum aplicativo;





  • escolha algum tipo de música;





  • e se você ainda receber uma ligação neste aparelho, e se o telefone da sua esposa conectar mais rápido que o seu?! ...





Em geral, a partir de um simples "Quero ouvir música aqui e agora", o processo se transformou em uma série de passes mágicos, e às vezes nem havia vontade de iniciar esse processo. O que era necessário era uma maneira simples, confiável e conveniente de ligar a música e continuar com seus negócios.





Hardware, software

Peguei um tablet antigo (no Android), escrevi um pequeno aplicativo da web, emparelhei o tablet e os alto-falantes, posicionei o tablet em um local acessível e peguei o que precisava.





É assim que fica vivo (na foto há um tablet mais fotogênico, o dispositivo real é fixado com a ajuda de suportes para pinturas ala "Velcro" na geladeira).





Rádio, clima, tempo está sempre à mão
Rádio, clima, tempo está sempre à mão

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





-, .





:





  • , . ( ).





Evolução da interface

  1. , . " - " !





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





  3. , - - - . 8 , , .





No momento, pretendo fazer uma pausa no desenvolvimento e apenas usar esta solução. Com o tempo, se necessário, posso estragar a geolocalização e uma lista personalizável de canais de rádio.





cereja

Muitos desenvolvedores da web não sabem a aparência de 100 pontos farol. Assim... :)





Farol.  Todos os 100.
Farol. Todos os 100.

Projetar site





Ficarei feliz se minha experiência for útil para você. Boa sorte a todos!








All Articles