Belajar Pemrograman Bersama Portal Coding

Belajar berbagai pemrograman secara gratis dan praktis agar cepat mahir.

Mulai Belajar

Menjalankan Audio di dalam HTML

Tanggal Upload : 2020-04-28 03:14:20

Diupload Oleh : Ageng Prayoga


# html # html dan css

Menjalankan Audio di dalam HTML

 

Halo , kembali lagi bersama portal coding.

Didalam dokumen html, selain menampilkan gambar, kita juga dapat menampilkan file video pada dokumen tersebut, dan video pun akan tampil sesuai bentuk dan ukurannya, sama seperti gambar selain itu juga kita dapat menjalankan audio di pada dokumen html. 

Nah , sebelumnya kita telah mempelajari cara menampilkan video di dalam sebuah dokumen html. Pada pembahasan kali ini kita akan mempelajari bagaimana cara untuk menampilkan audio ke dalam sebuah dokumen html.

Bagaimana caranya ? Mari simak pembahasan berikut ini !

menjalankan audio di html

Untuk menampilkan audio di dalam dokumen html kita menggunakan tag <audio /> . Dengan tag ini kita bisa menampilkan sebuah file audio ke dalam sebuah dokumen html. Tag/elemen audio ini tidak memiliki default style css yang berlaku.

Syntax dasar : 

<audio controls>
      <source src="sumber audio" type="audio/format audio">
</audio>

 

Beberapa atribut tag juga bisa ditambahkan ke dalam tag <audio /> dan tag <source />

 

Atribut pada tag <audio /> 

control


Berfungsi untuk menampilkan antarmuka (user interface) untuk audio control (seperti menampilkan tombol putar(play/pause), control volume, serta info durasi audio).

 

autoplay


Berfungsi untuk mulai memutar audio secara otomatis sesegera mungkin tanpa berhenti.

 

loop


Menentukan bahwa audio akan mulai dari awal lagi, setiap kali selasi.

 

muted


Menentukan bahwa output audio di bisukan.

 

preload


Menentukan agar audio akan dimuat ulang ketika halman dokumen dimuat.

 

Atribut pada tag <source />

src


Berfungsi untuk menentukan URL yang mengarah pada sumber video file berada (disimpan).

 

type


Berfungsi untuk menentukan tipe dari file audio dan juga menentukan format file, apakah mp3, ogg, wav dan lain sebagainya.

 

Ada tiga format audio yang didukung dalam HTML : MP3, OGG, WAV .

Format

Penjelasan

File Ekstensi Type
MP3 Merupakan MPEG-1 atau MPEG-2 Audio Layer III , format paling sering dipakai yang menggunakan format lossy data compression. .mp3 audio/mp3
Ogg Merupakan format free, open standar yang memiliki kualitas audio yang lebih baik dari pada MP3. .ogg audio.ogg
WAV Merupakan format original rawa digital audio yang biasanya memiliku ukuran file yang besar karena tidak menggunakan metode compresi file. .wav audio/wav

 

Berikut Format Audio dan Browser yang mendukung :

Browser  MP3 WAV OGG

Edge/ IE

✔️ ✖️ ✖️

Chrome

✔️ ✔️ ✔️

Firefox

✔️ ✔️ ✔️

Safari

✔️ ✔️ ✖️

Opera

✔️ ✔️ ✔️

 

Baiklah langsung saja kita akan membuat program untuk menjalankan audio pada sebuah dokumen html.

Pertama - tama kita harus memiliki file audionya terlebih dahulu. Kemudian saat kita akan mendefinisikan sumber audio filenya(link audio/lokasi file audio tersebut) sebaiknya kita mengelompokkannya kedalam satu folder yang sama dengan file htmlnya.

 

Jadi disini saya mengelompokkan filenya ke dalam satu folder seperti dibawah ini :

=> Menjalankan Audio pada html
   |
    -> index.html
   |
  => assets
       |
      => audio
-> audio.mp3

 

Note : => ( folder )

           ->  ( file )

 

Contoh : 

 

<html>
<head>
<tittle> Menjalankan Audio di dalam HTML </tittle>
<head>
<body>
<audio controls>
<source src="assets/audio/audio.mp3" type="audio/mp3">
</audio>
</body>
</html>

 

Ketika dokumen html dibuka maka audio akan tampil seperti dibawah ini : 

menjalankan audio di dalam html

Untuk menjalankan audionya kita hanya perlu mengklik tombol play. Jika ingin membuat audio autoplay ketika halaman dimuat kita hanya perlu menambahkan tag attribut autoplay pada tag <audio /> .

 

output gif

 

Itulah tadi pembahasan singkat mengenai bagaimana cara menjalankan audio di dalam sebuah dokumen html.

 

Semoga bermanfaat , dan sampai jumpa lagi di pembahasan berikutnyaa !

 

Materi Lainnya =>

Mengenal List pada HTML 

Advertisement


Tentang Portal Coding

Tentang Portal Coding

Portal Coding adalah situs web yang membahas mengenai berbagai macam bahasa pemrograman baik versi web, desktop maupun mobile secara lengkap.

Portal Coding On Youtube

Ayo subscribe channel Portal Coding di Youtube. Dichannel ini kami menyediakan berbagai tutorial dalam bentuk video. Agar kita lebih mudah belajar pemrograman. Klik disini untuk subscribe.

Subscribe