.jpeg "Cara Menambahkan Audio di Html")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cara Menambahkan Audio di HTML</title>
</head>
<body>
<h1>Contoh Audio di dalam Website</h1>
<audio controls>
<source src="Serana.mp3" type="audio/mpeg"></audio>
</body>
</html>Hasilnya seperti dibawah ini
Kamu bisa mengganti nama file audio yang akan dimainkan di dalam website. Contohnya saya menggunakan lagu Serana, dan jangan lupa juga untuk menuliskan ekstensi nya. Sekarang coba lihat codingan diatas, pada atribut src, saya langsung menuliskan judul lagunya. Mengapa seperti itu ? Karena saya menyimpan file index dan file audio nya di dalam satu folder.
Jika kamu ingin memisahkan folder khusus audio nya, kamu harus memahami terlebih dahulu tentang Path File dalam Html. Setelah itu jangan lupa menuliskan type dari lagu yang akan ditampilkan. Contoh diatas ekstensi lagunya adalah MP3, jadi di dalam value type diberikan nilai audio/mpeg.
Cara diatas mungkin bisa dilakukan jika kita membeli hosting, karena jika kita membeli hosting maka akan mendapatkan penyimpanan untuk file file kebutuhan website nya. Lalu bagaimana jika kita menggunakan CMS gratisan seperti Blogger dan WordPress ? Berikut ini adalah caranya
1. Menggunakan Github
Cara yang pertama adalah dengan menggunakan Github. Github merupakan sebuah website berbasis open source yang digunakan untuk mengelola project secara tim. Jika kamu ingin membuat project bersama teman teman mu, maka Github adalah pilihan terbaik. Selain itu, Github juga bisa dijadikan sebagai hosting website. Jika kamu ingin menghosting di Github, kamu bisa lihat tutorialnya disini. Sebelum memilih audio yang akan ditampilkan di website, pastikan kamu sudah mengupload audio ke github. Contohnya seperti dibawah ini
Jika sudah diupload ke github, tinggal salin URL dan tempel di dalam codingan nya. Contoh codingan nya seperti dibawah ini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cara Menambahkan Audio di HTML</title>
</head>
<body>
<h1>Contoh Audio di dalam Website</h1>
<audio controls>
<source src="https://github.com/Freeze-Gans/Freeze-Gans/blob/master/Serana.mp3" type="audio/mpeg"></audio>
</body>
</html>Hasilnya seperti dibawah ini
Mengapa audio diatas tidak bisa diputar ? Padahal URL github yang dimasukkan sesuai ? Jika kamu mengalami hal tersebut, tidak perlu panik karena saya sudah menemukan caranya. Caranya adalah mengubah path URL nya. Bagaimana maksudnya ? Coba kita perhatikan URL diatas adalah
https://github.com/Freeze-Gans/Freeze-Gans/blob/master/Serana.mp3Sekarang kita ubah menjadi
https://github.com/Freeze-Gans/Freeze-Gans/raw/master/Serana.mp3
Sekarang kita lihat hasilnya seperti dibawah ini
Mungkin masalah tersebut terlihat kecil karena hanya pada path nya. Namun di dalam bahasa pemrograman itu sangatlah berpengaruh. Sekarang kita akan membahas lebih dalam lagi mengenai Audio di Html
Format File Audio
Tidak semua jenis format file audio didukung oleh Audio Player Html. Berikut ini adalah daftar format file audio yang didukung oleh Audio Player Html.
| 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 |
Pada umumnya, format file yang paling banyak digunakan adalah MP3 dan MP4, karena MP3 dan MP4 relatif memiliki ukuran yang lebih kecil dibandingkan format FLAC yang memiliki ukuran file lebih besar. Setelah mengetahui jenis jenis format audio, sekarang kita akan membahas tentang attribut.
Attribut untuk Audio
Di dalam tag <audio> kita bisa menambahkan berbagai attribut. Berikut ini adalah attribut attribut yang sering ditambahkan dalam tag <audio>.
1. Autoplay
Attribut Autoplay berfungsi agar audio di dalam website diputar secara otomatis. Nilai yang dapat diberikan untuk attribut ini adalah True dan False. Fungsi nilai True berarti audio diatur agar dapat berputar secara otomatis. Sedangkan untuk nilai False berarti audio diatur agar audio tidak diputar secara otomatis. Berikut ini contoh codingan nya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cara Menambahkan Audio di HTML</title>
</head>
<body>
<h1>Contoh Audio di dalam Website</h1>
<audio autoplay>
<source src="https://github.com/Freeze-Gans/Freeze-Gans/raw/master/Serana.mp3" type="audio/mpeg"></audio>
</body>
</html>
<!-- atau -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cara Menambahkan Audio di HTML</title>
</head>
<body>
<h1>Contoh Audio di dalam Website</h1>
<audio autoplay="true">
<source src="https://github.com/Freeze-Gans/Freeze-Gans/raw/master/Serana.mp3" type="audio/mpeg"></audio>
</body>
</html>
Saat ini attribut autoplay mungkin saja tidak bekerja pada beberapa browser karena ada kebijakan baru mengenai pemutaran audio secara otomatis
2. Controls
Attribut Controls wajib digunakan ketika kita menambahkan audio di Html. Karena fungsi attribut Controls ini adalah untuk menambahkan tombol seperti Play, Pause, Volume, Download dan Kecepatan pemutaran audio. Berikut ini adalah contoh penulisan codingan nya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cara Menambahkan Audio di HTML</title>
</head>
<body>
<h1>Contoh Audio di dalam Website</h1>
<audio controls>
<source src="https://github.com/Freeze-Gans/Freeze-Gans/raw/master/Serana.mp3" type="audio/mpeg"></audio>
</body>
</html>
Hasilnya seperti dibawah ini
3. Muted
Attribut Muted berfungsi agar audio senyap atau audio tidak memiliki suara. Nilai yang dapat diberikan bersifat True dan False. Nilai True berarti audio tidak memiliki suara atau senyap. Sedangkan nilai False berarti audio memiliki suara. Berikut ini contoh codingan nya
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cara Menambahkan Audio di HTML</title>
</head>
<body>
<h1>Contoh Audio di dalam Website</h1>
<audio controls muted>
<source src="https://github.com/Freeze-Gans/Freeze-Gans/raw/master/Serana.mp3" type="audio/mpeg"></audio>
</body>
</html>
Hasilnya seperti dibawah ini
4. Loop
Attribut Loop berfungsi untuk memutar ulang audio yang sedang diputar. Nilai yang dapat diberikan bersifat True dan False. Nilai True berarti audio yang diputar saat ini dapat mengulang kembali. Sedangkan nilai False berarti audio yang diputar tidak akan diputar ulang lagi secara otomatis. Berikut ini contoh codingan nya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cara Menambahkan Audio di HTML</title>
</head>
<body>
<h1>Contoh Audio di dalam Website</h1>
<audio controls loop>
<source src="https://github.com/Freeze-Gans/Freeze-Gans/raw/master/Serana.mp3" type="audio/mpeg"></audio>
</body>
</html>
Hasilnya seperti dibawah ini
Bagaimana ? Mudah kan ? Jika kamu masih bingung, silahkan bertanya di kolom komentar. Sekian dan Terimakasih.