Pengembangan Tampilan Antarmuka Bioakustik Berbasis Web untuk Penyajian Data Soundscape

Stephanie Chika Devanesa Daniarto, Ir. Sentagi Sesotya Utami, S.T., M.Sc., Ph.D., IPU.; Prof. Dr. Ir. Faridah, S.T., M.Sc., IPU., ASEAN Eng.,

2026 | Skripsi | FISIKA TEKNIK

Perubahan penggunaan lahan, fragmentasi, degradasi hutan, dan pembangunan infrastruktur dapat memengaruhi soundscape hutan alami. Penelitian ini bertujuan mengembangkan lebih lanjut antarmuka web Soundcape Management System (SsMS) untuk menyajikan data simulasi bioakustik dan informasi pendukung secara terstruktur. 

Penelitian meliputi studi literatur, penentuan tuntutan perancangan, penentuan informasi dan visualisasi, perancangan, menggunakan Figma, serta pembangunan antarmuka menggunakan HTML, Tailwind CSS, dan JavaScript. Data simulasi dan berkas audio disediakan melalui mock server untuk merepresentasikan komposisi soundscape, hasil sonotyping, waveform, spectrogram, acoustic indices, dan kondisi perangkat. Pengujian dilakukan menggunakan black-box testing dan Lighthouse.

Hasil black-box testing menunjukkan 12 skenario uji berhasil dijalankan dengan adanya delay pada bagian sonotyping. Hasil Lighthouse menunjukkan seluruh halaman berkategori Good pada aspek best practices. Pada aspek SEO, sembilan halaman berkategori Good dan satu Needs Improvement, sedangkan pada performance dan accessibility masing-masing terdapat tiga halaman Good dan tujuh Needs Improvement. Kategori Good menunjukkan skor 90-100 menunjukkan teknis halaman baik, sedangkan Needs Improvement menunjukkan skor 50-89 yang masih memerlukan perbaikan. 

Land-use change, forest fragmentation, degradation, and infrastructure development may affect the soundscape of forests. This study aims to further develop the web-based interface of the Soundscape Management System (SsMS) to present simulated bioacoustic data and supporting information in a structured manner.

The research stages included a literature review, determination of design requirements, identification of the information and visualizations to be displayed, interface design using Figma, and interface development using HTML, Tailwind CSS, and JavaScript. Simulated data and audio files were provided through a mock server to represent soundscape composition, sonotyping results, waveforms, spectrograms, acoustic indices, and device conditions. The interface was evaluated using black-box testing and Lighthouse.

The black-box testing results showed that all 12 test scenarios were successfully executed, although a delay was observed in the sonotyping section. The Lighthouse results showed that all pages were categorized as Good for best practices. For SEO, nine pages were categorized as Good and one as Needs Improvement, while for performance and accessibility, three pages were categorized as Good and seven as Needs Improvement in each aspect. The Good category represents scores of 90–100, indicating good technical quality of the page, whereas Needs Improvement represents scores of 50–89, indicating that further improvements are still required.

Kata Kunci : Bioakustik, Dashboard, Soundscape Management System, Mock Server, Lighthouse, Bioacoustics, Dashboard, Soundscape Management System, Mock Server, Lighthouse