Fungsi loop pada saat menyisipkan file audio ke dalam format web adalah

Question

HTML element tagmerupakan tag HTML yang digunakan untuk menambahkan data audio ke dalam halaman HTML. HTML element tagakan mengenali dan memainkan file audio dalam bentuk suara atau musik. Secara default tagakan menampilkan pemutar audio yang dilengkapi dengan beberapa kontrol seperti tombol play, pause, volume, track bar, ataupun track position.

Table of Contents Show

Atribut Untuk Tag Audio Html
1. Controls
2. Atribut autoplay
3. Atribut Loop
4. Atribut muted
5. Atribut Src
Format File Audio yang didukung HTML 5

Setiap browser memiliki tampilan yang berbeda meskipun menggunakan HTML tagyang sama. Dukungan untuk memutar file audio pada media filenya setiap brwoser juga berbeda.

File audio file dengan dalam bentuk file .mp3 adalah file audio yang dapat dimainkan pada hampir semua browser. Kemudian disusul oleh audio file jenis .wav.

Penggunaan file audio dengan jenis .ogg dan .acc perlu dihindari karena hanya didukung oleh beberapa browser saja. Jadi jika anda ingin menambahkan file audio pada halaman HTML, sebaiknya menggunakan audio file jenis .mp3. Proses konversi file audio yang tidak didukung oleh browser ke dalam bentuk file .mp3 perlu dilakukan, jika file tersebut akan digunakan di dalam halaman HTML.

Anda dapat memasukkan beberapa file audio dengan format yang berbeda di dalam tagtepatnya di dalam tag. Browser akan memainkan file audio yang pertama secara default. Jika file audio pertama tidak didukung akan memainkan file audio yang kedua dan seterusnya. Namun jika file audio yang dimiliki hanya satu, dapat menggunakan atribut SRC dengan isi URL dimana file audio tersebut diletakkan.

Penggunaan Tag AUDIO

Hal yang perlu disiapkan pertama adalah file audio itu sendiri. File tersebut diletakkan sejajar dengan halaman HTML aktif. File audio tersebut dapat dipanggil dan dimainkan pada browser dengan menyertakan nama dan extensi file audio di dalam atribut SRC.

Berikut cara menggunakan audio player melalui tag:

Native audio playback is not supported.

Akan menghasilkan tampilan :

Native audio playback is not supported.

Atribut Khusus

HTML element tagmemiliki atribut yang dapat digunakan untuk menampilkan, memainkan dan menata pemutar fle pada halaman HTML.

Atribut khusus pada tag audio sangat berhubungan dengan audio player untuk memainkan file audio di dalam halaman HTML.

Hallo temen temen, kali ini kita akan belajar menambahkan audio html. Audio merupakan element penting setelah video. Beberapa website seperti kursus online bahasa inggris, penyedia lagu-lagu online. tentunya perlu meletakan audio sebagai core konten nya. Secar umum ada tiga jenis file-file audio yang bisa di play yaitu audio digital, file music dan tex to speech. Selain itu, kita juga bisa menambahkan inline audio pada sebuah website.

Dulu sebelum adanya HTML 5, audio di html ditambahkan dengan program external seperti flash player. Untuk memberikan file video kita bisa menggunakan tag <audio>.

Untuk lebih lengkapnya seperti dibawah ini

Sebelum kalian mencobanya, buat yang kalian yang belum memiliki audio kalian bisa download audio nya di bendsound . Jika sudah kalian bisa mulai mencoba kode dibawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Audio di HTML</title>
</head>
<body>
  <audio controls>
    <source src="bensound-memories.mp3" type="audio/mpeg">
    Browser anda tidak mendukung tag audio
  </audio>
</body>
</html>

Disini filenya saya letakan di sejajar dengan file index.html.

Daftar Isi

Atribut Untuk Tag Audio Html
- 1. Controls
- 2. Atribut autoplay
- 3. Atribut Loop
- 4. Atribut muted
- 5. Atribut Src
Format File Audio yang didukung HTML 5

Atribut Untuk Tag Audio Html

Seperti yang sudah kita singgung sebelumnya tag audio memiliki beberapa atribut khusus dan pendukungnya.

1. Controls

Seperti namanya digunakan untuk menampilkan atau mengaktifkan tombol control audio yang sudah defaultnya yaitu ada play, pause, stop, volume, dan minute scroll. Atribut ini memiliki nilai boolean yaitu false dan true, jika kalian menggunakan atribut ini defaultnya adalah true. Sehingga jika false bisa kita definisikan atau kita hilangkan atribut ini.

Contohnya

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Audio di HTML</title>
</head>
<body>
  <audio controls="true">
    <source src="bensound-memories.mp3" type="audio/mpeg">
    Browser anda tidak mendukung tag audio
</audio>
</body>
</html>

Atau



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Audio di HTML</title>
</head>
<body>
  <audio control>
    <source src="bensound-memories.mp3" type="audio/mpeg">
    Browser anda tidak mendukung tag audio
</audio>
</body>
</html>

2. Atribut autoplay

Atribut ini berguna jika kita menginginkan videnya berputar secara otomatis. Atribut ini memiliki dua nilai yaitu true dan false. Jika nilai yang dimasukkan true maka file audio akan diputar secara otomatis, sedangkan jika false maka tidak diputar secara otomatis.

Pendefinisianya sama dengan atribut controls dan juga penulisannya.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Audio di HTML</title>
</head>
<body>
  <audio controls="true" autoplay="true">
    <source src="bensound-memories.mp3" type="audio/mpeg">
    Browser anda tidak mendukung tag audio
</audio>
</body>
</html>

Atau

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Audio di HTML</title>
</head>
<body>
  <audio controls="true" autoplay>
    <source src="bensound-memories.mp3" type="audio/mpeg">
    Browser anda tidak mendukung tag audio
</audio>
</body>
</html>

Buat temen temen yang gagal atau videonya tidak berputar secara otomatis ketika direload. Kemungkinan memang saat ini atribut autoplay tidak bekerja di google chrome karena ada beberapa kebijakan baru. Coba kalian jalanya pada browser seperti Mozilla Firefox, Microsoft Edge, dan lainnya

3. Atribut Loop

Atribut ini berfungsi untuk melooping atau mengulang ulang audio kita seperti di tag video tulisan saya sebelum ini.

Nilai yang bisa kita berikan adalah true dan false.

Contoh penulisannya

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Audio di HTML</title>
</head>
<body>
  <audio controls loop="true">
    <source src="bensound-memories.mp3" type="audio/mpeg">
    Browser anda tidak mendukung tag audio
</audio>
</body>
</html>

Atau



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Audio di HTML</title>
</head>
<body>
  <audio controls loop>
    <source src="bensound-memories.mp3" type="audio/mpeg">
    Browser anda tidak mendukung tag audio
</audio>
</body>
</html>

4. Atribut muted

Atribut muted digunakan untuk mensenyapkan audio. Jadi ketika atribut ini ditambahkan maka secara default volume dari file audio yang diputar beralih ke mode senyap. Memiliki nilai boolean, true dan false.

Contoh :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Audio di HTML</title>
</head>
<body>
  <audio controls muted>
    <source src="bensound-memories.mp3" type="audio/mpeg">
    Browser anda tidak mendukung tag audio
</audio>
</body>
</html>

Atau

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Audio di HTML</title>
</head>
<body>
  <audio controls muted="true">
    <source src="bensound-memories.mp3" type="audio/mpeg">
    Browser anda tidak mendukung tag audio
</audio>
</body>
</html>

5. Atribut Src

Seperti halnya tag <img/>tag src yang di audio ini juga sama yaitu untuk menentukan alamat lokasi atau sumber dari beberapa file media. Dipenulisan kita tadi kita meletakan atribut src di tag <source>, sebenarnya atribut src ini bisa kita berikan langsung di tag audio. Nah sekarang muncul pertanyaan pasti. Perbedaanya apa ?

Perbedaaya adalah ketika kita menggunakan tag <source> kita bisa menambahkan beberapa jenis format audio. yang mana ini akan membuat browser lebih leluasa untuk memilih file mana yang dapat diputar. contoh penggunaanya seperti ini.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Audio di HTML</title>
</head>
<body>
  <audio controls>
    <source src="bensound-memories.mp3" type="audio/mpeg">
    <source src="bensound-memories.mp3" type="audio/wav">
    <source src="bensound-memories.mp3" type="audio/aac">
    <source src="bensound-memories.mp3" type="audio/ogg">
</audio>
</body>
</html>

Jika kalian coba maka hasilnya akan tetap sama hanya satu file yang ditampilkan.

Format File Audio yang didukung HTML 5

Format Container MIME typePCM WAV audio/wavMP3 MP3 audio/mpegAAC MP4 audio/mp4AAC AAC audio/aacAAC AAC audio/aacpVorbis Ogg audio/oggVorbis WebM audio/webmOpus Ogg audio/oggOpus WebM audio/webmFLAC FLAC audio/flacFLAC Ogg audio/ogg

Nah sampai sejauh ini kita sudah mempelajari banyak tag di html. Ini adalah tutorial terakhir dari mimin. Selanjutnya kalian bisa belajar css, javascript, dan php. Semangat terus belajarnya tunggu tutorial lainnya dari saya terimakasih.

Kiat Bagus Fungsi Teknologi File