10. Tutorial HTML MEMASANG AUDIO PADA HALAMAN HTML LENGKAP - Tutorial Programming & Digital Marketing

STAY HUNGRY STAY FOOLISH

Breaking

Home Top Ad

Tuesday, May 24, 2016

10. Tutorial HTML MEMASANG AUDIO PADA HALAMAN HTML LENGKAP

 
Update 13 Desember 2021
Hallo semuanya, untuk teman - teman yang mau melihat tutorial cara memasang background music untuk website wedding bisa lihat dibawah ini yaa. om bewok sudah membuatkan tutorialnya dengan jelas dibawah ini hehe Selamat mencoba 

Hai semuaaa, karena pembahasan mengenai form sudah selesai, kali ini kita akan bahas bagaimana cara menempatkan audio pada halaman HTML.
Supaya halaman website kamu ada irama musiknya jadi bisa joget - joget gitu deh, kamu bisa menambahkan audio pada halaman web dengan menggunakan tag audio <audio></audio> .

Agar audio bisa terpasang di halaman HTML kita membutuhkan atribut "src" untuk mencari file audio yang dipasang. Cara penulisannya seperti ini:
<audio src="musik.mp3"> </audio>
Penulisan nya seperti biasa ya di dalam <body></body>

Naaah, supaya kita dapat memutar dan melakukan kontrol terhadap audio yang kita pasang kita gunakan atribut "controls" yang berfungsi untuk menampilkan tombol-tombol kontrol audio seperti: tombol play/stop, slider, volume,timer, dan lainnya. Jika atribut ini tidak ditulis, maka tombol-tombol kontrol tidak akan muncul.
Cara penulisannya seperti ini:
<audio src="musik.mp3" controls> </audio>

Tapi, jika kamu ingin audio otomatis memutar saat halaman dibuka, anda bisa menggunakan atribut "autoplay". Dengan menggunakan atribut ini audio yang terpasang pada halaman web akan secara otomatis memutar audio tanpa mengklik tombol play.

Cara penulisannya seperti ini:
<audio src="musik.mp3" controls autoplay> </audio>

Sebaiknya tetap menggunakan atribut controls meskipun sudah menggunakan atribut autoplay, karena jika tidak menggunakan atribut controls, audio tidak dapat dimatikan, kecuali halaman ditutup.

Baca Juga : Cara Membuat Background Music Untuk Website Wedding
Agar audio yang diputar dapat memutar ulang secara otomatis kita bisa menggunakan atribut "loop"
Cara penulisannya seperti ini:
<audio src="lagu.mp3" controls loop> </audio>

Saat kamu sedang tidak ingin mendengarkan audio, anda bisa mengatur volume ke nol, tapi tag audio juga menyediakan atribut "muted" agar audio tidak terdengar namun tetap berjalan.
Cara penulisannnya seperti ini:
<audio src="lagu.mp3" controls autoplay muted> </audio>

Selain itu, tag <audio> juga menyediakan atribut "preload" yang fungsinya memrintahkan browser agar mendowload sebagian kecil file audio agar bisa diputar secara terus menerus(seperti buffering lah). Nah, atribut preload ini terdapat tiga type, yaitu auto, meta, dan none.
seperti ini penulisannnya:
<audio src="musik.mp3" controls preload="meta"> </audio>
auto akan secara otomatis mendownload seluruh file saat halaman dibuka, untuk menghemat bandwidth tidak disarankan menggunakan preload ini.
meta akan mendownload sebagian kecil file, cukup untuk mengetahui ukuran file, dan memutuskan apakah audio mau diputar atau tidak.
none tidak akan mendownload file jika tombol play belum di klik.
penggunaan atribut preload ini hanya saran untuk web browser, jika tidak ditulis juga tidak berpengaruh.
Baca Juga : Cara Membuat Background Music Untuk Website Wedding

Berikut contoh penggunaan tag <audio>
Pastikan anda telah menempatkan file audio yang inginn dipasang berada dalam folder yang sama dengan file html yang anda buat. dibawah ini saya menggunakan file jrocks-Ceria.mp3.

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Belajar memasang audio di HTML</title>
</head>
<body>
<h1>Memasang audio di halaman web</h1>
<audio src="jrocks-Ceria.mp3" controls autoplay muted ></audio>
</body>
</html>
seperti ini hasilnya:

Karena kita memasang atribut muted, jadi saat halaman terbuka tidak akan muncul suara. Jika kita menginginkannya kita klik aja tanda speakernya.

Ok sekian dulu pembahasan kali ini, selanjutnya kita akan membahas cara memasukkan video pada halaman web.
Tetap semangat yaaaa apalagi bagi yang kerja nya lembur terus#HMMM

12 comments:

  1. gan cara neymbunyiin tombol playnya gimane?

    ReplyDelete
  2. mohon bantuannya saya sudah jalankan sesuai tutorial autoplay akan tetapi tetap saja tidak bisa terputar automatis... perlu di klik dulu tanda play baru bisa bunyi audionya,, kira kira salahnya dimana ya

    ReplyDelete
  3. Terimakasih kak atas ilmunya sangat bermanfaat dalam mengerjakan tugas saya, sukses terus dalam berkarya, tetap semangat dalam membagi ilmunya kak, perkenal kan nim saya 1922500129, nama saya gusti dinda permata dari kelompok SI2J, link website saya https;//www.atmaluhur.ac.id . terimakasih kak

    ReplyDelete
  4. thanks min untuk artikelnya dan ilmunya dari membaca artikel ini saya lebih mengenal bagaimana cara memasukan gambar,audio,dan vidio di html multimedia.semoga blog ini ke depannya dapat lebih memberikan artikel yg bermanfaat untuk kami yg baru belajar pemrograman web. Always success :)
    perkenalkan nama saya Rachma Dini kunjungi website kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  5. thanks min untuk artikelnya dan ilmunya dari membaca artikel ini saya lebih mengenal bagaimana cara memasukan gambar,audio,dan vidio di html multimedia.semoga blog ini ke depannya dapat lebih memberikan artikel yg bermanfaat untuk kami yg baru belajar pemrograman web. Always success :)
    perkenalkan nama saya Rachma Dini kunjungi website kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  6. Terimakasih atas tutorial nya kak . Sngat membantu, sangt detail. Semoga Ilmunyaa brmanfaat ya kak.
    Nim : 1922500210
    Nama : Dian Oktavina
    Kelas : SI2J
    Https://www.atmaluhur.ac.id

    ReplyDelete
  7. Coba Pakai Cara Ini Mas

    https://pastebin.com/dl/TPVMDsUi

    ReplyDelete
  8. kalau supaya lagunya ngga berhenti atau keganti saat mindahin halaman bisa nggaa?

    ReplyDelete
  9. gimana cara masukin lagu yang ingin kita putar ke dalam src nya ?

    ReplyDelete
  10. Terimakasih kak artikel yang kakak buat ini sangat bermanfaat bagi saya seorang mahasiswa, sebelum saya belajar di kelas tentang html, saya membaca artikel ini terlebih dahulu agar pemahaman saya tentang html bisa bertambah, saya mahasiswa dari isb atmaluhur, saya fira karunia 1722500127 , kunjungi juga kak website kampus saya untuk bertukar informasi : https://www.atmaluhur.ac.id , selalu semangat berkarya kak

    ReplyDelete