pemrograman web: September 2017

OBJEK MULTIMEDIA

A. Objek Multimedia

Multimedia pada halaman web memiliki pengertian penggunaan external file yang berisi data dengan format tertentu pada web. Objek multimedia pada web dapat berupa audio, video, musik, gambar, animasi, maupun file lainnya yang bertujuan untuk membuat web menjadi lebih atraktif, menarik dan mudah digunakan. Terdapat beberapa fungsi dalam pemrograman web yang harus didukung web browser, yaitu sbg berikut.

1. Fungsi dukungan terhadap scripting, agar web browser mampu menjalankan dan menerjemahkan kode yg dituliskan dalam badan program program HTML.

2. Applet merupakan program aplikasi yang dijalankan pada browser untuk mengeksekusi objek multimedia yang disertakan pada halaman web agar berfungsi dan bekerja semestinya. Pada generasi web browser terbaru tag <applet> sudah tidak digunakan lagi tetapi diganti dengan penggunaan tag <object>.

Contoh penggunaan tag <object> :

</object>

3. Plug in, yaitu program tambahan pada web browser untuk menjalankan berbagai file multimedia yang disertakan pada halaman web. Plug in pada setiap browser tidak sama sehingga hasil tampilan, kecepatan, dan model halaman web yang dihasilkan tiap web browser juga berbeda.

4. ActiveX merupakan komponen standar yang disediakan sistem operasi windows untuk mendukung beberapa fungsi dalam web browser khususnya internrt explorer seperti teknik menampilkan kalender. Namun, tidak semua kode program activeX yg ditulis dalam HTML file akan dapat dieksekusi oleh web browser.

B. Objek Gambar

Gambar merupakan salah satu jenis objek multimedia yang sering dijadikan komponen pembentuk dalam halaman web. Fungsinya untuk mempercantik tampilan dan membuat halaman web lebih menarik.

1) JPG/JPEG

JPG atau Joint Photographic Group dan JPEG (Joint Photographic Expert Group) merupakan salah satu jenis file gambar dengan resolusi tinggi pada mode warna RGB, CMYK, dan garyscale. Kelemahan file gambar jenis ini adalah rincian komponen gambar menjadi kabur (blur) karena proses kompresi file yang terlalu banyak.

2) GIF

GIF atau Graphic Interchange Format hanya mampu menyimpan gambar dalam format 8bit. Format GIF biasanya digunakan untuk menampilkan animasi 2 dimensi hasil kompilasi flash. Kelemahan GIF yaitu hanya mampu menampilkan 256 jenis warna sehingga kurang bagus untuk dijadikan ekstensi gambar hasil fotografi kamera dan juga gambar yang dihasilkan memiliki ketajaman yang rendah.

3) PNG

Portable Network Graphic merupakan salah satu bentuk file gambar yang menggabungkan teknik JPG dan GIF yg mampu menyimpan file dengan bit depth hingga 24bit. Kelemahan file gambar berekstensi PNG adalah kapasitas file yang cukup besar dibanding dengan jenis JPG.

4) BMP

Atau Bitmap Image adalah jenis format file yang mamapu menyimpan gambar dengan tingkat kualitas 1 hingga 24bit (warna RGB, grayscale, indexed color, dan bitmap). Kelemahan file jenis ini adalah tidak dapat menyimpan dalam mode alpha channel.

Untuk dapat menampilkan sebuah gambar dengan ekstensi .jpg tau .jpeg, .png atau .gif dapat menggunakan fungsi tag <img src=”lokasi_file”>.

Contoh penggunaan tag tersebut :

<html>

<head>

<title>menampilkan gambar dengan tag img</title>

</head>

<body>

</body>

</html>

1) Scr=”motherboard.jpg”, yaitu merujuk lokasi file gambar motherboard.jpg, dengan file yang berada satu folder dengan file html.

2) Width=”400”, mengatur dimensi lebar gambar sebesar 400 pixel

3) Height=”300”, yaitu mengatur dimensi tinggi gambar sebesar 300 pixel

Contah menampilkan gambar dengan tag <object>

<!—file apasaja.html -->

<html>

<head>

<title>menampilkan gambar dengan tag object</title>

</head>

<body>

</object>

</body>

<html>

1) Data=”motherboard.jpg”, yaitu menunjukkan lokasi file gambar yang dipanggil sebagai objek multimedia pada halaman web.

2) Type=”image/jpg”, perintah type menunjukkan jenis objek yang dipanggil dalam halaman web.

3) Width=”600” untuk menentukan dimensi lebar objek sebesar 600 pixel.

4) Height=”400” yaitu menentukan dimensi tinggi objek sebesar 400 pixel.

C. Objek Suara

Penambahan objek suara pada halaman web dapat dilakukan dengan menambahkan tag <object> dan menuliskan lokasi file dari audio yg akan dimainkan. Pada dasarnya ada 3 kategori format file audio, yaitu :

1) File audio tanpa kompresi, yaitu file dengan ekstensi AIFF, AU, WAV, dan raw header-less PCM.

2) File audio dengan kompresi lossy, seperti vorbis, ACC, ATRAC, MP3, mousepack dan lossy windows media audio (WMA)

3) File audio dengan kompresi lossless, seperti MPEG-4 SLS, MPEG-4 ALS, MPEG-4 DST, TTA, windows media audio lossless (WMA lossless), FLAC, dan WavPack (file name extension WV).

File audio dalam halaman web memiliki beberapa tipe, antara lain sbg berikut.

1) MPEG (Mp3)
Moving Picture Experts Group merupakan format file audio dengan ekstensi .mp3 yang bekerja pada layer tiga dengan kompresi audio mencapai kualitas setara CD stereo, yaitu 16-bit

2) WAV
Waveform Audio Format adalah standar file yang tidak melakukan kompresi terhadap isi audionya.

3) AAC
Advanced Audio Coding merupakan file audio dengan format berbasis MPEG2 dan MPEG4 sebagai pengembangan file mp3.

4) AIFF
Audio Interchange File Format adalah format standar audio tanpa kompresi untuk sistem operasi macintosh.

5) Audio CD
format standar Audio CD memiliki ekstensi file .cda dan merupakan mode audio yang dapat diputar secara langsung dari CD-drive komputer tetapi ketika disalin kedalam hardisk, file audio CD tidak dpt dijalankan.

6) MIDI
Music Instrument Digital Interface merupakan sebuah standar format audio berbagai software dan hardware yg berkembang saat ini. File standar MIDI biasanya digunakan untuk menyimpan hasil intruksi perangkat musik.

7) WMA
Windows Media Audio adalah salah satu jenis format audio yang dikembangkan oleh microsoft

8) OGG
merupakan salah satu jenis format file audio sekaligus video dengan lisensi bebas atau oper source

Ada beberapa syarat yang harus dipenuhi untuk menjalankan audio file dengan script pemrograman html, yaitu sbg berikut.

· Web browser yang digunakan harus versi terbaru, dengan plug in dan extension sudah ter-update

· Pada beberapa kondisi, diperlukan kondisi internet untuk menjalankan program tersebut.

· Sediakan file audio dengan beberapa format tertentu

· Buatlah folder yang menampung file hasil pemrograman tersebut, kemudian pindahkan file audio tersebut kedalam satu folder dengan file HTML.

Terdapat beberapa teknik memasukkan file audio kedalam halaman web menggunakan pemrograman HTML, yaitu sbg berikut.

1) Menggunakan Yahoo Media Player
contoh memainkan musik dengan yahoo media player :

<a href=”1.mp3”>mainkan musik</a>
<script type=”text/javascript” src=http://mediaplayer.yahoo.com/js>
</script>
<!—akhir script-->
</body>
</html>

2) Menggunakan plug in elemen <object>

Langkah yg harus dilakukan sbg berikut.

· Persiapkan file audio yang akan disisipkan pada halaman web

· Salin file tersebut kedalam folder yg sma dengan file HTML yang akan dibuat nantinya

· Ubah nama file tersebut menjadi 1.mp3 untuk memudahkan proses pemanggilannya

· Selanjutnya, buat file HTML dengan script seperti contoh

Contoh memutan file audio dengan elemen object

<!—apasaja.html-->

<html>

<head>

<title>memutar lagu</title>

</head>

<body>

</object>

</body>

</html>

3) Menggunakan elemen <audio>
menggunakan tag <audio> dan menambahkan kode <!DOCTYPE HTML> pada awal program html
contohnya :
<!—fileapasaja.html-->
<! DOCTYPE HTML>
<html>
<head>
<title>memainkan musik dengan audio plugin</title>
</head>
<body>
<!—memanggil elemen <audio>-->
<audio controls=”controls” height=”70px” width=”100px”>
<source src=”1.mp3” type=”audio/mpeg”>
</audio>
<!—akhir elemen <audio>-->
</body>
</html>

4) Menggunakan elemen <embed>

menggunakan tag <embed>
contohnya :
<!-- file apasaja.html>

<html>

<head>

<title>Hidden object</object>

</head>

</object>
</body>

</html>

· Src=”1.mp3” digunakan untuk merujuk lokasi file audio yang dipanggil oleh halaman web ketika diakses oleh web browser.

· Hidden=”true” digunakan untuk menyembunyikan active object yang sedang berjalan sehingga tampak pada halaman web ketika diakses.

· Loop=”true” atribut loop jika bernilai true menyebabkan file audio akan diputar berulang-ulang selama halaman web diakses.

5) Inline Sound
menggunakan tag <bgsound>
contohnya
<!—file apasaja.html>
<!DOCTYPE HTML>
<html>
<head>
<title>memainkan musik dengan bgsound</title>
</head>
<body>
<!—memanggil elemen <bgsound>-->
<bgsound src=”1.mp3” loop=”1”>
<!—akhir elemen <bgsound>-->
</body>
</html>

6) Hyperlink Sound
menggunakan tag <a href=”namafile”>
contonya :
<!—file apasaja.html>
<html>
<head>
<title>hyperlink file audio</title>
</head>
<body>
<a href=”1.mp3”>
putar musik
</a>
</body>
</html>

D. Objek Video

Objek multimedia berupa video merupakan perpaduan antara gambar, gerak, dan suara yang tersusun dalam frame-frame yang membentuk pla tertentu secara tepat. Terdapat beberapa jenis format standar video yang dapat disisipkan pada halaman web, yaitu sbg berikut.

1) MPEG
Moving Picture Expert Group adalah format file audio dan video yang saat ini menjadi standar kompresi file dengan kualitas baik

2) AVI
Audio Video Interleaved merupakan format audio video buatan microsoft dengan kualitas dan ketajaman gambar dan suara lebih baik dari standar audio video ASF

3) MWV
merupakan salah satu standar audio video yang dikeluarkan microsoft untuk komputer berbasis windows

4) MP4
merupakan generasi baru dari MP3 dengan dukungan audio dan video yang lebih baik

5) Real Video
tipe file ini sering digunakan sebagai standar video streaming seperti tv online dsb.

6) QuickTime
merupakan standar format audio video keluaran MacOS untuk Apple

7) 3GP
merupakan salah satu generasi terbaru format file audio video ringan, kecil ukurannya, serta didukung berbagai peranti keras, khususnya telepon genggam

8) Flash
merupakan standar format audio video keluaran macromedia

Terdapat beberapa teknik yang dapat digunakan untuk menjalankan video pada halaman web, seperti berikut.

1) Menggunakan Elemen <img>
contohnya :

<html>
<head>
<title>manjalankan video dengan tag img</title>
</head>
<body>
<img dynsrc=”1.mp4”>
</body>
</html>

2) Menggunakan Elemen <embed>
contoh scriptnya hampir sama dengan yg menggunakan tag img

3) Menggunakan Elemen <video>
contohnya :

<!DOCTYPE HTML>
<html>
<head>
<title>menjalankan video dengan tag video</title>
</head>
<body>
<video width=”420” controls=”controls”>
<source src=”1.mp4” type=”video/mp4”>
<source src=”1.mkv” type=”video/mkv”>
<source src=”1.3gp” type=”video/3gp”>
<source src=”1.flv” type=”video/mp4”>

browser anda belum mendukung HTML5
</video>
</body>
</html>

4) Menggunakan hyperlink
contohnya :

<html>
<head>
<title>menjalankan video dengan hyperlink</title>
</head>
<body>
<a href=”1.mp4”>
mainkan video
</a>
</body>
</html>

5)      Menggunakan elemen <object>
contohnya :
<object data=”1.mp4” type=”video/mp4”>
     <embed erc=”1.mp4” width=”400” height=”320”></embed>
     </object>

6)      Menjalankan aplikasi flash
contoh script memutar animasi flash .swf
<!-- file apasaja.html>
<html>
<head>
<title>memutar animasi swf flash</title>
</head>
<body>
<object classid=”clsid: D27CDB6E-AE6D-11cf-96B8-444553540000” codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6, 0, 29, 0 widht=”170” height=”140”>
                <param name=”movie” value=”kabel.swf”>
                <param name=”quality” value=”high”>
<embed src=”kabel.swf” quality=”high” pluginspage=http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” width=”170” height=”140”>
                </embed></object>
</body>
</html>

Sekian Terimakasih J

pemrograman web

Rabu, 06 September 2017

OBJEK MULTIMEDIA

Arsip Blog