Mengatur Objek Suara HTML Menggunakan Audio Object DOM

Properti Audio object DOM digunakan untuk merepresentasikan elemen HTML <audio>. Object audio merupakan object baru pada HTML5.

Sebelum memahami lebih dalam materi tentang Mengatur Objek Suara HTML Menggunakan Audio Object DOM, terlebih dahulu pelajari materi tentang: Membersihkan Penyimpanan Lokal HTML Local Storage Clear DOM, Menghapus Item Penyimpanan HTML Menggunakan removeItem Storage DOM, dan Mengatur Penyimpanan Item HTML Menggunakan Storage setItem DOM.

Sintak:

• Untuk membuat elemen audio: var gfg = document.createElement("AUDIO")
• Untuk mengakses elemen audio: var x = document.getElementById("myAudio")

Property Values:

• audioTracks: digunakan untuk mengembalikan nilai object AudioTrackList yang merepresentasikan track audio yang tersedia.
• autoplay: digunakan untuk mengatur atau mengembalikan nilai audio apakah harus segera dimainkan atau tidak ketika audio tersebut sudah siap diputar.
• buffered: digunakan untuk mengembalikan sebuah object TimeRanges yang merepresentasikan bagian buffer dari audio.
• controller: digunakan untuk mengembalikan nilai object MediaController yang merepresentasikan kendali media saat ini dari audio.
• controls: digunakan untuk mengatur atau mengembalikan nilai apakah audio dapat menampilkan audio kontrol atau tidak seperti play, pause, dan lain sebagainya.
• crossOrigin: digunakan untuk mengatur atau mengembalikan nilai pengaturan CORS dari audio.
• currentSrc: digunakan untuk mengembalikan nilai URL dari audio saat ini.
• currentTime: digunakan untuk mengatur atau mengembalikan nilai posisi playback saat ini dari suatu audio dalam satuan detik.
• defaultMuted: digunakan untuk mengatur atau mengembalikan nilai audio apakah harus di-muted atau tidak secara default atau tidak.
• defaultPlaybackRate: digunakan untuk mengatur atau mengembalikan nilai field search dan bersifat read-only.
• duration: digunakan untuk mengembalikan nilai length dari audio dalam satuan detik.
• ended: digunakan untuk mengembalikan nilai playback saat ini dari audio apakah harus diakhiri segera atau tidak.
• error: digunakan untuk mengembalikan nilai object MediaError yang merepresentasikan pesan error state dari suatu audio.
• loop: digunakan untuk mengatur atau mengembalikan nilai dari suatu audio apakah audio tersebut harus dimainkain ulang atau tidak setiap kali audio tersebut selesai diputar.
• mediaGroup: digunakan untuk mengatur atau mengembalikan nilai nama dari grup media yang menjadi bagian dari kelompok audio.
• muted: digunakan untuk mengatur atau mengembalikan nilai audio apakah harus dimatikan atau tidak.
• networkState: digunakan untuk mengembalikan nilai network state saat ini dari suatu audio.
• paused: digunakan untuk mengatur atau mengembalikan nilai audio saat ini apakah harus di-pause atau tidak.
• playbackRate: digunakan untuk mengatur atau mengembalikan nilai kecepatan dari audio playback.
• played: digunakan untuk mengembalikan nilai object TimeRanges yang merepresentasikan bagian audio yang sedang diputar.
• preload: digunakan untuk mengatur atau mengembalikan nilai dari atribut preload dari suatu audio.
• readyState: digunakan untuk mengatur atau mengembalikan nilai state saat ini yang sudah siap dari suatu audio.
• seekable: digunakan untuk mengembalikan nilai object TimeRanges yang merepresentasikan bagian seekable dari suatu audio.
• seeking: digunakan untuk mengembalikan suatu nilai apakah nilai tersebut sedang dilakukan seeking oleh user saat ini atau tidak dari suatu audio.
• src: digunakan untuk mengatur atau mengembalikan nilai dari atribut src dari suatu audio.
• textTracks: digunakan untuk mengembalikan nilai object TextTrackList yang merepresentasikan track teks yang tersedia saat ini.
• volume: digunakan untuk mengatur atau mengembalikan nilai volume audio saat ini.

Baca Juga:

• Mengatur Objek Video HTML Menggunakan Video Object DOM
• Mengetahui Tipe Video pada HTML menggunakan canPlayType DOM
• Memutar Video HTML Menggunakan Load DOM
• Memainkan Video pada HTML Menggunakan Play VIDEO DOM

Audio Object Methods:

• addTextTrack(): digunakan untuk menambah teks track baru dari suatu audio.
• canPlayType(): digunakan untuk memeriksa apakah browser dapat melakukan play dari audio tipe tertentu atau tidak.
• fastSeek(): digunakan untuk melakukan seeking dari waktu spesifik pada audio player.
• getStartDate(): digunakan untuk mengembalikan object tanggal baru yang merepresentasikan nilai offset timeline saat ini.
• load(): digunakan untuk melakukan re-load audio dari suatu elemen.
• play(): digunakan untuk memulai memainkan suatu audio.
• pause(): digunakan untuk melakukan penghentian sementara dari audio yang sedang dimainkan saat ini.

Berikut adalah ilustrasi program dari Object Audio.

Contoh: membuat elemen <audio>.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Audio Object

</title>

 

<style>

h1 

{

color: green;

}

 

h2 

{

font-family: Impact;

}

 

body 

{

text-align: center;

}

</style>

 

</head>

 

<body>

 

<h1>

Blog Elfan

</h1>

 

<h2>

Audio Object

</h2>

 

<p>

Lakukan double klik pada 

tombol "Create" untuk membuat 

Audio Object.

</p>

 

<button 

ondblclick="Create()">

Create

</button>

 

<script>

function Create() 

{

// Ciptakan elemen audio.

var m = document.createElement(

"AUDIO");

 

if (m.canPlayType("audio/mpeg")) 

{

m.setAttribute("src", "bells.mp3");

} 

 

else 

{

m.setAttribute("src", "bells.ogg");

}

 

m.setAttribute("controls", "controls");

 

document.body.appendChild(m);

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Audio Object

Lakukan double klik pada tombol "Create" untuk membuat Audio Object.

Contoh: mengakses elemen <audio>.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Audio Object

</title>

 

<style>

h1 

{

color: green;

}

 

h2 

{

font-family: Impact;

}

 

body 

{

text-align: center;

}

</style>

 

</head>

 

<body>

 

<h1>

Blog Elfan

</h1>

 

<h2>

Audio Object

</h2>

 

<audio 

id="track" 

controls>

 

<source 

src="bells.ogg" 

type="audio/ogg">

 

<source 

src="bells.mp3" 

type="audio/mpeg">

Browser tidak mendukung 

penggunaan elemen audio.

</audio>

 

<p>

Lakukan double klik pada 

tombol "Access Audio" untuk 

mendapatkan nilai durasi dari 

audio dalam satuan detik.

</p>

 

<button 

onclick="access()">

Access Audio

</button>

 

<p id="test"></p>

 

<script>

function access() 

{

// Mengakses durasi elemen 

// audio.

var m = document.getElementById(

"track").duration;

 

document.getElementById("test").innerHTML = m;

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Audio Object

Lakukan double klik pada tombol "Access Audio" untuk mendapatkan nilai durasi dari audio dalam satuan detik.

Referensi Tambahan:

• Menghentikan Video HTML Menggunakan Pause VIDEO DOM
• Membaca Track Audio HTML Menggunakan audioTracks DOM
• Memutar Audio Otomatis pada HTML Menggunakan Autoplay DOM
• Mendapatkan Waktu Jeda HTML Menggunakan Buffered Audio DOM
• Mengatur Suara HTML Menggunakan Audio Kontrol DOM
• Mendapatkan URL Audio HTML Menggunakan currentSrc DOM
• Mengatur Waktu Audio Saat Ini pada HTML Menggunakan currentTime DOM

Artikel ini didedikasikan kepada: Ridwan Taufiiqulhakim Wijoseno, Riko Akbar Khoirulhakim, Rimmatul Khasanah, Risma Aulia Atiqa, dan Rizaldy Arji Pangestu.

Location: Kota Semarang, Jawa Tengah, Indonesia

Berbagi :