Anda dapat menyertakan file audio dalam HTML5 dengan cara yang sama seperti video. HTML5 menyediakan elemen audio sendiri dengan audio.
<audio src="song.mp3"> Browser Anda tidak mendukung elemen audio. </audio>
Nama file yang akan diputar diberikan ke elemen audio melalui atribut src. Namun, file tidak akan diputar hanya dengan demikian. Kontrol diperlukan untuk memutar file.
Jika Anda ingin menampilkan kontrol, Anda dapat menambahkan atribut controls ke elemen audio.
<audio src="song.mp3" controls> Browser Anda tidak mendukung elemen audio. </audio>
Tampilannya di browser harus seperti ini:
Jika controls tidak ditambahkan, elemen audio yang disertakan melalui audio tidak akan terlihat. Menghilangkan atribut ini bermanfaat jika Anda ingin menyisipkan kontrol kustom menggunakan JavaScript.
Penggunaan elemen audio juga tidak selalu berjalan mulus. Browser memiliki format yang didukung yang berbeda-beda. Tabel berikut memberikan informasi terbaru mengenai hal tersebut.
| Browser | MP3 | OGG | WAV | AU/SND | AIF |
Firefox | tidak | ya | ya | tidak | tidak |
Safari | ya | tidak | ya | ya | ya |
Chrome | ya | ya | tidak | tidak | tidak |
Opera | tidak | ya | ya | ya | tidak |
Jadi apa yang harus dilakukan? Elemen audio juga memberi Anda kemampuan untuk menentukan elemen source tambahan. Kemudian, masing-masing elemen ini diberikan format yang berbeda untuk browser yang berbeda. Contoh:
<audio controls>
<source src="song.mp3">
<source src="song.ogg">
</audio>
File-file yang berbeda berformat diberikan ke atribut src. Selain controls, elemen audio memiliki atribut tambahan. Salah satunya adalah autoplay.
<audio controls autoplay>
<source src="song.mp3">
<source src="song.ogg">
</audio>
Jika atribut tersebut ditetapkan, pemutaran file audio akan dimulai secara otomatis setelah file tersebut dimuat. Biasanya atribut ini tidak diatur agar pengunjung bisa memilih kapan file audio diputar.
Menariknya, atribut loop juga. Atribut ini membuat file diputar secara berulang.
Seperti untuk menyertakan video, juga terdapat atribut type dan media untuk elemen audio. Anda juga dapat menentukan jenis MIME dan codec yang sesuai di sini. Berikut adalah beberapa contoh yang umum digunakan untuk atribut type dalam spesifikasi HTML5:
• type='audio/ogg; codecs=vorbis'
• type='audio/ogg; codecs=speex'
• type='audio/ogg; codecs=flac'
Ingatlah bahwa kedua atribut ini hanya boleh digunakan pada elemen source, bukan pada elemen audio.
Menyertakan Flash & Co.
Film Flash dapat disertakan dalam versi HTML sebelumnya melalui kombinasi embed dan object. Sintaks yang dihasilkan - yang sebenarnya sangat tidak baik - akan terlihat seperti ini:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="800" height="600"> <param name=movie value="intro.swf"> <param name=quality value=high> <embed src="intro.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="800" height="600"> </embed> </object>
Ini adalah cara klasik melalui elemen object dan embed, yang telah eksis dalam bentuk ini dalam HTML sejak lama.
Namun, "klasik" di sini bukan berarti versi ini telah disahkan oleh W3C di masa lalu. Pada HTML 4, elemen object lebih disukai, yang kemudian diinterpretasikan dengan benar oleh Internet Explorer. Berbeda dengan Netscape Navigator. Mereka menggunakan elemen embed. Perbedaan interpretasi inilah yang membuat gabungan elemen object dan embed menjadi penting.
HTML5 sekarang secara resmi menyediakan elemen object dan embed untuk menyertakan konten interaktif.embed adalah container yang dimaksudkan untuk menampilkan konten non-HTML yang tidak ditangani oleh elemen lain seperti img, video, audio dan sebagainya. Biasanya, plugin browser diperlukan untuk memutar konten yang disertakan.
Dengan menggunakan embed, sekarang bisa disertakan dalam dokumen secara standar, misalnya film Flash. Berikut contoh bagaimana tampilan dapat muncul seperti ini:
<embed
src="http://www.youtube.com/v/v1PgiBpTtao?fs=1&hl=de_DE"
type="application/x-shockwave-flash"
width="384"
height="313"
allowscriptaccess="always"
allowfullscreen="true"
/>
Elemen embed dapat diberi berbagai atribut. Atribut yang paling penting tentu saja adalah atribut src, yang digunakan untuk menentukan file yang akan disertakan. Atribut type digunakan untuk menyatakan jenis MIME.
Contohnya pada Flash adalah application/x-shockwave-flash. Jika Anda ingin menyertakan file LaTeX, Anda dapat gunakan application/x-latex. Lebar dan tinggi file yang disertakan diatur oleh atribut width dan height.
Terdapat beberapa atribut lain yang belum resmi termasuk ke dalam HTML5. Atribut ini memungkinkan pengendalian plugin yang digunakan. Seperti pada contoh sebelumnya, melalui dua "atribut Flash" yaitu allowscriptaccess dan allowfullscreen ditentukan bahwa akses skrip dan mode layar penuh diizinkan. Tidak ketinggalan juga ada atribut quality, yang digunakan untuk menetapkan kualitas film Flash.
<embed
src="flash.swf"
width="600" height="300"
type="application/x-shockwave-flash"
quality="high"
/>Elemen object
Elemen object berfungsi sebagai wadah konten, mirip dengan embed. Namun, berbeda dengan embed, object memiliki tiga model konten yang berbeda. Jika browser mengenali bahwa itu adalah grafik langsung yang dapat ditampilkan, maka akan menjalankan fungsinya seperti elemen img. Jika objek yang dirujuk adalah konten web, maka akan ditampilkan dalam iFrame. (Lebih lanjut tentang iFrames akan dijelaskan nanti di seri ini). Untuk konten lainnya, object berperilaku seperti embed.
Contoh berikut menunjukkan cara menyertakan film Flash melalui elemen object.
<object
type="application/x-shockwave-flash"
data="http://www.youtube.com/v/BzYBY_9rnuA?version=3&hl=de_DE&rel=0"
width="400"
height="300">
<param name="allowscriptaccess" value="always" />
<param name="allowfullscreen" value="true" />
<p>
In Ihrem Browser ist kein Flash-Plug-in vorhanden.
</p>
</object>Yang perlu dipertimbangkan adalah apakah sebaiknya menggunakan object atau embed. Pada pandangan pertama, kedua elemen tersebut nampaknya hampir sama. Dan memang elemen object dapat melakukan semua yang dilakukan oleh elemen embed.
Untuk menyertakan konten selain gambar, biasanya lebih baik menggunakan elemen object. Elemen ini memungkinkan pengaturan konten alternatif yang akan ditampilkan jika elemen yang disertakan tidak dapat dimuat.
