Cara Gampang Menambahkan Lagu Nyala Otomatis di Website

Cara Gampang Menambahkan Lagu Nyala Otomatis di Website

Pernah kepikiran nggak sih, pengen bikin website kamu ada musik latarnya biar makin asik dan berkesan? Tenang, caranya gampang kok. Lu cuma butuh satu baris kode HTML aja!

Di sini aku bakal kasih kamu cara menambahkan lagu yang langsung nyala (autoplay) dan nggak kelihatan (hidden) pas orang buka websitemu atau halaman webmu.

Lu bisa langsung liat demo-nya di halaman gue yang ini: https://www.yoredaze.com/p/about.html

Langkah-langkah Pemasangan

  1. Pertama, kamu butuh link langsung ke file lagu yang mau dipasang. Misalnya ini: https://is3.cloudhost.id/yoredaze/Time Flows Ever Onward.mp3

    Kalau kamu belum punya, bisa cari lagu bebas copyright dulu ya~ Yang penting, link-nya langsung ke file mp3 atau .ogg

  2. Nah, sekarang tinggal tempelin kode ini dihalaman web yang kamu mau pake lagu:
    <audio src="https://is3.cloudhost.id/yoredaze/Time Flows Ever Onward.mp3" autoplay hidden></audio>
    Ganti https://is3.cloudhost.id/yoredaze/Time Flows Ever Onward.mp3 dengan url lagu yang kalian inginkan.
    autoplay = lagunya langsung muter begitu halaman dibuka.
    hidden = player-nya disembunyiin, jadi nggak ganggu tampilan.
  3. Save

Biar Lagunya Muter Terus (Looping)

Kalau kamu pengen lagunya diputer terus tanpa henti, tinggal tambahin loop:

<audio src="https://is3.cloudhost.id/yoredaze/Time Flows Ever Onward.mp3" autoplay hidden loop</audio>
Tinggal tambahin satu kata aja, beres!

Sedikit Catatan

Beberapa browser (kayak Chrome atau Safari) kadang nggak langsung muter lagu otomatis, apalagi kalau user belum klik apa-apa. Ini karena aturan dari browser biar nggak ganggu pengunjung.

Solusinya: Kamu bisa bikin tombol “Klik untuk mulai” kalau mau lebih aman dan tetap nyala musiknya.

Posting Komentar
Cara Gampang Menambahkan Lagu Nyala Otomatis di Website
Cara Gampang Menambahkan Lagu Nyala Otomatis di Website
Pernah kepikiran nggak sih, pengen bikin website kamu ada musik latarnya biar makin asik dan berkesan? Tenang, caranya gampang kok. Lu cuma butuh satu
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • X (Twitter)
  • Pinterest
  • LinkedIn

Artikel Terkait

Posting Komentar

  • Menulis teks khusus gunakan <i>teks</i> (contoh <i>halo</i>)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.