Cara memasukan lagu ke html melalui notepad facebook

Question

#HTML

Sekali lagi..

Table of Contents Show

Cara Menambahkan Audio di HTML
Format File Audio yang didukung
Atribut untuk Audio
1. controls
2. autoplay
Audio Sebagai Background
Apa Selanjutnya?
Bagaimana cara memasukkan audio di HTML?
Apa elemen HTML yang digunakan untuk memainkan file audio?
HTML elemen apa yang tepat untuk membuat tautan atau link?
Apa elemen HTML yang benar untuk memutar file video?

Konten dalam web, tidak hanya dalam bentuk teks dan gambar saja. Tapi juga bisa dalam bentuk multimedia seperti audio dan video.

Pada tutorial ini, kita akan fokus membahas tentang audio di HTML.

Konten audio biasanya berbentuk podcast, audiobook, dan musik.

Lalu pertanyaanya:

Bagaimana cara menambahkan audio di HTML?

Mari kita bahas…

Cara Menambahkan Audio di HTML

Sebelum adanya HTML 5, audio di HTML ditambahkan dengan program eksternal seperti flash player.

Namun, kini HTML sudah punya tag sendiri yakni <audio>.

Tag <audio> adalah tag untuk membuat audio player. Lalu kita bisa memberikan file audio yang akan diputar dengan tag <source>.

Contoh: 📄 contoh-audio.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contoh Audio di HTML</title>
</head>
<body>
  <h2>Contoh Audio di Web</h2>
  <audio controls>
    <source src="Ngoni.mp3" type="audio/mpeg">
    Browsermu tidak mendukung tag audio, upgrade donk!
  </audio>
</body>
</html>

File audionya bisa kamu download di: 🎵 Ngoni.mp3 (6.2 MB)

Hasilnya:

Perhatikan!

Pada atribut src, kita menulis langsung nama file audio yang akan diputar. Ini karena kita menaruh file tersebut dalam satu folder yang sama dengan file HTML.

Jika file audio tersimpan di folder yang berbeda, maka harus ditulis alamat path menuju folder tersebut.

Misalkan, saya menaruhnya di dalam folder 📁 audio,

maka atribut src bisa diisi seperti ini:

<audio controls>
    <source src="audio/Ngoni.mp3" type="audio/mpeg">
    Browsermu tidak mendukung tag audio, upgrade donk!
</audio>

…dan jiga file audionya tersimpan di website yang berbeda, maka kita harus mengisinya dengan alamat URL.

<audio controls>
    <source src="https://github.com/petanikode/belajar-html/raw/master/audio/Ngoni.mp3" type="audio/mpeg">
    Browsermu tidak mendukung tag audio, upgrade donk!
</audio>

Format File Audio yang didukung

Audio player di HTML tidak mendukung semua jenis format file audio. Berikut ini daftar format file audio yang bisa diputar di HTML. 1

Format	Container	MIME type
PCM	WAV	audio/wav
MP3	MP3	audio/mpeg
AAC	MP4	audio/mp4
AAC	AAC	audio/aac
AAC	AAC	audio/aacp
Vorbis	Ogg	audio/ogg
Vorbis	WebM	audio/webm
Opus	Ogg	audio/ogg
Opus	WebM	audio/webm
FLAC	FLAC	audio/flac
FLAC	Ogg	audio/ogg

Format file yang biasanya digunakan adalah MP3 dan MP4 (M4A), karena ukuran filenya relatif kecil. Sementara format FLAC adalah format file audio dengan kualitas tinggi dan ukuran filenya relatif lebih besar.

Atribut untuk Audio

Tag <audio> punya beberapa atribut yang sering digunakan:

1. controls

Atribut ini berfungsi untuk mengaktifkan tombol kontrol seperti tombol play, pause, stop, scroll, dan volume).

Contoh penggunaan:

<audio controls="true">
    <source src="audio/Ngoni.mp3" type="audio/mpeg">
    Browsermu tidak mendukung tag audio, upgrade donk!
</audio>

<!-- atau -->

<audio controls>
    <source src="audio/Ngoni.mp3" type="audio/mpeg">
    Browsermu tidak mendukung tag audio, upgrade donk!
</audio>

Jika bernilai true, maka nilainya boleh tidak diisi. Nilai true artinya, kita akan mengaktifkan tombol kontrol dan jika nilainya false maka artinya tombol kontrol tidak diaktifkan.

2. autoplay

Atribut ini berfungsi untuk memutar audio secara otomatis. Nilai yang bisa diberikan pada atribut ini adalah true dan false.

Nilai true artinya kita akan memutar audio secara otomatis, dan false artinya audio tidak akan diputar secara otomatis.

Contoh:

<audio autoplay="true">
    <source src="audio/Ngoni.mp3" type="audio/mpeg">
    Browsermu tidak mendukung tag audio, upgrade donk!
</audio>

<!-- atau -->

<audio autoplay>
    <source src="audio/Ngoni.mp3" type="audio/mpeg">
    Browsermu tidak mendukung tag audio, upgrade donk!
</audio>

✍️ Catatan: Atribut ini mungkin saja tidak akan bekerja pada Google Chrome, karena ada perubahan policy (kebijakan) dalam memutar audio secara otomatis.

3. `loop`

Atribut loop berfungsi untuk mengulang-ulang pemutaran audio. Ini seperti repeat one. Nilai yang bisa diberikan adalah true dan false.

Contoh:

<audio loop="true">
    <source src="audio/Ngoni.mp3" type="audio/mpeg">
    Browsermu tidak mendukung tag audio, upgrade donk!
</audio>

<!-- atau -->

<audio loop>
    <source src="audio/Ngoni.mp3" type="audio/mpeg">
    Browsermu tidak mendukung tag audio, upgrade donk!
</audio>

4. `muted`

Atribut ini berfungsi untuk mensenyapkan audio. Nilai yang bisa diberikan adalah true dan false.

Contoh:

<audio muted="true">
    <source src="audio/Ngoni.mp3" type="audio/mpeg">
    Browsermu tidak mendukung tag audio, upgrade donk!
</audio>

<!-- atau -->

<audio muted>
    <source src="audio/Ngoni.mp3" type="audio/mpeg">
    Browsermu tidak mendukung tag audio, upgrade donk!
</audio>

Audio Sebagai Background

Audio kadang sering digunakan sebagai background. Biasanya menggunakan musik.

Tujuan menambahkan background agar menambah kesan tertentu pada web. Misalkan, ingin membuat pengunjung merasa santai.. maka kita bisa memutar audio musik yang santai.

Cara membuat musk sebagai background adalah dengan menambahkan atribut autoplay, loop, dan menghilangkan kontrol (hidden).

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contoh audio sebagai background</title>
</head>
<body>
  <h2>Contoh audio sebagai background</h2>
  <audio hidden autoplay loop>
    <source src="Ngoni.mp3" type="audio/mpeg">
    Browsermu tidak mendukung tag audio
  </audio>
</body>
</html>

Hasilnya:

Nggak ada suaranya?

Sekali lagi, atribut autoplay mungkin tidak bekerja di Google Chrome karena ada pembaharuan kebijakan dalam memutar audio.

Sekarang kita coba buka dengan Mozilla Firefox.

Hasilnya sama saja, tidak ada suaranya.

Ini karena autoplay diblokir otomatis.

Sekarang kita coba ubah izin untuk memutar audio secara otomatis. Klik ikon autoplay pada address bar di dekat ikon (i), sehingga muncul seperti ini:

Pada bagian Autoplay, ubah Block Audio menjadi Allow Audio and Video.

Setelah itu, coba refresh atau reload.

Maka suaranya akan terdengar.

Apa Selanjutnya?

Sejauh ini kita sudah belajar banyak tag. Sudah saatnya untuk belajar membuat web kecil-kecilan dengan ilmu HTML yang kita pelajari.

Karena itu, selanjutnya kita akan belajar:

Belajar HTML #15: Membuat Project Web Pribadi dengan HTML

📖 lihat juga tutorial lainnya di List Tutorial HTML

Bagaimana cara memasukkan audio di HTML?

Cara Menambahkan Audio di HTML Tag <audio> adalah tag untuk membuat audio player. Lalu kita bisa memberikan file audio yang akan diputar dengan tag <source> . Perhatikan! Pada atribut src , kita menulis langsung nama file audio yang akan diputar.