Cara Menampilkan Audio dengan HTML5

Assalamu'alaikum Warahmatullahi Wabarakatuh..
Logo HTML5
     Pada artikel kali ini kita akan membahas salah satu fitur baru dari HTML5, yaitu cara menambahkan audio pada sebuah web. Pada versi HTML sebelumnya, untuk menambahkan audio di web maka kita harus menggunakan plug-in tambahan seperti Flash Player atau sejenisnya. Tapi di HTML5, kita tidak perlu menggunakan plug-in tambahan seperti itu.
     Untuk menambahkan audio menggunakan HTML5, kita cukup menghafalkan 2 tag saja yaitu <audio> dan <source>. Tag ini bisa dijalankan di Internet Explorer 9 keatas, Mozilla Firefox, Opera, Google Chrome, Safari, dan browser lainnya yang mendukung HTML5. 
     Oke, langsung saja ke pokok pembahasan. Bentuk paling sederhana-nya seperti ini:

Penjelasan:

     Coba perhatikan pada tag audio, kita sengaja menambahkan atribut controls. Fungsinya adalah untuk menampilkan audio control seperti play, pause, memperbesar volume dan mengecilkan volume suara.
     Teks yang ada diantara <audio> dan </audio> akan muncul jika browser yang dipakai tidak mendukung tag audio.
     Tag <source> digunakan untuk memanggil file audio yang akan kita jalankan. Tag <source> ini memiliki 2 atribut yaitu src="" yang bisa diisi dengan url file audio kita, dan atribut type="" bisa diisi dengan tipe audio kita. Fitur <audio> ini mendukung 3 format file audio yaitu: mp3, wav, dan ogg. Untuk nilai dari atribut type=""-nya kita bisa menyesuaikan dengan melihat tabel dibawah:

Format File Nilai untuk atribut type
MP3 audio/mpeg
Wav audio/wav
Ogg audio/ogg
Sekedar buat contoh, disini saya punya sebuah folder yang isinya seperti ini:
Screenshot Folder
Dan kode HTML dari audio.html seperti ini:
Jika file audio.html tadi dibuka di Firefox/ browser yang sudah mendukung HTML5, maka hasilnya adalah seperti ini:
Screenshot jika dibuka di Firefox
Tapi jika dibuka di browser yang belum mendukung HTML5 (disini saya buka pake Internet Explorer 8), maka hasilnya seperti ini:
Screenshot jika dibuka browser yang tidak mendukung HTML5

Atribut yang dimiliki <audio>

Untuk memaksimalkan fungsinya, tag <audio> ini juga memiliki beberapa atribut yang bisa kita pakai yaitu:
  • controls
  • Digunakan untuk menampilkan audio control seperti yang sudah dipakai diatas. Untuk memastikannya, silahkan anda coba praktekan script HTML diatas kemudian coba hapus atribut controls -nya.
  • autoplay
  • Digunakan jika kita ingin audio yang kita buat bisa memutar secara otomatis tanpa meng-klik tombol play.
  • loop
  • Jika kita menggunakan atribut ini, ketika audio/musik telah selesai diputar maka audio akan memulai kembali dari awal secara otomatis.
Walaupun masih ada beberapa atribut lagi, tapi menurut saya ke-3 atribut ini lah yang paling penting untuk diketahui.
Biar lebih faham lagi, coba praktekan semua tutorial ini dan cari lagi referensi lainnya di Internet.
Sekian dari saya.
Kurang dan lebihnya mohon dimaafkan.
Wassalamu'alaikum Warahmatullahi Wabarakatuh..

Mengenal Perulangan (Looping) di PHP Part 2: while dan do while

 Assalamu'alaikum Warahmatullahi Wabarakatuh..
     Oke, setelah beberapa waktu yang lalu saya pernah membahas perulangan menggunakan "for dan foreach" di PHP, kali ini kita akan membahas perulangan menggunakan "while dan do while". Artikel ini merupakan lanjutan dari artikel sebelumnya, jadi buat kawan-kawan yang tiba-tiba nyasar kesini ada baiknya membaca artikel ini terlebih dahulu. Bagaimana sih cara menggunakan while dan do while terus apa perbedaan diantara keduanya? Simak terus artikel ini yukk..

1. Perulangan while 

     Perulangan menggunakan while akan mengeksekusi kode yang berada didalam kurung kurawal jika kondisi bernilai True. Syntax-nya seperti ini:

<?php
while (kondisi) {
    // Kode yang akan dieksekusi
    // Kode yang disimpan disini akan terus dieksekusi selama kondisi bernilai True
}
?>
Dalam bentuk flowchartnya seperti ini:

Contoh implementasinya seperti ini:

<?php
$a=1;
while ($a < 10) {
    echo "Ini angka " . $a . "<br>";
    $a++;
}
?>
     Pada script diatas, pertama-tama kita membuat variabel $a yang isinya adalah 1 ($a=1). Kemudian perulangan while akan terus dilakukan selama nilai dari $a kurang dari 10 ($a < 10). Dan $a akan ditambah 1 setiap proses perulangan berjalan ($a++). Sehingga jika script diatas dijalankan, maka akan mengeluarkan output seperti berikut:

Ini angka 1
Ini angka 2
Ini angka 3
Ini angka 4
Ini angka 5
Ini angka 6
Ini angka 7
Ini angka 8
Ini angka 9
Sudah cukup jelas kan? Jika masih belum jelas silahkan untuk bertanya di kolom komentar..

2. Perulangan do while 

     Perulangan menggunakan metode ini HAMPIR sama dengan perulangan menggunakan while. Syntax-nya seperti ini:

<?php
do {
    // Kode yang akan dieksekusi
} while (kondisi);
?>
     Sebagai contoh, kita akan membuat hal yang sama dengan contoh pada perulangan menggunakan while diatas. Scriptnya seperti berikut:

<?php
$a=1;
do {
    echo "Ini angka " . $a . "<br>";
    $a++;
} while ($a <= 10);
?>
     Jika script diatas dijalankan, maka akan menghasilkan output yang sama dengan contoh pertama tadi. Tapi walaupun hasilnya sama, ternyata cara kerjanya berbeda. Biar lebih jelas tentang cara kerjanya, sengaja saya sediakan flowchartnya:

    Setelah melihat flowchart diatas, sudah jelas ternyata perbedaan antara while dan do while bukan hanya terletak pada cara penulisan saja, tapi ada perbedaan mendasar yang membedakan antara while dan do while ini. Apakah itu? Perulangan dengan while akan memeriksa terlebih dahulu kondisi, jika bernilai True maka statement yang berada didalam kurung kurawal akan dijalankan, tapi jika kondisi bernilai false maka script tidak akan dijalankan sama sekali. Sedangkan jika kita menggunakan do while, maka statement akan terlebih dahulu dieksekusi satu kali, kemudian sistem akan mengecek apakah kondisi bernilai true atau false. Jika bernilai true maka statement akan dieksekusi terus menerus sampai kondisi bernilai false, jika bernilai false maka statement tidak akan diulangi lagi (jadi script hanya dieksekusi 1 kali). Untuk membuktikan hal tersebut, kita coba script dibawah:

<?php
$a=1;
do {
    echo "Ini angka " . $a . "<br>";
    $a++;
} while ($a<1);
?>
    Kondisi pada script diatas bernilai false (1 lebih kecil dari 1), tapi jika script diatas dijalankan maka akan menghasilkan output seperti berikut:

Ini angka 1
     Mengapa demikian? karena seperti yang sudah saya sebutkan diatas, pertama statement yang ada didalam kurung kurawal akan dieksekusi terlebih dahulu, kemudian jika kondisi bernilai true maka statemenent akan terus dieksekusi sampai kondisi bernilai false.
Sepertinya artikel kali ini dicukupkan sekian,
Terima kasih sudah berkunjung,
Semoga bermanfaat,
Wassalamu'alaikum Warahmatullahi Wabarakatuh..

HTML

More »

PHP

More »