Praktikum 01 – HTML5 Audio Tag

1. Tujuan

Mengenal cara menyajikan file audio menggunakan HTML5

2. Alat

Notepad++

3. Bahan

Stance Gives You Balance by Hogan Grip download info

4. Dasar Teori

HTML adalah singkatan dari HyperText Markup Language yaitu bahasa pemrograman  standar yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web Internet (Browser). HTML dapat juga digunakan sebagai link link antara file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia internet.

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalam pengembangan.

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".

Tag merupakan suatu pasangan yang terdiri dari 2 bagian yang disebut dengan tag awal dan tag akhir. Tag awal dinyatakan dalam bentuk <nama tag> dan tag akhir dinyatakan dalam bentuk </nama tag>. Format penulisan suatu tag adalah sebagai berikut:

<nama tag>...</nama tag>

contoh:

<p>Teks yang akan ditampilkan</p>

Sedangkan atribut adalah suatu karakteristik yang menyertai/ada di dalam suatu tag awal. Tag awal dapat memiliki lebih dari satu atribut yang menyatakan karakteristik dari tag tersebut. Format penulisan atributdalam suatu tag bisa dituliskan seperti ini <tag atribut1="value" atribut2="value" ... > dan ditutup dengan tag akhir yaitu </tag>.

5. Tugas Praktikum

1. Tampilkan file audio yang diberikan ke dalam sebuah halaman web menggunakan HTML5 Audio Tag
2. Buat screenrecord yang menunjukkan percobaan tentang manipulasi audio tag melalui Javascript. Diantaranya adalah penggunaan perintah play(), pause(), dan properti currentTime

6. Petunjuk Praktikum

gunakan <audio></audio> tag untuk menyajikan file mp3
kemudian gunakan tag <source> untuk menentukan file mp3 yang ingin dimainkan

untuk mengontrol audio menggunakan javascript DOM. dimulai dengan memberi ID pada tag audio untuk bisa diaccess menggunakan document.getElementByID(). setelah DOM-nya diperoleh, dapat digunakan perintah play(), pause() untuk fungsi play dan pause. dan bisa menggunakan properti currentTime untuk menggeser slidernya.

7. Hasil Praktikum

berikut adalah hasil percobaan yang telah saya lakukan :

 

percobaan 1 menambahkan audio dengan menggunakan audio tag

percobaan 2 manipulasi audio tag melalui JavaScript

8. Kesimpulan

Dari praktikum di atas, hal-hal yang saya dapatkan adalah untuk menyajikan audio pada HTML5, bisa dengan menggunakan tag<audio></audio>. apabila ingin menyajikan audio dengan menggunakan JavaScript yang harus dilakukan pertama kali yaitu memberikan ID pada tag audio sehingga dapat di akses pada document.getElementtId(). kemudian tuliskan fungsi ".play" untuk fungsi play , ".pause" untuk fungsi pause dan ".currentTime=0" untuk fungsi reset.

9. Referensi

W3C HTML5 Audio Tag
W3C HTML Audio/Video DOM play() method
Atom Text Editor
www.mohhabias.com