Belajar HTML (19): Menyematkan File Multimedia pada Halaman Web

Kalau sebelumnya kemaren kita buat teks yang bisa berjalan menggunakan marquee, kali ini kita akan memasukkan file multimedia ke dalam halaman web. Masih tetap dalam bahasa standar web yaitu HTML.

Tidak semua file multimedia yang akan kita sematkan di halaman web. Kita hanya akan mencoba tutorial untuk 2 jenis file multimedia saja, yaitu audio dan video. Teknologi yang digunakan adalah HTML5.

Bagaimana ceritanya? Tentu Anda pasti pernah mendapati sebuah web yang ketika dibuka memperdengarkan suara, entah apapun itu suaranya. Biasanya sih berupa lagu atau apa lah begitu. Terkadang kita lihat ada player atau pemutar lagu tersebut, kadang tidak ada. Ada juga yang tidak diputar sebelum kita klik tombol play. Paling banyak adalah yang ketika web diakses langsung memutar suara secara otomatis. Demikian juga dengan video, sama.

Audio

Untuk memuat dan memutar file audio, kita gunakan tag <audio> dengan struktur dasar seperti ini:

<audio>
   <source src="nama_file_audio.ext">
</audio>

Nah pada tag <audio> ini ada beberapa atribut yang bisa digunakan, saya masukkan 3 saja. Lihat tabel.

AtributKeterangan
controlsuntuk menampilkan playernya
loopmengaktifkan pengulangan jika durasi audio sudah berakhir
autoplaylangsung memutar audio secara otomatis tanpa mengklik tombol play

Ayo kita coba latihannya, buat file baru menggunakan editor kesayangan Anda, atau bisa juga dengan melakukan save-as dari file-file latihan sebelumnya.

Simpan dulu filenya dengan nama 44-html-audio.html, kemudian sesuaikan kodenya agar menjadi seperti di bawah ini:

<!DOCTYPE html>
<html>
<head>
   <title>Audio</title>
</head>
<body>
   <h2>Memutar file audio</h2>
   <audio controls>
      <source src="habib_syech_almadad.mp3">
      Browser Anda tidak mendukung audio.
   </audio>
</body>
</html>

Sebelum dicoba, pastikan dulu file audionya ada ya, dan diletakkan pada folder yang sama dengan file latihan ini. Silakan ganti nama file audionya sesuai yang Anda punya. Setelah dijalankan hasilnya akan menampilkan player, klik tombol play dan dengarkan audionya 😎

Tampilan hasilnya punya saya seperti gambar-gambar berikut ini, saya gunakan 4 browser agar bisa dilihat perbedaan playernya.

Selanjutnya →

Halaman : 1 2 3

21 Responses

  1. Kamelia berkata:

    Terimakasih telah membuat artikel ini dengan artikel ini saya bisa belajar tentang html multimedia dengan mudah terutama sangat mudah sekali dipahami dengan adanya artikel ini.perkenalkan nama saya kamelia

  2. Mozza Muthia Rahman berkata:

    Terima kasih untuk artikel nya bang, artikel nya sangat bermanfaat dan berkat artikel abang ini saya lebih memahami tentang html multimedia..
    Semangat terus bikin artikel nya ya bang, sukses selalu..
    Perkenalkan bang nama saya Mozza Muthia Rahman dari kampus atma luhur

  3. gusti dinda berkata:

    Terimakasih kak atas ilmunya sangat bermanfaat dalam mengerjakan tugas saya, sukses terus dalam berkarya, tetap semangat dalam membagi ilmunya kak, perkenal kan nim saya 1922500129, nama saya gusti dinda permata dari kelompok SI2J

  4. JEFFRY H SUFRYANTO SIMARMATA berkata:

    Studi Kasus Aplikasi Desktop terhubung ke Database

    1. Asfarezhan. (Studi kasus : Aplikasi Pengolahan Data Guru dan Karyawan pada SMP ST Santa Theresia Pangkalpinang )
    2. Amirah . (Studi kasus : Badan Keuangan Daerah)
    3. Ardila. (Studi kasus : Bank Mandiri)
    4. Rinal ( Studi kasus : Pinjaman keuangan Nasabah Koperasi Karunia pada PT TASPEN (Persero) Pangkalpinang.
    Berbasis dekstop

    5. Sintia ( studi kasus : analisa dan perancangan sistem administrasi informasi kepegawaian pada kantor kecamatan gabek pangkalpinang berbasis dekstop
    6.Sri agustina(studi kasus : Analisis dan perancangan sistem informasi akademik pada madrasah tsanawiyah negeri jebus berbasis dekstop)
    7. Noviasari ( analisa dan implementasi sistem informasi pengarsipan kontrak pada dinas pekerjaan umum kota pangkalpinang)
    8. Arvina Destiyani (studi kasus : Analisa dan perancangan sistem informasi penanganan klaim nasabah asuransi jiwa pada PT. Ala financial pangkalpinang
    9. Tri Utami ( pemanfaatan sistem informasi berbasis web dalam pelayanan surat dikantor kelurahan bukit sari pangkalpinang)
    10.Fenisa Indah Sari ( Rancang bangun sistem informasi akademik berbasis Web pada SDN 32 Sungaliat menggunakan model FAST)
    11. Adri firmansyah (Analisa dan perancangan sistem informasi pengelolaan surat pada dinas pendidikan kota pangkal pinang)
    12. Edo renaldi (analisa dan perancangan sistem informasi di unit donor darah pmi berbasis website dikota pangkal pinang)
    13. Gusti dinda (Analisis dan perancangan sistem informasi gerakan terpadu Pusat kesehatan hewan kabupaten Bangka berbasis website)
    14. Shofi Rachmawati ( Analisa Dan perancangan sistem informasi inventaris Dan persediaan barang berorientasi objek di Hotel Jati Wisata Pangkalpinang).
    15. Muhammad Jainuri (
    Analisis dan perancangan sistem informasi pengelolaan inventaris barang berbasis website pada kantor inspektorat provinsi kota Pangkalpinang)

    Lanjutkan

  5. Ardila Yunita berkata:

    Hallo kak. Terimakasih ya kak artikel nya bagus mudah dipahami bagi saya yang baru belajar tentang HTML. Artikel nya juga sangat membantu dalan memenuhi tugas kuliah saya kak. Semoga dapat memberikan artikel yang bermanfaat lainnya ya kak.Terimakasih kak sukses selalu . Perkenalkan Saya Ardila Yunita, NIM 1922500096

  6. Claudio berkata:

    Terimah kasih atas info di atas sedikit saran talong perbanyak materi diatas karena materi terlalu singkat nama claudio khelvin

  7. Indah lestari berkata:

    kereeennnnnnnn
    min seringg sering ya buat artikel seperti ini , ga tau kenapa kaloo baca”artikel yang admin buat jadi semangat belajarrrr .. padahal banyak artikel”lainnya tapi aku pilih artikel ini karnaa lengkap bgt ..
    semngat terus ya min buat artikel”lainnya .. terus berkarya πŸ‘
    perkenalkan namaku indah lestari.

  8. Gita lestari berkata:

    Terimakasih telah membuat artikel ini, artikelnya bagus, sangat membatu saya yang bru mempelajari dasar-dasar HTML. Sangat membatu saya untuk memperdalam ilmu-ilmu dalam mempelajari HTML, semoga kedepanya bisa lebih bgus lagi dan memperbanyak pmbelajarannya. Perkenalkan nama saya GITA LESTARI.

  9. wiranto berkata:

    Terima kasih kak website ini sangat bermanfaat untuk saya dengan penjelasannya. Saya merasa senang dapat ilmu tentang multimedia . Materi yang disampaikan oleh kakak sangat mudah dimengerti. trus webnya bagus,singkat jelas & mudah di pahami terus berkreasi kak .
    Saran saya tambahkan gambar dong kak biar website nya lebih menarik untuk di lihat..
    Salam kenal kak nama saya Wiranto( Si2K), kunjungi juga dong website kampus kami… SALAM SUKSES…

  10. famzi abel berkata:

    terimah kasih ini sangat bagus untuk di baca dan mudah di pahami semogah atmin nya sukses trus #nama famzi abel parlindungan #nim1922500207 #kelompok si2k #matkul DPW

  11. Jeffry H Sufryanto Simarmata berkata:

    elamat malam kak. Terima kasih kak artikel pembelajarannya kak. Dengan Artikel pembelajaran kakak, Saya Yang sebagai pemula bisa mengerti sedikit walaupun belum semua ya. Bisa menambah ilmu saya di kampus. tetap Berkarya terus kak πŸ’ͺπŸ’ͺ. Perkenalkan saya
    Jeffry h SUFRYANTO SIMARMATA
    NIM 1922500047
    KELOMPOK S12J
    Terima kasih kakπŸ™πŸ™

  12. Fira Karunia berkata:

    Terimakasih informasinya kak, dengan membaca artikel yang kakak buat ini saya bisa belajar tentang html, saya fira karunia 1725500127 . saya seorang mahasiswi dari kampus isb atmaluhur, kami sedang mempelajari html dengan audio, kunjungi website kampus saya juga kak untuk bertukar informasi : www dot atmaluhur dot ac dot id
    Terus berkarya kak. Ditunggu artikel lainnya

  13. Egi Mulyaningsih berkata:

    Terimakasih untuk artikel nya kak, artikel ini sangat membantu saya dan sangat bermanfaat buat saya. Ditunggu artikel-artikel selanjutnya kak.
    Saya Egi Mulyaningsih, Nim : 2022500156 , mahasiswa ISB Atma Luhur.

  14. Cindy Lawrenza berkata:

    Hello! I know this article was made on 2018 and i’m two years late or more than that to comment, but thank you. thank you very much for this article, your style of language is understandable, especially for me which is i’m still a beginner. Now i can learn to put media i wanted whenever it audio or document, i know this is simple but seeing HTML can do this is wholesome. Thanks and please keep share articles or tutorial about this, many people and including me are happy to read and learn. anyway just wanted to introduce myself, I’m Cindy Lawrenza. Much kudos for you!

  15. Tryi aprileani berkata:

    Terima kasih kak website ini sangat bermanfaat dan menarik untuk saya dengan penjelasannya. Saya merasa senang dapat ilmu tentang multimedia . Materi yang disampaikan sangat mudah dimengerti. trus webnya bagus,singkat jelas & mudah di pahami terus berkreasi kak . Perkenalkan nama saya Tri aprileani dengan Nim 2022500159, jngn lupa kunjungi website kampus kami juga. Terimaksih πŸ™‚

  16. Tri aprileani berkata:

    Terimakasih kak atas ilmunya sangat bermanfaat dan menarik bagi kami dalam mengerjakan tugas, sukses terus , tetap semangat dalam membagi ilmunya kak, perkenal kan nim saya 2022500159, nama saya Tri aprileani jangan lupa kunjungi website kami.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *