Cara Memasukkan Musik dengan HTML dan CSS

Untuk memasukkan musik ke dalam website anda menggunakan HTML dan CSS,kita perlu menambahkan tag <audio>.Berikut adalah caranya :


  • Simpan file lagu/musik anda di dalam satu folder dengan file HTML dan CSS anda.
  • Ketikkan script berikut:

KODE HTML :

<audio controls autoplay class="hidden" loop="true">
        <source src="judul lagu anda.mp3" type="audio/mpeg">
</audio>

KODE CSS : .hidden { visibility: hidden;}

PENJELASAN :
  • <audio controls autoplay> artinya kita mengatur agar musik terputar secara otomatis ketika user masuk ke halaman web kita.
  • class="hidden" artinya kita memanggil file css kita (keterangan file CSS ada di bawah)
  • loop="true" artinya kita mengatur agar musik terputar secara repeat(terus-menerus)
  • <source src="judul lagu anda.mp3"> artinya kita memilih lagu yang kita inginkan.Perlu diingat bahwa judul lagu harus sesuai dengan nama lagu yang ada di folder anda.
  • type="audio/mpeg" artinya kita memberi tahu bahwa file yang kita masukkan adalah file jenis audio/mpeg.
  • Dan Kode CSS nya adalah :  script ini untuk menyembunyikan playlist di web anda sehingga tidak terlihat oleh pengguna dan tidak mengganggu halaman website anda.
Sekian pembahasan mengenai cara memasukkan musik ke dalam website dengan menggunakan HTML dan CSS.Semoga bermanfaat,terima kasih !

Comments

  1. makasih mas dah berbagi, sangat membantu

    ReplyDelete
  2. Saya mau masukin musik di blog tapi masih bingung ,,,akhirnya nemu artikel ini makasih ka pencerahannya..
    Kunjungi website kampus saya ya http://www.atmaluhur.ac.id
    Dan web blog saya https://astutiernawati.mahasiswa.atmaluhur.ac.id/

    ReplyDelete
  3. Hi kak trimakasih atas artikelnya tadinya saya ingin memasukan lagu dihtml tapi saya masih bingung karena saya masih pemula Menggunakan html artikel ini sangat berguna bagi saya oh iya kak perkenalkan saya Meilita Sari . Kunjungi website kampus saya https://www.atmaluhur.ac.id

    ReplyDelete
  4. kak aku sudah coba tapi ga musik yang keluar kak gimana ya kak penempatan file nya sudah tetapi tetap tidzk keluar musik kak

    ReplyDelete
    Replies
    1. Kalau bisa bukanya dari Mozilla Firefox,jangan dri google chrome

      Delete

Post a Comment