HTML audio tag

HTML elemen <audio> adalah tag yang digunakan untuk menyematkan file audio seperti (.mp3, .ogg, .wav) yang dikodekan sebagai Ogg Vorbis ke dalam halaman website. untuk URL file audio diberikan dalam atribut src elemen audio. Gaya dan perilaku elemen akan menjadi default yang ditentukan dalam spesifikasi HTML5 dan diimplementasikan oleh browser.

1. html tag <audio> putar audio mp3 dengan (controls)

Memakai atribut controls maka komponen audio secara default akan menampilkan beberapa opsi kontrol seprti Play, Pause, Mute, Percepat, Download

<!DOCTYPE html>
<html>
<body>
<h3 style="font-size:20px; font-family:monospace;">Contoh Putar Audio .Mp3 Di Html</h3><hr>
  <!--Begin audio-->
    <audio controls>
     <source src="https://cicagak.my.id/media-posts/audio/music/flamenco-meets-classical-252486.mp3" type="audio/mp3">
     Your browser does not support the audio element.
    </audio>
  <!--End audio-->
<br>
Music by <a href="https://pixabay.com/id/users/nickpanek620-38266323/?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=252486">Nicholas Panek</a> from <a href="https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=252486">Pixabay</a>
<p style="font-family:monospace;">Apabila audio diatas tidak bisa di putar silahkan download filenya langsung. Pilih Menu Tab [HTML] &gt;&gt; Download. Lalu buka dengan browser play selesai.</p>
<p style="font-family:monospace;">Pastikan koneksi internet anda lancar dengan baik</p>
</body>
</html>

Cicagak Berbagi

2. html tag <audio> putar otomatis (controls autoplay)

KET: dengan menambahkan autoplay setelah contrrols maka audio akan diputar secara otomatis

<h3 style="font-size:20px; font-family:monospace;">Contoh Putar Audio Secara Otomatis</h3>

<audio controls autoplay>
  <source src="https://cicagak.my.id/media-posts/audio/audio-ayam.mp3" type="audio/mp3">
  Your browser does not support the audio element.
</audio>

Cicagak Berbagi

3. html tag <audio> putar berulang (controls loop)

KET: dengan menambahkan loop setelah contrrols maka audio akan diputar berulang setelah pemutaran berakhir

<h3 style="font-size:20px; font-family:monospace;">Contoh Putar Audio Berulang</h3>

<audio controls loop>
  <source src="https://cicagak.my.id/media-posts/audio/audio-ayam.mp3" type="audio/mp3">
  Your browser does not support the audio element.
</audio>

Cicagak Berbagi

4. html tag <audio> putar di latar belakang (controls autoplay hidden)

KET: dengan menambahkan autoplay hidden setelah contrrols maka audio akan diputar secara otomatis di latar belakang background

<h3 style="font-size:20px; font-family:monospace;">Contoh Putar Audio di latar belakang background, tidak menampilkan kontrol audio namun tetap berjalan </h3>

<audio controls autoplay hidden>
  <source src="https://cicagak.my.id/media-posts/audio/audio-ayam.mp3" type="audio/mp3">
  Your browser does not support the audio element.
</audio>

Cicagak Berbagi

5. html tag <audio> Memuat audio dengan javascript

KET: Fungsi menghubungan audio ke javascript untuk mempermudah pilihan pemutaran dari daftar lokasi url file audio1, audio2, dan audio seterusnya, yang sudah di definisiakan di atur nilainya dalam javascript

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Putar Audio JS</title>
<style>
.judul1 {font-family:monospace;}
button {
	border: 1px solid transparent;
	background-color: tomato;
	border-radius:4px;
	color:white;
	padding: 10px;
	font-size: 16px;
	font-family:monospace;}
button:hover {background:green;}
.span1 {padding: 10px; font-size: 18px;font-family:monospace;}
div {font-family:monospace; bottom:10px; position:absolute;}
div a {text-decoration:none;}
</style>
</head>
<body>
  <h2 class="judul1">Memutar Audio Dengan JavaScript </h2>
	<!--Begin audio-->
	<audio id="myAudio" controls autoplay>
     <source src="#" type="audio/mp3">
     Your browser does not support the audio element.
	</audio>
	<!--end audio-->
	<span class="span1" id="audioName">...</span><br><br>
	<!-- List Audio -->
	<button onclick="playAudio1();">Audio 1</button>
	<button onclick="playAudio2();">Audio 2</button>
	<button onclick="playAudio3();">Audio 3</button>
	<!-- Link Music -->
	<div>
		Music by <a href="https://pixabay.com/id/users/nickpanek620-38266323/?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=252486">Nicholas Panek</a> from <a href="https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=252486">Pixabay</a><br>
		Sound Effect by <a href="https://pixabay.com/id/users/sweetbeats808s-34953295/?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=248487">ido berg</a> from <a href="https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=248487">Pixabay</a><br>
		Sound Effect by <a href="https://pixabay.com/id/users/freesound_community-46691455/?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=6211">freesound_community</a> from <a href="https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=6211">Pixabay</a>	
	</div>
<!-- audio script -->
<script>
function playAudio1(){
var url1 = "https://cicagak.my.id/media-posts/audio/music/flamenco-meets-classical-252486.mp3"
document.getElementById("myAudio").src = url1,
document.getElementById("audioName").innerText = "Audio 1: Nicholas Panek" 
}
function playAudio2(){
var url2 = "https://cicagak.my.id/media-posts/audio/music/relaxing-guitar-loop-v6-248487.mp3"
document.getElementById("myAudio").src = url2,
document.getElementById("audioName").innerText = "Audio 2: ido berg" 
}
function playAudio3(){
var url3 = "https://cicagak.my.id/media-posts/audio/music/rock-music-6211.mp3"
document.getElementById("myAudio").src = url3,
document.getElementById("audioName").innerText = "Audio 3: freesound_community" 
}
</script>  
</body>
</html>

Cicagak Berbagi