Menurut data MRC, musik latar yang sesuai merek mendorong 41% pelanggan untuk tinggal lebih lama dan 39% untuk kembali ke bisnis.
Apabila Anda menjalankan butik, situs portofolio, restoran, atau agen kreatif, menambahkan audio ambient menciptakan suasana yang selaras dengan merek Anda. Musik menetapkan nuansa emosional, membimbing perilaku pengunjung, dan mengubah pengalaman menjelajah statis menjadi sesuatu yang berkesan. Bagi pemilik situs Squarespace, mengintegrasikan musik latar bisa membedakan kehadiran online Anda dan membuat pengunjung tetap terlibat dengan konten Anda lebih lama.
Widget Elfsight Background Music menawarkan solusi tanpa kode untuk menyematkan audio ambient berulang di situs Squarespace Anda. Dengan opsi pemutaran yang bisa disesuaikan, beberapa sumber audio, dan tata letak pemutar yang fleksibel, Anda bisa menciptakan suasana suara yang sempurna untuk merek Anda dalam hitungan menit.
- Cara mengatur musik latar di Squarespace tanpa coding
- Instruksi menyematkan musik di halaman tertentu atau di seluruh situs Anda
- Fitur utama yang membuat audio latar efektif untuk keterlibatan pengunjung
- Solusi alternatif, termasuk blok audio bawaan Squarespace
- Praktik terbaik mengoptimalkan pemutaran musik di Squarespace
Mulai Cepat: Tambahkan Musik Latar ke Squarespace
Jika Anda lebih memilih implementasi langsung daripada teori, berikut proses singkat untuk membuat musik latar Anda live dalam hitungan menit:
- Buka editor musik latar dan pilih templat.
- Tambahkan trek Anda & sesuaikan pemutar musik.
- Klik “Tambahkan ke Situs” untuk mendapatkan kode sisipan.
- Tempel kode tersebut ke backend situs web Anda dan publikasikan.
🚀 Buat Pemutar Musik Latar Anda sekarang juga di editor langsung!
Mengapa Menambahkan Musik Latar ke Situs Squarespace Anda
🎵 Ciptakan suasana merek yang imersif
Musik latar langsung menyampaikan kepribadian dan suasana merek Anda. Entah Anda menjalankan spa, butik, atau studio kreatif, lanskap suara yang tepat memperkuat identitas visual Anda dan membantu pengunjung terhubung secara emosional dengan penawaran Anda.
🕑 Tingkatkan durasi kunjungan di situs Anda
Situs dengan audio latar menjaga pengunjung tetap terlibat lebih lama. Musik menciptakan lingkungan penjelajahan yang nyaman, mendorong eksplorasi, mengurangi tingkat pentalan, dan meningkatkan peluang konversi.
🎉 Tetapkan suasana untuk momen istimewa
Musik musiman mengubah situs Anda untuk liburan, peluncuran produk, atau acara khusus. Mulai dari lagu meriah saat Natal hingga irama energik untuk kampanye penjualan, audio menambahkan dimensi dinamis yang tidak bisa dicapai konten statis saja.
🎨 Tingkatkan pengalaman pengguna tanpa gangguan
Jika diterapkan dengan bijak, musik latar melengkapi konten Anda alih-alih bersaing dengan konten itu. Pengunjung dapat mengendalikan pemutaran, menyesuaikan volume, atau menjeda audio, memastikan pengalaman tetap ramah pengguna dan mudah diakses.
Fitur Utama Widget Musik Latar
Di bawah ini adalah rincian kemampuan inti widget dan bagaimana setiap fitur diterjemahkan menjadi fungsionalitas praktis untuk situs Squarespace Anda.
| Fitur | Kegunaan Praktis |
|---|---|
| Beberapa sumber audio | Unggah file langsung atau tautkan trek dari SoundCloud, YouTube, Vimeo, Google Drive, Amazon S3, dan lainnya |
| Lagu tanpa batas | Buat daftar putar yang luas yang terus-menerus diulang atau diacak untuk variasi |
| Opsi Putar Otomatis | Mulai musik secara otomatis saat pengunjung membuka halaman Anda (tergantung izin peramban) |
| Tata Letak Mengambang dan Tertanam | Letakkan pemutar di sudut halaman secara halus, atau integrasikan ke dalam konten halaman Anda secara mulus. |
| Kontrol Pemutar yang Dapat Disesuaikan | Tampilkan atau sembunyikan daftar putar, bilah kemajuan, info trek, dan tombol pemutaran sesuai preferensi desain Anda |
| Tema gelap dan terang | Sesuaikan tampilan pemutar agar cocok dengan skema warna situs Squarespace Anda menggunakan tema siap pakai atau warna kustom |
| Putar Ulang & Acak | Biarkan musik terus diputar tanpa henti atau acak urutan lagu untuk pengalaman mendengarkan yang dinamis |
| Responsif terhadap seluler | Pastikan pemutar bekerja mulus di semua perangkat dan ukuran layar |
Untuk rincian fitur lengkap, kunjungi halaman fitur Musik Latar halaman fitur.
Langkah-demi-langkah: Menambahkan Musik Latar ke Squarespace
Sekarang mari kita jalani proses pengaturan lengkap, mulai dari mengonfigurasi pemutar musik Anda di editor Elfsight hingga menyematkannya di situs Squarespace Anda.
Langkah 1: Akses editor Musik Latar
Buka editor widget Musik Latar Belakang Elfsight dan telusuri galeri templat. Pilih templat pra-desain yang selaras dengan estetika & tujuan situs Anda, lalu klik “Lanjutkan dengan templat ini” untuk memulai kustomisasi.
Langkah 2: Tambahkan trek audio Anda
Unggah file audio langsung dari perangkat Anda atau tempel URL dari platform eksternal. Elfsight mendukung semua format audio standar (MP3, M4A, WAV, AAC, dll.) dan terintegrasi dengan SoundCloud, YouTube, Vimeo, Google Drive, Amazon S3, Dropbox, serta aliran Shoutcast/Icecast. Tambahkan sebanyak yang Anda perlukan untuk membuat daftar putar.
Langkah 3: Pilih tata letak pemutar
Pilih antara dua opsi tata letak: Floating atau Embed. Tata letak Floating menciptakan pemutar yang ringkas dan dapat dipindah, tetap terlihat saat pengunjung menggulir, ideal untuk audio latar yang tidak mencolok. Tata letak Embed terintegrasi langsung ke konten halaman Anda, menampilkan informasi trek lengkap dan sampul album untuk tampilan yang lebih menonjol.
Langkah 4: Atur Pengaturan Pemutaran
Aktifkan atau nonaktifkan Autoplay, Ulangi, dan Acak sesuai preferensi Anda. Atur apakah daftar putar terlihat atau tersembunyi. Sesuaikan kontrol pemutar yang muncul, seperti tombol Putar/Jeda, lompat maju/kembali, volume, dan tombol daftar putar.
Langkah 5: Sesuaikan tampilan pemutar
Pilih dari tema pra-buatan Gelap atau Terang, atau buat skema warna kustom yang sesuai dengan situs Squarespace Anda. Unggah gambar latar belakang kustom, sesuaikan warna elemen (latar belakang, aksen, teks), dan haluskan detail visual pemutar. Sembunyikan atau tampilkan informasi lagu seperti nama artis, judul, dan bilah kemajuan sesuai preferensi desain Anda.
Langkah 6: Hasilkan dan salin kode sisipan
Klik “Tambahkan ke Situs” untuk menghasilkan kode pemasangan. Salin potongan HTML ke clipboard Anda. Anda akan menempelkan kode ini ke situs Squarespace Anda pada langkah berikutnya.
Langkah 7: Sematkan Pemutar di Squarespace
Metode 1 — Halaman Tertentu (Squarespace 7.1):
Tersedia pada paket Core, Plus, dan Advanced (sebelumnya Business dan Commerce):
- Di menu kiri, klik Website → Pages, lalu pilih halaman yang dituju.
- Klik Sunting di atas bagian tempat Anda ingin menambahkan widget.
- Klik tombol Tambahkan blok dan pilih Kode.
- Klik ikon Edit dan tempel kode pemasangan ke dalam pop-up Konten.
- Klik Simpan / Terbitkan.
Metode 2 — Semua Halaman (musik latar situs secara menyeluruh):
- Di menu kiri, klik Situs → Halaman.
- Pergi ke Settings (ikon gear) untuk halaman spesifik yang ingin Anda sesuaikan, atau buka Website Tools → Code Injection untuk pemasangan di seluruh situs.
- Tambahkan kodenya melalui Code Injection → Header atau Footer.
- Klik Simpan dan Terbitkan.
Pemeriksaan Cepat Pemecahan Masalah
- Pemutar tidak muncul: Pastikan Anda menggunakan blok Kode (bukan Teks Kaya). Verifikasi bahwa kode sisipan tidak terpotong atau diubah saat ditempel. Periksa apakah paket Squarespace Anda mendukung kode kustom (rencana Basic memiliki keterbatasan).
- Ruang spasi tambahan di bawah pemutar: Editor Fluid Engine Squarespace kadang menambahkan jarak yang tidak diinginkan. Tambahkan potongan CSS berikut sebelum kode instalasi:
<style>.sqs-block-code { margin-bottom: 0 !important; }</style>atau beralih ke Editor Klasik untuk bagian itu. Lihat panduan perbaikan padding Squarespace. - Autoplay not working: Kebijakan autoplay peramban secara default memblokir autoplay dengan suara. Pengguna harus berinteraksi dengan halaman terlebih dahulu (klik, sentuh, dll.). Uji di berbagai peramban dan pertimbangkan menambahkan isyarat visual “Klik untuk memulai”.
- Pemutar hanya muncul setelah penyegaran halaman: Ini disebabkan oleh arsitektur SPA Squarespace (Aplikasi Halaman Tunggal). Letakkan baris pertama kode instalasi (skrip platform) di Code Injection → Header untuk memperbaikinya. Lihat artikel pemecahan masalah ini.
- Musik berhenti saat menavigasi antar halaman: Jika Anda menanamkan pemutar pada satu halaman, audio akan direset saat navigasi halaman. Untuk pemutaran berkelanjutan di seluruh situs Anda, gunakan metode instalasi lintas situs (Code Injection).
Solusi Bawaan untuk Menambahkan Audio ke Squarespace
Meskipun widget Musik Latar Elfsight menawarkan kustomisasi yang paling komprehensif, Squarespace menyediakan beberapa cara bawaan untuk menambahkan audio. Berikut apa yang ditawarkan masing-masing pendekatan dan keterbatasannya.
Blok Audio Squarespace
Blok Audio bawaan Squarespace memungkinkan Anda menyematkan satu berkas audio langsung ke konten halaman Anda.
- Arahkan ke halaman tempat Anda ingin menambahkan audio.
- Klik ikon + untuk menambahkan blok baru.
- Pilih Audio dari menu blok.
- Unggah file MP3 atau M4A dari komputer Anda, atau tambahkan URL dari platform penyimpanan cloud.
- Sesuaikan tampilan pemutar dan klik Simpan.
Blok SoundCloud (Putar Otomatis)
Untuk trek yang dihosting di SoundCloud, Anda bisa mengaktifkan pemutaran otomatis menggunakan blok SoundCloud Squarespace.
- Bagikan → Sematkan tab.
- Check Aktifkan pemutaran otomatis di pengaturan penyematan.
- Salin kode sematan.
- Di Squarespace, tambahkan blok Kode ke halaman Anda.
- Tempelkan kode sematan SoundCloud dan simpan.
Implementasi Audio HTML/CSS secara manual
Para pengembang dapat menambahkan pemutar audio HTML kustom menggunakan Code Injection atau blok Kode Squarespace.
- Buat kode pemutar audio HTML5 kustom Anda.
- Buka Pengaturan → Lanjutan → Injeksi Kode untuk penerapan di seluruh situs.
- Tempelkan kode kustom Anda di bagian Header atau Footer.
- Simpan dan Publikasikan.
Widget Pemutar Audio Elfsight
Jika Anda membutuhkan kontrol lebih atas penyajian trek individu dengan tombol unduh dan metadata terperinci, pertimbangkan widget Elfsight Audio Player sebagai alternatif untuk Background Music.
Berbeda dengan Musik Latar (dirancang untuk pemutaran ambient, terus-menerus), Pemutar Audio dioptimalkan untuk menampilkan koleksi musik, podcast, buku audio, atau perpustakaan suara di mana pengguna secara aktif berinteraksi dengan trek tertentu. Ia menampilkan sampul album yang mencolok, informasi trek yang rinci, dan tombol unduh/beli bawaan—tepat bagi musisi, podcaster, dan pembuat konten yang ingin pengunjung berinteraksi langsung dengan konten audionya.
Perbandingan: Elfsight vs. Solusi Bawaan Squarespace
Berikut perbandingan Widget Musik Latar Elfsight dengan opsi bawaan Squarespace dan implementasi manual pada fitur-fitur yang paling penting:
| Fitur | Musik Latar Elfsight | Blok Audio Squarespace | Blok SoundCloud | Panduan HTML |
| Playlist dengan banyak trek | Ya | Tidak | Lagu tunggal | Jika diprogram |
| Pemutaran Otomatis | Ya | Tidak | Hanya SoundCloud | Jika diprogram |
| Putar Ulang & Acak | Ya | Tidak | Tidak | Jika diprogram |
| Desain yang dapat disesuaikan | Ya | Terbatas | Tidak | Kontrol penuh |
| Tanpa Coding | Ya | Ya | Ya | Tidak |
| Berfungsi di semua halaman | Ya | Tidak | Tidak | Jika dikonfigurasi |
| Responsif terhadap seluler | Ya | Ya | Ya | Tergantung kode |
| Beberapa sumber audio | Ya | Terbatas | Hanya SoundCloud | Jika diprogram |
Widget Musik Latar Elfsight menggabungkan kemudahan blok bawaan dengan kekuatan dan fleksibilitas kode kustom, memberikan yang terbaik dari kedua dunia tanpa kerumitan teknis.
📝 Tips Optimasi Pemutar Musik Latar Belakang
Setelah pemutar musik Anda aktif, praktik terbaik ini akan membantu Anda memaksimalkan keterlibatan sambil menjaga pengalaman pengguna yang luar biasa serta kinerja situs.
- Pastikan volumenya tidak terlalu keras. Atur volume awal menjadi 20-30% untuk menghindari kejutan pada pengunjung. Suara yang terlalu keras bisa mengganggu dan membuat pengguna pergi segera.
- Sediakan kontrol pemutaran yang terlihat. Selalu berikan pengunjung opsi untuk menjeda, melewati, atau menyesuaikan volume. Audio paksa tanpa kontrol menciptakan pengalaman pengguna yang buruk.
- Uji autoplay di berbagai peramban. Chrome, Safari, dan Firefox menangani autoplay secara berbeda. Uji penerapan Anda di beberapa peramban dan perangkat untuk memahami perilakunya. Pertimbangkan menambahkan tombol “Klik untuk mulai musik” jika autoplay tidak dapat diandalkan.
- Sesuaikan audio dengan merek Anda. Pilih trek yang memperkuat suasana dan tujuan situs Anda. Spa sebaiknya menampilkan musik ambient yang menenangkan, sementara situs kebugaran bisa menggunakan ritme yang energik. Konsistensi memperkuat identitas merek.
- Optimalkan ukuran berkas untuk kinerja. Berkas audio berukuran besar memperlambat waktu muat halaman. Kompres berkas audio menjadi 128-192kbps untuk musik latar (bitrate yang lebih tinggi tidak diperlukan untuk pemutaran ambient). Ini mengurangi penggunaan bandwidth dan meningkatkan kecepatan halaman.
- Perhatikan penggunaan data seluler. Audio yang diputar otomatis mengonsumsi data seluler. Perhatikan pengguna dengan paket data terbatas. Pertimbangkan menonaktifkan autoplay pada perangkat seluler atau memberikan pemberitahuan jelas bahwa audio akan diputar.
Pertanyaan yang Sering Diajukan
Bagaimana cara menambahkan musik ke Squarespace tanpa paket berbayar?
Bisakah saya menambahkan musik latar ke semua halaman di Squarespace?
Apakah musik latar berfungsi di perangkat seluler?
Berapa banyak file audio yang bisa saya tambahkan ke widget Musik Latar?
Format file audio apa saja yang didukung Elfsight?
Apakah musik latar akan memengaruhi kecepatan muat situs Squarespace saya?
Kesimpulan
Menambahkan musik latar ke situs Squarespace Anda menciptakan pengalaman merek yang imersif yang tidak dapat dicapai hanya dengan konten statis. Baik Anda ingin menyiapkan suasana untuk promosi musiman, menciptakan nuansa untuk portofolio, maupun membangun atmosfer unik untuk toko online Anda, musik latar menjaga pengunjung tetap terlibat lebih lama dan memperkuat identitas merek Anda.
Widget Musik Latar Elfsight menawarkan solusi tanpa kode yang kuat untuk pengguna Squarespace pada paket Core, Plus, dan Advanced. Dengan jumlah trek tanpa batas, tata letak yang bisa disesuaikan, dan opsi pemutaran yang fleksibel, Anda bisa menciptakan lanskap suara yang sempurna dalam beberapa menit. Mulailah mengubah situs Squarespace Anda hari ini dengan kekuatan audio.
Sumber dirujuk: PR Newswire
