{"id":909,"date":"2022-01-14T09:39:03","date_gmt":"2022-01-14T02:39:03","guid":{"rendered":"https:\/\/duniacoding.info\/?p=909"},"modified":"2022-01-14T09:39:04","modified_gmt":"2022-01-14T02:39:04","slug":"belajar-audio-html","status":"publish","type":"post","link":"https:\/\/duniacoding.id\/blog\/belajar-audio-html\/","title":{"rendered":"Belajar HTML #9 : Menambahkan Audio Html Sangat Mudah"},"content":{"rendered":"\n

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. <\/p>\n\n\n\n

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

Untuk lebih lengkapnya seperti dibawah ini<\/p>\n\n\n\n

\"Audio<\/figure>\n\n\n\n

Sebelum kalian mencobanya, buat yang kalian yang belum memiliki audio kalian bisa download audio nya di bendsound <\/a>. Jika sudah kalian bisa mulai mencoba kode dibawah ini.<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Audio di HTML<\/title>\n<\/head>\n<body>\n  <audio controls>\n    <source src=\"bensound-memories.mp3\" type=\"audio\/mpeg\">\n    Browser anda tidak mendukung tag audio\n  <\/audio>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
Disini filenya saya letakan di sejajar dengan file index.html. <\/p>\n\n\n\n
Atribut Untuk Tag Audio Html<\/h2>\n\n\n\n
Seperti yang sudah kita singgung sebelumnya tag audio memiliki beberapa atribut khusus dan pendukungnya.<\/p>\n\n\n\n
1. Controls<\/h3>\n\n\n\n
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.<\/p>\n\n\n\n
Contohnya<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Audio di HTML<\/title>\n<\/head>\n<body>\n  <audio controls=\"true\">\n    <source src=\"bensound-memories.mp3\" type=\"audio\/mpeg\">\n    Browser anda tidak mendukung tag audio\n<\/audio>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Atau<\/p>\n\n\n\n
\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Audio di HTML<\/title>\n<\/head>\n<body>\n  <audio control>\n    <source src=\"bensound-memories.mp3\" type=\"audio\/mpeg\">\n    Browser anda tidak mendukung tag audio\n<\/audio>\n<\/body>\n<\/html>\n\n<\/code><\/pre>\n\n\n\n
2. Atribut autoplay<\/h3>\n\n\n\n
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.<\/p>\n\n\n\n
Pendefinisianya sama dengan atribut controls dan juga penulisannya.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Audio di HTML<\/title>\n<\/head>\n<body>\n  <audio controls=\"true\" autoplay=\"true\">\n    <source src=\"bensound-memories.mp3\" type=\"audio\/mpeg\">\n    Browser anda tidak mendukung tag audio\n<\/audio>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Atau<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Audio di HTML<\/title>\n<\/head>\n<body>\n  <audio controls=\"true\" autoplay>\n    <source src=\"bensound-memories.mp3\" type=\"audio\/mpeg\">\n    Browser anda tidak mendukung tag audio\n<\/audio>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
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<\/p>\n\n\n\n
3. Atribut Loop<\/h3>\n\n\n\n
Atribut ini berfungsi untuk melooping atau mengulang ulang audio kita seperti di tag video tulisan saya sebelum ini<\/a>.<\/p>\n\n\n\n
Nilai yang bisa kita berikan adalah true dan false.<\/p>\n\n\n\n
Contoh penulisannya<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Audio di HTML<\/title>\n<\/head>\n<body>\n  <audio controls loop=\"true\">\n    <source src=\"bensound-memories.mp3\" type=\"audio\/mpeg\">\n    Browser anda tidak mendukung tag audio\n<\/audio>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Atau<\/p>\n\n\n\n
\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Audio di HTML<\/title>\n<\/head>\n<body>\n  <audio controls loop>\n    <source src=\"bensound-memories.mp3\" type=\"audio\/mpeg\">\n    Browser anda tidak mendukung tag audio\n<\/audio>\n<\/body>\n<\/html>\n\n<\/code><\/pre>\n\n\n\n
4. Atribut muted<\/h3>\n\n\n\n
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.<\/p>\n\n\n\n
Contoh : <\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Audio di HTML<\/title>\n<\/head>\n<body>\n  <audio controls muted>\n    <source src=\"bensound-memories.mp3\" type=\"audio\/mpeg\">\n    Browser anda tidak mendukung tag audio\n<\/audio>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Atau<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Audio di HTML<\/title>\n<\/head>\n<body>\n  <audio controls muted=\"true\">\n    <source src=\"bensound-memories.mp3\" type=\"audio\/mpeg\">\n    Browser anda tidak mendukung tag audio\n<\/audio>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
5. Atribut Src<\/h3>\n\n\n\n
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 ?<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Audio di HTML<\/title>\n<\/head>\n<body>\n  <audio controls>\n    <source src=\"bensound-memories.mp3\" type=\"audio\/mpeg\">\n    <source src=\"bensound-memories.mp3\" type=\"audio\/wav\">\n    <source src=\"bensound-memories.mp3\" type=\"audio\/aac\">\n    <source src=\"bensound-memories.mp3\" type=\"audio\/ogg\">\n<\/audio>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Jika kalian coba maka hasilnya akan tetap sama hanya satu file yang ditampilkan.<\/p>\n\n\n\n
Format File Audio yang didukung HTML 5<\/h2>\n\n\n\n
\n
\n
Format                                                                     Container                                              MIME type<\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/tr>
PCM                                                                         WAV                                                      audio\/wav<\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/tr>
MP3                                                                          MP3                                                      audio\/mpeg<\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/tr>
AAC                                                                          MP4                                                       audio\/mp4<\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/tr>
AAC                                                                          AAC                                                       audio\/aac<\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/tr>
AAC                                                                          AAC                                                       audio\/aacp<\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/tr>
Vorbis                                                                       Ogg                                                       audio\/ogg<\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/tr>
Vorbis                                                                       WebM                                                   audio\/webm<\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/tr>
Opus                                                                        Ogg                                                       audio\/ogg<\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/tr>
Opus                                                                        WebM                                                    audio\/webm<\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/tr>
FLAC                                                                        FLAC                                                       audio\/flac<\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/tr>
FLAC                                                                        Ogg                                                        audio\/ogg<\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
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.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
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...<\/p>\n","protected":false},"author":3,"featured_media":928,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-909","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial"],"_links":{"self":[{"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/posts\/909","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/comments?post=909"}],"version-history":[{"count":3,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/posts\/909\/revisions"}],"predecessor-version":[{"id":929,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/posts\/909\/revisions\/929"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/media\/928"}],"wp:attachment":[{"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/media?parent=909"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/categories?post=909"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/tags?post=909"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}