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.

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.

Contoh: Membuat elemen <audio>. Berikut adalah ilustrasi program dari Object 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.

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

Mengatur objek suara dalam halaman web adalah salah satu elemen penting dalam pengembangan multimedia yang memungkinkan penggunanya menikmati pengalaman yang lebih interaktif dan menarik. Dalam konteks pengembangan halaman web, suara dapat digunakan untuk memberikan informasi tambahan, efek suara, atau bahkan sebagai elemen utama dalam aplikasi berbasis audio. Untuk mengatur dan mengontrol suara dalam sebuah halaman web, salah satu cara yang paling efektif adalah dengan menggunakan objek suara yang terdapat dalam objek pemrograman dokumen objek model atau yang lebih dikenal dengan istilah objek audio. 

Objek audio dalam dokumen objek model merupakan salah satu metode yang disediakan oleh pengembangan teknologi web untuk mengatur pemutaran suara di halaman web. Dengan menggunakan objek ini, berbagai fungsi yang terkait dengan pengolahan suara seperti pemutaran, pengaturan volume, kontrol pemutaran mundur, atau bahkan pemutaran suara secara berulang dapat dilakukan dengan mudah. Objek audio ini sangat berguna untuk memberikan kontrol lebih lanjut terhadap suara dalam halaman web tanpa harus bergantung pada elemen yang terbatas.

Untuk memulai dengan objek audio, pertama-tama perlu dipahami bahwa objek ini memberikan kemampuan untuk memanipulasi berbagai aspek suara, mulai dari memulai hingga menghentikan suara, mengubah tingkat volume, hingga mengontrol waktu pemutaran suara. Objek audio sendiri bekerja dengan mengacu pada file suara eksternal, yang bisa berupa berbagai jenis format file, mulai dari format yang sederhana hingga yang lebih kompleks. Sebagian besar format suara yang digunakan dalam halaman web dapat didukung oleh objek audio ini.

Salah satu keunggulan menggunakan objek audio adalah kemampuannya dalam menyediakan kontrol penuh terhadap pemutaran suara. Salah satunya adalah kemampuan untuk memulai atau menghentikan suara kapan saja tanpa perlu mengubah struktur halaman web. Objek audio dapat dimanfaatkan untuk memulai pemutaran suara begitu pengguna berinteraksi dengan halaman atau melakukan suatu tindakan tertentu. Selain itu, objek ini juga memungkinkan pengaturan volume suara, yang memberi keleluasaan dalam mengatur tingkat suara sesuai dengan kebutuhan tampilan dan kenyamanan pengguna.

Selain itu, objek ini memungkinkan pengontrolan waktu pemutaran suara. Pengguna dapat menentukan waktu tertentu untuk memulai atau menghentikan suara, memberikan pengalaman yang lebih terstruktur dalam hal pengaturan suara. Kemampuan untuk memutar suara secara berulang juga dimungkinkan. Dalam hal ini, objek audio memudahkan dalam menyetel suara agar dapat diputar kembali setelah selesai, sesuai dengan pengaturan yang telah ditentukan.

Fitur lain yang sangat bermanfaat adalah kemampuan objek ini untuk mendukung interaksi secara langsung dengan elemen lain dalam halaman web. Hal ini memungkinkan pengaturan suara yang terintegrasi dengan berbagai jenis elemen seperti tombol, gambar, atau elemen interaktif lainnya. Dengan demikian, pengalaman pengguna menjadi lebih dinamis dan menarik, karena suara dapat diintegrasikan secara langsung dengan pengoperasian halaman. Sebagai contoh, suara dapat diputar ketika tombol tertentu ditekan atau ketika elemen interaktif lainnya diaktifkan.

Objek audio juga dilengkapi dengan berbagai metode untuk memanipulasi atau mengontrol suara, seperti mengatur kecepatan pemutaran suara atau menyesuaikan kualitas suara yang diputar. Penggunaan objek ini dalam pengembangan halaman web memberi fleksibilitas dan kemudahan dalam pengaturan suara tanpa perlu menambahkan pustaka atau alat tambahan. Keunggulan ini menjadikan objek audio sebagai alat yang sangat penting bagi pengembang dalam menciptakan pengalaman yang lebih menyenangkan bagi penggunanya.

Namun demikian, meskipun objek audio memiliki banyak keuntungan, penggunaannya juga memerlukan perhatian khusus terhadap masalah kompatibilitas. Berbagai jenis perangkat dan browser yang digunakan untuk mengakses halaman web memiliki cara yang berbeda dalam mendukung objek audio. Oleh karena itu, penting untuk memastikan bahwa objek audio yang digunakan dapat berfungsi dengan baik di berbagai perangkat dan browser yang berbeda. Pengembang dapat memastikan bahwa objek ini berfungsi secara optimal dengan melakukan pengujian pada berbagai platform dan perangkat.

Selain itu, perlu juga diperhatikan bahwa penggunaan suara yang berlebihan dalam sebuah halaman web dapat mengganggu kenyamanan pengguna. Oleh karena itu, penting untuk menggunakan objek audio secara bijaksana. Suara harus diatur agar tidak terlalu mengganggu pengalaman pengguna, terutama ketika digunakan dalam aplikasi yang melibatkan interaksi langsung atau aplikasi yang memerlukan konsentrasi tinggi. Penggunaan suara dalam halaman web sebaiknya tidak terlalu dominan, melainkan disesuaikan dengan konteks halaman tersebut. Misalnya, suara latar yang lembut atau efek suara ringan lebih disukai dalam aplikasi-aplikasi tertentu, sementara suara yang lebih kuat bisa digunakan dalam aplikasi atau game yang lebih dinamis.

Secara keseluruhan, penggunaan objek audio memberikan kemudahan yang sangat besar dalam pengelolaan suara di halaman web. Dengan menggunakan objek ini, suara tidak hanya dapat diputar, tetapi juga dikendalikan dengan sangat fleksibel dan efektif. Pengaturan objek audio sangat membantu dalam menciptakan pengalaman interaktif yang lebih menarik dan menyenangkan bagi pengguna. Dengan berbagai fitur dan kemudahan yang ditawarkan, objek audio merupakan alat yang sangat berharga bagi setiap pengembang halaman web yang ingin menambahkan elemen suara dalam karya.

Di sisi lain, penggunaan objek audio juga mencerminkan bagaimana teknologi dapat digunakan untuk memperkaya pengalaman pengguna di dunia maya. Kemudahan dalam mengontrol suara dan interaksi dengan elemen halaman lain menjadikan objek ini sangat berharga dalam menciptakan pengalaman yang lebih hidup dan dinamis. Dengan berbagai pengaturan yang dapat disesuaikan dengan kebutuhan, objek audio mampu menghadirkan pengalaman multimedia yang semakin mendalam bagi setiap pengguna halaman web.

Lebih lanjut, objek audio memberikan keuntungan yang signifikan dalam hal efisiensi dan kemudahan pengelolaan suara dibandingkan dengan metode lain yang lebih rumit. Salah satu contoh penerapan yang sering ditemui adalah dalam aplikasi pendidikan dan pelatihan online, dimana suara digunakan untuk memberikan instruksi atau penjelasan tambahan. Dengan objek audio, suara dapat disesuaikan untuk diputar pada momen yang tepat, mendukung alur kegiatan belajar tanpa mengganggu proses utama. Hal ini sangat penting dalam konteks pembelajaran interaktif, dimana setiap elemen suara dirancang untuk mendukung tujuan pembelajaran yang sedang berlangsung.

Penggunaan objek audio juga memberikan keuntungan dalam hal pengelolaan file. Sebagai pengganti penggunaan plugin eksternal atau alat lain, objek audio memungkinkan pengembang untuk mengakses dan mengontrol file suara langsung dalam halaman web tanpa perlu instalasi tambahan. Hal ini mengurangi ketergantungan pada perangkat tambahan dan memberikan pengalaman pengguna yang lebih stabil serta mengurangi potensi gangguan teknis yang sering terjadi ketika menggunakan pustaka atau plugin pihak ketiga. Pengembang juga dapat dengan mudah mengubah, memperbarui, atau menambahkan suara baru hanya dengan memodifikasi referensi file dalam objek audio tersebut.

Tidak hanya itu, objek audio memungkinkan untuk mengatur dan memutar berbagai format suara dalam satu halaman web. Berbagai format suara yang umum digunakan seperti file MP3, Ogg, atau WAV dapat dengan mudah diakses dan diputar melalui objek ini. Dengan kemudahan pengelolaan format suara, pengembang dapat memastikan bahwa suara yang dipilih sesuai dengan kebutuhan proyek, baik dari segi kualitas, ukuran file, maupun kompatibilitas dengan berbagai perangkat yang digunakan oleh pengguna. Fleksibilitas dalam hal format ini sangat penting, terutama ketika halaman web ditujukan untuk audiens yang lebih luas dan menggunakan berbagai jenis perangkat.

Meskipun begitu, perlu juga diperhatikan tantangan yang mungkin timbul dalam penggunaan objek audio, terutama dalam kaitannya dengan aksesibilitas. Penggunaan suara di halaman web perlu mempertimbangkan kebutuhan pengguna dengan gangguan pendengaran atau kondisi tertentu yang menghalangi untuk mengakses suara dengan baik. Oleh karena itu, pengembang perlu menyediakan alternatif lain seperti teks atau transkrip yang menyertai suara, agar informasi yang disampaikan tetap dapat diakses oleh semua pengguna. Dalam hal ini, pengaturan suara dengan objek audio harus memperhatikan prinsip inklusivitas, sehingga semua pengguna dapat menikmati pengalaman yang setara, terlepas dari keterbatasan fisik yang mungkin dimiliki.

Selain itu, penggunaan suara dalam halaman web harus mempertimbangkan konteks budaya dan sosial. Suara yang digunakan dalam suatu halaman web bisa memiliki makna yang berbeda di berbagai budaya atau wilayah. Sebagai contoh, penggunaan efek suara tertentu atau musik latar yang dianggap menyenangkan di satu wilayah mungkin tidak diterima dengan baik di wilayah lain. Oleh karena itu, penting untuk memilih suara yang sesuai dengan audiens yang ditargetkan dan menghindari penggunaan suara yang dapat menimbulkan kesalahpahaman atau ketidaknyamanan. Penggunaan suara yang sensitif terhadap konteks sosial dan budaya dapat meningkatkan kenyamanan pengguna dan memperkaya pengalaman.

Dengan berbagai kelebihan yang ditawarkan, objek audio bukan hanya sekadar alat untuk memutar suara, tetapi juga menjadi komponen penting dalam menciptakan pengalaman interaktif dan dinamis di halaman web. Keberagaman pengaturan yang dapat dilakukan terhadap objek ini memberi keleluasaan bagi pengembang dalam menyesuaikan suara dengan kebutuhan spesifik aplikasi yang sedang dikembangkan. Penggunaan objek audio yang bijaksana dapat meningkatkan kualitas pengalaman pengguna, menjadikan aplikasi lebih menarik, dan memperkaya interaksi yang terjadi di dalamnya.

Namun, seperti halnya dengan semua elemen multimedia, pengaturannya harus dilakukan dengan hati-hati agar tidak mengganggu kenyamanan pengguna. Mengatur volume, durasi pemutaran, dan pengulangan suara dengan tepat sangat penting agar suara tetap memberikan nilai tambah tanpa berlebihan. Suara yang terlalu keras, terlalu sering diputar, atau tidak sesuai dengan konteks dapat mengurangi kualitas pengalaman pengguna. Oleh karena itu, penting bagi pengembang untuk memikirkan setiap elemen suara yang digunakan, memastikan bahwa suara tersebut relevan dan bermanfaat bagi pengguna.

Secara keseluruhan, objek audio dalam halaman web merupakan alat yang sangat berguna bagi pengembang untuk mengatur dan memanipulasi suara dengan cara yang fleksibel dan efisien. Dengan memanfaatkan objek ini, suara dapat diintegrasikan dengan lebih baik dalam berbagai aplikasi, meningkatkan interaktivitas dan daya tarik halaman web. Penggunaan suara secara efektif dapat membantu menciptakan pengalaman yang lebih imersif dan menyenangkan bagi pengguna, yang pada akhirnya dapat meningkatkan kepuasan dan interaksi dengan aplikasi atau situs web yang dikembangkan.

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 akan dibaca oleh: Ridwan Taufiiqulhakim Wijoseno, Riko Akbar Khoirulhakim, Rimmatul Khasanah, Risma Aulia Atiqa, dan Rizaldy Arji Pangestu.

Location: Kota Semarang, Jawa Tengah, Indonesia

Berbagi :