Thursday, May 26, 2016

Praktikum 11 - Google Fonts

Tujuan

Belajar menggunakan external font dari Google Fonts

Alat

Text Editor
Browser

Bahan

spritesheet.png
spritesheet.css

Dasar Teori

Google Font adalah salah satu layanan yang disediakan Google untuk memudahkan web developer dalam menghasilkan desain yang menarik dengan meyediakan font-font gratis. Fitur ini dapat anda akses pada alamat: https://www.google.com/fonts.
Google menyediakan 3 cara, yakni dengan menggunakan tag <link>, perintah CSS @import, dan dengan JavaScript. Ketiga cara ini relatif tidak terlalu berbeda dari cara penggunaanya. Anda tinggal copy paste kode tersebut ke halaman HTML. Untuk kali ini, saya akan menggunakan cara dengan tag <link>.

Hasil Praktikum

Kesimpulan

Pada praktikum ini digunakan perintah CSS @import untuk menghubungkan google fonts dengan webUntuk jenis font yang digunakan disini adalah Open Sans Italic.

Praktikum 10 - Membuat Ads Banner [Part 2]

Tujuan

Belajar membuat Ads Banner berbasis HTML5.

Alat

Text Editor
Browser

Bahan

spritesheet.png
spritesheet.css

Dasar Teori

CSS linear-gradient adalah sebuah visual effect yang dihasilkan oleh perubahan dan pergeseran warna (gradasi) diantara 2 warna atau lebih. Arah gradasi atau perubahan warna ini dapat terjadi secara vertikal (dari atas ke bawah atau sebaliknya) dan secara horizontal (dari kiri ke kanan atau sebaliknya).

Teknik horizontal centering di CSS merupakan penggunaan beberapa properti untuk menyelaraskan elemen horizontal. Beberapa properti yang digunakan seperti margin, position dan lain sebagainya.

Tugas Praktikum

tirukan petunjuk praktikum yang diberikan

Petunjuk Praktikum

1. Mengaplikasikan CSS Linear Gradient


2. Menambahkan sprite berikutnya



3. Me-resize sprite menggunakan CSS


Hasil Praktikum



Kesimpulan

Untuk mendapat gambar yang berlayer pada spritesheet kita bisa menggunakan css linear-gradient untuk mengatur gradasi warna yang sesuai dengan spritesheet. Kemudian apabila kita ingin me-resize spritesheet menggunakan css, kita cukup mengatur ukuran div dengan merubah nilai pada width dan height dan kemudian mengatur letak posisi gambar dan ukuran dari background yang diinginkan.

Referensi

Thursday, May 12, 2016

Praktikum 8 – Membuat Ads Banner

Tujuan
Belajar membuat Ads Banner berbasis HTML5.

Alat
Codepen
Browser

Bahan
spritesheet.png
spritesheet.css

Dasar Teori
Banner ads adalah bentuk iklan yang dipakai di jaringan Internet. Bentuk iklan daring ini biasanya merupakan bagian dari suatu halaman web yang dipakai untuk menarik perhatian penjelajah supaya mengunjungi situs web yang dimaksud. Spanduk ini biasanya dibuat menggunakan format gambar (JPG, GIF, PNG), skrip Java, dan objek multimedia lainnya. Spanduk modern bahkan sudah disertai suara dan animasi sehingga terlihat lebih menarik. Ada berbagai ukuran yang dipakai, mulai dari yang sangat kecil, melebar, memanjang, hingga yang melintang.

Tugas Praktikum
tirukan petunjuk praktikum yang diberikan

Petunjuk Praktikum
1.Membuat container

2. Menambahkan 2 aset


Hasil Praktikum

Friday, April 22, 2016

Praktikum 7 - CSS Spritesheet

Tujuan
Mengenal dan membuat CSS Spritesheet dari kumpulan gambar.

Alat
Codepen

Bahan
royalti free image

Dasar Teori

CSS Sprite
Teknik css sprite adalah teknik untuk menggabungkan beberapa images menjadi satu supaya dalam pemanggilan images hanya satu yang dipanggil meski yang digunakan adalah images yang berbeda sekaligus mengurangi permintaan http://. 
Untuk membuat CSS Sprite, yang harus diperhatikan adalah posisi gambar (background-position), ukuran gambar (width - height), dan pengulangan gambar (background-repeat). Posisi dan ukuran gambar nantinya akan menentukan peletakan gambar, sedangkan pengulangan gambar akan berpengaruh terhadap tampilan gambar yang dihasilkan. Untuk itu gunakan CSS Sprite ini pada gambar - gambar yang tidak diulang (no-repeat)

Kelebihan CSS Sprite
Menggunakan css sprite bisa  mempercepat  dalam loading gambar karena dengan meletakkan beberapa gambar dalam 1 file gambar, dapat menghemat proses request gambar ke server. Keuntungan yang lainnya, dan merupakan keuntungan utama dari penggunaan CSS sprite adalah penggunaan bandwidth akan menjadi semakin hemat

Tugas Praktikum




Kesimpulan

Wednesday, April 13, 2016

Praktikum 6 – Intro to GreenSock Animation Platform

TUJUAN
Mengetahui cara merekam gambar pada browser dengan menggunakan HTML dan Javascript

ALAT
Codepen


BAHAN
sembarang image


DASAR TEORI

                          ------------------x------------------

TUGAS PRAKTIKUM
Menulis kembali demo yang disediakan oleh GSAP JumpStart


HASIL PRAKTIKUM
Pada praktikum ini saya menggunakan Codepen bukan jsFiddle.
Screenrecord:


1. Basic Tween

2. Easing

3. Delay

4. Animate Multiple Properties

5. From Tweens

6. Relative Tweens

7. Multiple Targets

8. Tween Reference

9. Control Playbacks

10. Repeat

Thursday, April 7, 2016

Praktikum 5 - Camera Capture with HTML 5

Tujuan
Mengetahui cara merekam gambar pada browser dengan menggunakan HTML dan Javascript


Alat
Notepad ++


Dasar teori
Caman js
CamanJS kepanjangan dari  Canvas Manipulation JavaScript adalah manipulasi kanvas dalam Javascript. Ini adalah kombinasi dari interface yang sederhana digunakan dengan teknik editing gambar / kanvas yang canggih dan efisien.
CamanJS sangat mudah untuk memperluas atau memberikan filter baru dan plugin, dan dilengkapi dengan beragam fungsi editing gambar. Camanjs adalah library independen yang bekerja baik dalam NodeJS dan browser.

Tugas Praktikum 
Menyajikan gambar dan tombol untuk mengubah filter gambar.



Hasil Praktikum


Camera capture akan berhasil dijalankan dengan catatan dibuka dengan menggunakan alamat "https://" didepannya.. apabila link diatas tidak berhasil, silahkan kunjungi lihat demo

Thursday, March 31, 2016

Praktikum 4 - Image Editor dengan CamanJs

Tujuan
Mengenal cara menyajikan file gambar dilengkapi button filter menggunakan camanjs.

Alat
Notepad ++

Bahan

  • Jquery
  • Bootstrap
  • Camanjs

Dasar teori
Caman js
CamanJS kepanjangan dari  Canvas Manipulation JavaScript adalah manipulasi kanvas dalam Javascript. Ini adalah kombinasi dari interface yang sederhana digunakan dengan teknik editing gambar / kanvas yang canggih dan efisien.
CamanJS sangat mudah untuk memperluas atau memberikan filter baru dan plugin, dan dilengkapi dengan beragam fungsi editing gambar. Camanjs adalah library independen yang bekerja baik dalam NodeJS dan browser.

Tugas Praktikum 
Menyajikan gambar dan tombol untuk mengubah filter gambar.



Hasil Praktikum

Thursday, March 17, 2016

Praktikum 3 - Video Tag with jQuery Button and Slider

Tujuan
Mengenal cara menyajikan file video dilengkapi control dan slider menggunakan HTML5, jquery ui dan bootstrap

Alat 
Notepad ++

Bahan 
· Jquery UI
· Bootstrap 

Dasar Teori
Css 
Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Bootstrap 

Bootstrap adalah sebuah framework css yang dapat digunakan untuk mempermudah membangun tampilan web. Bootstrap pertama kali di kembangkan pada pertangahan 2010 di Twitter oleh Mark Otto dan Jacob Thornton. Saat ini Bootstrap dikembangkan secara open source dengan lisensi MIT.

Jquery UI 
JQuery UI adalah plugin komponen user interface (hal-hal yang berhubungan dengan antarmuka pengguna) berupa interaksi, widget berfitur lengkap dan efek animasi yang berada di bawah framework JQuery.Setiap komponen dibangun sesuai dengan arsitektur kerja JQuery (menemukan sesuatu, kemudian memanipulasinya) dan memiliki kemampuan untuk menerima tema yang bermacam-macam sesuai dengan keperluan desain Slider, button, dialog boxkotak dialog/modal, accordion, tooltip, tabs, dihasilkan dari jquery ui.

Tugas Praktikum 
Membuat dan mendesain tombol, slider video di web

Praktikum 2 – HTML5 Costume Audio Tag

Tujuan
Mengenal cara menyajikan file audio dilengkapi control dan slider menggunakan HTML5, jquery ui dan bootstrap

Alat 
Notepad ++

Bahan 
· Jquery UI
· Bootstrap 

Dasar Teori
Css 
Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Bootstrap 

Bootstrap adalah sebuah framework css yang dapat digunakan untuk mempermudah membangun tampilan web. Bootstrap pertama kali di kembangkan pada pertangahan 2010 di Twitter oleh Mark Otto dan Jacob Thornton. Saat ini Bootstrap dikembangkan secara open source dengan lisensi MIT.

Jquery UI 
JQuery UI adalah plugin komponen user interface (hal-hal yang berhubungan dengan antarmuka pengguna) berupa interaksi, widget berfitur lengkap dan efek animasi yang berada di bawah framework JQuery.Setiap komponen dibangun sesuai dengan arsitektur kerja JQuery (menemukan sesuatu, kemudian memanipulasinya) dan memiliki kemampuan untuk menerima tema yang bermacam-macam sesuai dengan keperluan desain Slider, button, dialog boxkotak dialog/modal, accordion, tooltip, tabs, dihasilkan dari jquery ui.

Tugas Praktikum 
Membuat dan mendesain tombol, slider audio di web

Hasil Praktikum

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Costume Audio</title>
    <link rel="stylesheet" href="style.css" type="text/css"> 
    <link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>  
</head>
<body>
<div class="container">
<div class="row">
 <div class="col-md-4"></div>
 <div class="col-md-4">
<div id="player">
<h2 class="text-center">Audio Player</h2>
<audio id="music" autoplay loop>
<source src="s001_al-fatiha.mp3" type="audio/mpeg">
<p>Audio gagal dijalankan pada browser anda.</p>
</audio>
</br>
<div id="progressbar"></div><br>
</br>
<button type="button" class="btn btn-info btn-circle" onclick="document.getElementById('music').play()"><i class="fa fa-play"></i></button>
<button type="button" class="btn btn-info btn-circle" onclick="document.getElementById('music').pause()"><i class="fa fa-pause"></i></button>
<button type="button" class="btn btn-info btn-circle" onclick="document.getElementById('music').currentTime=0"><i class="fa fa-repeat"></i></button>
<button type="button" class="btn btn-info" id="waktu">00:00</button>
</i><div id="volume"></div><br>
</div>
 </div>  
 <div class="col-md-4"></div>
</div>
</div>
</body>
</html>
<script>
$(function() {

  var $aud = $("#music"),
      $pp  = $('#waktu'),
      $vol = $('#volume'),
      $bar = $("#progressbar"),
      AUDIO= $aud[0];
  
  AUDIO.volume = 0.75;
  AUDIO.addEventListener("timeupdate", progress, false);
  
  function getTime(t) {
    var m=~~(t/60), s=~~(t % 60);
    return (m<10?"0"+m:m)+':'+(s<10?"0"+s:s);
  }
  
  function progress() {
    $bar.slider('value', ~~(100/AUDIO.duration*AUDIO.currentTime));
    $pp.text(getTime(AUDIO.currentTime));
  }

  $vol.slider( {
    value : AUDIO.volume*100,
    slide : function(ev, ui) {
      $vol.css({background:"hsla(180,"+ui.value+"%,50%,1)"});
      AUDIO.volume = ui.value/100; 
    } 
  });
   
  $bar.slider( {
    value : AUDIO.currentTime,
    slide : function(ev, ui) {
      AUDIO.currentTime = AUDIO.duration/100*ui.value;
    }
  });
  
  $pp.click(function() {
    return AUDIO[AUDIO.paused?'play':'pause']();
  });
  
});

</script>




Referensi
http://jsbin.com/IYUxImU/4/edit?html,css,js,output

Monday, March 7, 2016

Praktikum 1 - HTML5 Audio Tag

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:
  1. Fitur baru harus didasarkan pada HTML, CSS, DOM , dan JavaScript. 
  2. Mengurangi kebutuhan untuk plugin eksternal (seperti Flash).
  3. Penanganan kesalahan yang lebih baik.
  4. Lebih banyak markup untuk menggantikan scripting.
  5. HTML5 merupakan perangkat mandiri.
Fitur baru dalam 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 logo
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 :
Audio HTML5 Supports
NOTIPE AUDIOBROWSER
1OGG vorbisGoogle Chrome | Firefox | Opera | Safari
2WAV pcmGoogle Chrome | Firefox | Opera | Safari
3MP3Google Chrome | Firefox | Internet Explorer | Safari
4AACGoogle Chrome | Firefox | Internet Explorer | Safari
5WEBM vorbisGoogle Chrome | Firefox | Opera
6OGG opusGoogle 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

  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

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.

Referensi