"Radio, cuaca, waktu selalu dekat" atau kisah satu solusi (perangkat keras, perangkat lunak, antarmuka)

Kebetulan saya suka musik dan saya selalu memasang beberapa jenis speaker di dapur saya. Sekarang ini adalah pasangan stereo dengan dukungan bluetooth.





Tetapi sumber mana yang harus digunakan? Saya memiliki telepon, istri saya memiliki telepon, anak saya memiliki telepon, dan semua telepon ingin disambungkan ke speaker ini, dan ini sering menyebabkan ketidaknyamanan tertentu. Speaker tidak tahu dari perangkat mana saya ingin memutar musik sekarang, dan oleh karena itu mereka terhubung ke perangkat pertama yang mereka temukan. Akibatnya, untuk mengaktifkan beberapa latar belakang yang bagus, Anda perlu melakukan sejumlah tindakan:





  • pastikan ponsel Anda yang saat ini dipasangkan dengan speaker;





  • jika bukan milik Anda, Anda perlu memutuskan koneksi speaker dengan semua perangkat lain dan membuat koneksi;





  • menjalankan beberapa aplikasi;





  • pilih beberapa jenis musik;





  • dan jika Anda masih mendapatkan panggilan di perangkat ini, dan jika ponsel istri Anda terhubung lebih cepat dari ponsel Anda?! ...





Secara umum, dari kalimat sederhana "Saya ingin mendengarkan musik di sini dan sekarang", prosesnya berubah menjadi serangkaian umpan ajaib, dan terkadang tidak ada keinginan untuk memulai proses ini sama sekali. Yang dibutuhkan adalah cara yang sederhana, andal, dan nyaman untuk menghidupkan musik dan melanjutkan bisnis Anda.





Perangkat keras Perangkat Lunak

Saya mengambil tablet lama (di bawah android), menulis aplikasi web kecil, memasangkan tablet dan speaker, menempatkan tablet di tempat yang dapat diakses dan mendapatkan apa yang saya butuhkan.





Ini tampilannya hidup (di foto ada tablet yang lebih fotogenik, perangkat asli dipasang dengan bantuan pemegang lukisan ala "Velcro" di lemari es).





Radio, cuaca, waktu selalu dekat
Radio, cuaca, waktu selalu dekat

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





-, .





:





  • , . ( ).





Evolusi antarmuka

  1. , . " - " !





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





  3. , - - - . 8 , , .





Saat ini, saya berencana untuk istirahat dari pengembangan dan hanya menggunakan solusi ini. Seiring waktu, jika perlu, saya dapat mengacaukan geolokasi dan daftar saluran radio yang dapat disesuaikan.





ceri

Banyak pengembang web tidak tahu seperti apa 100 titik Lighthouse itu. Seperti ini... :)





Mercu suar.  Semua 100.
Mercu suar. Semua 100.

Situs proyek





Saya akan senang jika pengalaman saya bermanfaat bagi Anda. Semoga berhasil untuk semuanya!








All Articles