Add Audio Player Html

MUAZHAN

4 min read

·

Jun 27, 2024

21

Share

Menambahkan Audio Player ke Website Anda dengan HTML

Memasukkan audio ke website Anda bisa dilakukan dengan mudah menggunakan HTML. Berikut langkah-langkahnya:

1. Menggunakan tag <audio>

Tag <audio> adalah elemen HTML yang dirancang khusus untuk memutar audio. Anda dapat menambahkannya ke halaman web Anda seperti berikut:

Penjelasan kode:

• <audio controls>: Tag ini mendefinisikan elemen audio, dan atribut controls menambahkan tombol kontrol pemutar seperti tombol play, pause, volume, dll.
• <source src="audio.mp3" type="audio/mpeg">: Tag ini menentukan sumber audio. Atribut src menunjuk ke lokasi file audio, dan atribut type menentukan format file audio. Dalam contoh ini, file audio bernama "audio.mp3" dan formatnya adalah MP3.
• "Your browser does not support the audio element.": Teks ini akan ditampilkan jika browser pengguna tidak mendukung elemen <audio>.

2. Menambahkan Atribut Lainnya

Selain atribut controls, tag <audio> juga memiliki beberapa atribut lainnya yang dapat digunakan untuk mengontrol pemutaran audio:

• autoplay: Memulai pemutaran audio secara otomatis saat halaman dimuat.
• loop: Mengulang pemutaran audio secara terus-menerus.
• preload: Menentukan kapan browser harus memuat file audio. Opsi yang tersedia adalah:
  • none: Browser tidak memuat audio sebelum pengguna memulai pemutaran.
  • metadata: Browser hanya memuat metadata file audio (seperti durasi dan judul).
  • auto: Browser memuat seluruh file audio.
• muted: Memulai pemutaran audio dalam keadaan bisu.

3. Menambahkan Style (Optional)

Anda dapat menggunakan CSS untuk mengontrol tampilan audio player. Misalnya, Anda dapat mengubah ukuran, warna, dan posisi tombol kontrol.

Contoh Kode Lengkap:

Catatan: Pastikan file audio yang Anda gunakan disimpan di folder yang sama dengan file HTML Anda, atau masukkan path yang benar ke lokasi file audio.

Kesimpulan

Dengan menggunakan tag <audio>, Anda dapat dengan mudah menambahkan pemutar audio ke website Anda. Anda dapat menyesuaikan pemutaran dan tampilan audio player menggunakan berbagai atribut dan CSS. Selamat bereksperimen!