Tujuan
Mengenal cara menyajikan file audio menggunakan HTML5
Alat
Bahan
Dasar Teori
HTML
HTML adalah singkatan dari HyperText Markup Language yaitu sebuah bahasa untuk memarkup (memformat). HTML memberitahu Web Browser bagaimana cara menampilkan konten. HTML memisahkan "konten" (kata-kata, gambar, audio, video dan lainnya) dari "Penampilan" (Definisi dari tipe konten dan instruksi bagaimana tipe konten tersebut harus ditampilkan). HTML menggunakan beberapa elemen yang telah didefinisikan untuk mengidentifikasi tipe-tipe konten. Element-elemen memiliki satu atau lebih "tag" yang memiliki atau mengekspresikan konten. Tatag diawali dan diakhiri dengan kurung siku, dan tag "penutup" (tag yang menandakan akhir dari konten) diawali dengan garis miring.
Sebagai contoh, elemen paragraf terdiri dari tag pembuka "<p>" dan tag penutup "</p>". Contoh berikit menampilkan sebuah paragraf yang terdapat dalam elemen paragraf HTML:
<p>My dog ate all the guacamole.</p>
Ketika konten tersebut ditampilkan dalam web browser, maka akan terlihat seperti berikut:
Browser menggunakan tag sebagai indikator bagaimana konten yang terdapat di dalam tag ditampilkan.
Elemen-element yang memiliki konten biasanya dapat memiliki elemen lainnya. Sebagai contoh, elemen empasis ("<em>") dapat disertakan di dalam elemen paragraf:
<p>My dog ate <em>all</em> the guacamole.</p>
Ketika ditampilkan, akan terlihat seperti:
Sebagian elemen tidak memiliki konten lainnya di dalamnya. Sebagai contoh, tag image ("<img>") secara sederhana menspesifikasikan nama file dari konten (sebuah gambar) sebagai sebuah atribut:
<img src="smileyface.jpg">
Seringkali sebuah garis miring dituliskan sebelum kurung tutup siku untuk mengindikasikan akhir dari tag. Hal ini bersifat opsional dalam HTML tapi harus dilakukan dalam XHTML (Yakni sebuah skema XML yang mengimplementasikan elemen-elemen HTML).
HTML5
HTML5 lahir pada tahun 2009 yangmerupakan standar baru untuk HTML, XHTML dan DOM HTML. Sejak munculnya HTML versi 4.01, perkembangan situs dunia semakin berkembang.
HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium) dan WHATWG (Web Hypertext Application Technology Working Group). WHATWG bekerja dengan bentuk situs dan aplikasi, sedangkan W3C merupakan pengembang dari XHTM L 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.
Meskipun HTML5 telah dikenal luas oleh para pengembang web sejak lama, HTML5 baru mencuat pada April 2010 setelah CEO Apple Inc.,Steve Jobs, mengatakan bahwa dengan pengembangan HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web".
Tujuan dibuatnya HTML5 antara lain:
HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium) dan WHATWG (Web Hypertext Application Technology Working Group). WHATWG bekerja dengan bentuk situs dan aplikasi, sedangkan W3C merupakan pengembang dari XHTM L 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.
Meskipun HTML5 telah dikenal luas oleh para pengembang web sejak lama, HTML5 baru mencuat pada April 2010 setelah CEO Apple Inc.,Steve Jobs, mengatakan bahwa dengan pengembangan HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web".Tujuan dibuatnya HTML5 antara lain:
- Fitur baru harus didasarkan pada HTML, CSS, DOM , dan JavaScript.
- Mengurangi kebutuhan untuk plugin eksternal (seperti Flash).
- Penanganan kesalahan yang lebih baik.
- Lebih banyak markup untuk menggantikan scripting.
- HTML5 merupakan perangkat mandiri.
Fitur baru dalam HTML5:
Beberapa kelebihan yang dijanjikan pada HTML5:
- Unsur kanvas untuk menggambar.
- Video dan elemen audio untuk media pemutaran.
- Dukungan yang lebih baik untuk penyimpanan secara offline.
- Elemen konten yang lebih spesifik, seperti artikel, footer, header,
navigation, section. - Bentuk kontrol form seperti kalender, tanggal, waktu, e-mail, URL, search.
Beberapa kelebihan yang dijanjikan pada HTML5:
- Dapat ditulis dalam sintaks HTML (dengan tipe media text/HTML) danXML.
- Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya.
- Integrasi ('inline') dengan doctype yang lebih sederhana.
- Penulisan kode yang lebih efisien.
- Konten yang ada di situs lebih mudah terindeks oleh search engine.
Saat ini HTML5 masih dalam pengembangan, namun hanya beberapa browser sudah mendukung HTML5. Beberapa browser tersebut seperti Safari, Chrome, Firefox, dan Opera. Kabarnya IE9 (Internet Explorer) akan mendukung beberapa fitur dari HTML5.
HTML Tag
Saat web browser menampilkan sebuah halaman web, web browser membaca halaman web tersebut dari sebuah file teks dan kemudian mencari kode-kode special (dalam hal ini adalah tag HTML) yang ditandai dengan karakter "<" dan ">".
Tag HTML pada umumnya dibuat berpasangan, ada tag pembuka dan ada tag penutup. Format umum tag HTML adalah :
<nama_tag> Teks yang akan ditampilkan </nama_tag>
Sebuah contoh, misalnya judul halaman ini menggunakan tag header :
<h3> Apa itu tag HTML ? </h3>
Tag tersebut akan memberikan informasi kepada web browser untuk menampilkan teks "Apa itu tag HTML ?" dengan style header level 3. Tag HTML dapat menginstruksikan web browser untuk menebalkan sebuah teks (bold), menampilkan dengan format miring/italic, membuatnya sebagai sebuah header dengan level tertentu, atau membuatnya sebagai sebuah hyperlink ke halaman web yang lain.
Sebuah tag penutup </nama_tag> selalu diberikan karakter "/", yang berfungsi untuk memberhentikan proses tagging kepada web browser. Banyak tag HTML yang selalu berpasangan dengan cara seperti ini. Bila kita lupa memberikan tag penutup maka web browser akan menganggap bahwa tag tersebbut berlaku untuk keseluruhan dokumen dan hasil tampilan halaman web tersebut tidak seperti yang kita inginkan.
Penulisan tag-tag HTML tidak memperhatikan penggunaan huruf (case in-sensitive), apakah menggunakan huruf besar atau huruf kecil, akan menghasilkan tampilan yang sama.
Tidak seperti di bahasa pemrograman, kesalahan akibat peletakan atau penggunaan tag HTML tidak akan mengakibatkan sistem komputer menjadi hang atau rusak. Kesalahan tersebut hanya akan berakibat pada tampilan halaman web tersebut.
Web browser memang sengaja dirancang dengan kemampuan mengenali dan melaksanakan 'hanya' beberapa tag HTML dari keseluruhan tag standard W3C. Bila ada tag HTML yang tidak diketahui dalam halaman web yang sedang diproses, web browser akan mengabaikannya seakan-akan tag tersebut tidak ada.
Contoh : <tagsaya><h3>Apa itu tag HTML ? </h3></tagsaya>
akan menampilkan tampilan yang sama dengan <h3>Apa itu tag HTML ? </h3>. Jadi tag <tagsaya> dan </tagsaya> sama sekali diabaikan oleh web browser.
HTML5 Audio Tag
Salah satu tag semantik HTML5 terbaru yang dapat dipakai developer web untuk memperkaya fitur aplikasinya adalah tag audio. Penggunaan tag audio ini sama sekali tidak membutuhkan plugin sejenis flash atau silverlight. Tag audio HTML5 merupakan spesifikasi semantik terbaru HTML yang mempunyai fungsi sebagai berikut :
- Mendeteksi input audio dari device internal maupun eksternal
- Memutar file audio yang didukung HTML5
- Bahkan kita bisa menggunakan audio HTML5 untuk menerapkan speech to text pada aplikasi web
HTML5 AUDIO
Jika pembaca pernah mengunjungi website SoundCloud atau mungkin sering berkunjung kesana. Seperti itulah penerapan tag audio HTML5 yang sudah dimodifikasi sehingga dapat menampilkan efek audio equalizer yang memukau. Untuk mempelajari bagaimana tag <audio> HTML5 berfungsi, kita juga harus mengetahui tipe audio apa saja yang didukung oleh HTML5.
Berikut adalah ringkasan tipe ekstensi jenis file audio dan browser yang didukung oleh semantik baru audio HTML5 :
| NO | TIPE AUDIO | BROWSER |
|---|---|---|
| 1 | OGG vorbis | Google Chrome | Firefox | Opera | Safari |
| 2 | WAV pcm | Google Chrome | Firefox | Opera | Safari |
| 3 | MP3 | Google Chrome | Firefox | Internet Explorer | Safari |
| 4 | AAC | Google Chrome | Firefox | Internet Explorer | Safari |
| 5 | WEBM vorbis | Google Chrome | Firefox | Opera |
| 6 | OGG opus | Google Chrome | Firefox |
Seiring berkembangnya teknologi dan update terbaru, dari semua browser yang dirangkum dari data Wikipedia di atas. Kemungkinan terjadinya dukungan untuk masing-masing browser sangatlah mungkin. Jadi sebaiknya selalu mengupdate browser ke versi terbaru.
Tugas Praktikum
- Tampilkan file audio yang diberikan ke dalam sebuah halaman web menggunakan HTML5 Audio Tag
- Buat screenrecord yang menunjukkan percobaan tentang manipulasi audio tag melalui Javascript. Diantaranya adalah penggunaan perintah play(), pause(), dan properti currentTime
Hasil Praktikum
1. Screen record penerapan HTML5 Audio Tag
2. Screen record percobaan manipulasi audio tag dengan Javascript.
Kesimpulan
Untuk menampilkan audio pada browser dapat digunakan HTML5 audio tag yaitu <audio></audio> dan gunakan <source> untuk menentukan file yang akan dimainkan. Atribut controls digunakan untuk menampilkan menu play, pause, bar length, volume yang tersedia otomatis pada html 5. Atribut autoplay digunakan untuk menjalankan file audio secara otomatis ketika browser di load.
Selain controls yang tersedia pada html 5, dapat juga digunakan javascript utuk mengatur file audio. Dengan play() untuk memutar file audio, pause() untuk menghentikan sementara file audio, dan CurrentTime=0 untuk mengulang file audio yang dimainkan dari awal.
Kesimpulannya penggunaan javascript juga dapat diterapkan untuk mengatur audio yang dijalankan pada browser.
Selain controls yang tersedia pada html 5, dapat juga digunakan javascript utuk mengatur file audio. Dengan play() untuk memutar file audio, pause() untuk menghentikan sementara file audio, dan CurrentTime=0 untuk mengulang file audio yang dimainkan dari awal.
Kesimpulannya penggunaan javascript juga dapat diterapkan untuk mengatur audio yang dijalankan pada browser.
Referensi
http://mkhuda.com/open-source/penerapan-tag-audio-html5-fatin-version/
http://www.mohhasbias.com/prak-01-html5-audio-tag/
http://www.mohhasbias.com/prak-01-html5-audio-tag/
No comments:
Post a Comment