Praktikum 1 - HTML5 Audio Tag

Tujuan

• Mengenal cara menyajikan file audio menggunakan HTML5

Alat

• Atom 1.3.2

Bahan

• Stance Gives You Balance by Hogan Grip download info

Dasar Teori

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

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

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 untuk button play menggunakan script perintah play()

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.

Hasil Praktikum

HTML

Javascript

HTML

Kesimpulan

• untuk button play menggunakan script perintah play()
• untuk button play menggunakan script perintah pause()
• untuk button play menggunakan script perintah currentTime()

Referensi

• W3C HTML5 Audio Tag
• W3C HTML Audio/Video DOM play() method
• Atom Text Editor