Lompat ke konten Lompat ke sidebar Lompat ke footer

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.

27 Value Properti Audio Object DOM pada HTML
Properti Audio Object DOM

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 [klik], Menghapus Item Penyimpanan HTML Menggunakan removeItem Storage DOM [klik], dan Mengatur Penyimpanan Item HTML Menggunakan Storage setItem DOM [klik].

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:

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.


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

5 komentar untuk "Mengatur Objek Suara HTML Menggunakan Audio Object DOM"

  1. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti audio object DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan audio object DOM pada HTML:
      1. Google Chrome
      2. Internet Explorer
      3. Firefox
      4. Opera
      5. Apple Safari

      Hapus
  2. Apa yang dimaksud engan audio object pada HTML?

    BalasHapus
    Balasan
    1. Properti audio object pada html merupakan properti yang digunakan untuk mewakili nilai dari elemen AUDIO HTML.

      Hapus
    2. Konstruktor audio dapat digunakan untuk membuat atau mengembalikan nilai HTMLAudioElement baru yang dapat dilampirkan ke dokumen untuk berinteraksi dan atau untuk mendengarkan pengguna, atau juga dapat digunakan untuk layar luar pada proses pengelolaan atau pemutaran file audio tertentu melalui browser.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -