Audio HTML

Ada banyak cara untuk memainkan suara di HTML.

Masalah, masalah, dan solusi

Tidak mudah untuk memainkan audio di HTML!

Anda perlu memahami banyak teknik untuk memastikan file audio Anda dapat dimainkan di semua browser (Internet Explorer, Chrome, Firefox, Safari, Opera) dan semua perangkat (PC, Mac, iPad, iPhone).

Dalam bab ini, CodeW3C.com menyimpulkan masalah dan solusi penyelesaian untuk Anda.

Gunakan plugin

Plugin browser adalah program komputer kecil yang mengembangkan fungsi standar browser.

Plugin memiliki berbagai kegunaan: memainkan musik, menampilkan peta, memverifikasi akun bank, mengendalikan input, dan sebagainya.

Anda dapat menggunakan tanda <object> atau <embed> untuk menambahkan plugin ke halaman HTML.

Tanda ini menentukan kontainer sumber daya (biasanya sumber daya bukan HTML), menurut jenisnya, mereka akan ditampilkan oleh browser atau dipertontonkan oleh plugin eksternal.

Gunakan elemen <embed>

Tanda <embed> menentukan kontainer konten eksternal (tidak HTML) (ini adalah tanda HTML5, yang tidak sah di HTML4, tetapi berfungsi di semua browser).

Kode potongan di bawah dapat menampilkan file MP3 yang disisipkan di halaman web:

Contoh

<embed height="100" width="100" src="song.mp3" />

Coba sendiri

Masalah:

  • Tanda <embed> dalam HTML 4 tidak berlaku. Halaman Anda tidak dapat disahkan melalui HTML 4.
  • Browser yang berbeda mendukung format audio yang berbeda.
  • Jika browser tidak mendukung format file ini tanpa plugin, audio tidak dapat dimainkan.
  • Jika pengguna komputer belum menginstal plugin, audio tidak dapat dimainkan.
  • Jika file ini diubah format, tetap tidak dapat dimainkan di semua browser.

Keterangan:Gunakan <!DOCTYPE html> (HTML5) untuk memecahkan masalah verifikasi.

Gunakan elemen <object>

Tanda <object> tag juga dapat menentukan kontainer konten eksternal (tidak HTML).

Kode potongan di bawah dapat menampilkan file MP3 yang disisipkan di halaman web:

Contoh

<object height="100" width="100" data="song.mp3"></object>

Coba sendiri

Masalah:

  • Browser yang berbeda mendukung format audio yang berbeda.
  • Jika browser tidak mendukung format file ini tanpa plugin, audio tidak dapat dimainkan.
  • Jika pengguna komputer belum menginstal plugin, audio tidak dapat dimainkan.
  • Jika file ini diubah format, tetap tidak dapat dimainkan di semua browser.

Gunakan elemen <audio> HTML5

Elemen <audio> adalah elemen HTML5, yang tidak sah di HTML 4, tetapi berfungsi di semua browser.

Contoh

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
Browser Anda tidak mendukung format audio ini.
</audio>

Coba sendiri

Contoh di atas menggunakan file mp3, sehingga ia berfungsi di Internet Explorer, Chrome, dan Safari.

Untuk membuat audio ini berfungsi di Firefox dan Opera, ditambahkan file jenis ogg. Jika gagal, pesan kesalahan akan ditampilkan.

Masalah:

  • Tanda <audio> dalam HTML 4 tidak berlaku. Halaman Anda tidak dapat disahkan melalui HTML 4.
  • Anda harus mengkonversi file audio ke format yang berbeda.
  • Elemen <audio> tidak berfungsi di browser lama.

Keterangan:Gunakan <!DOCTYPE html> (HTML5) untuk memecahkan masalah verifikasi.

Pemecah HTML terbaik

Contoh

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

Coba sendiri

Contoh di atas menggunakan dua format audio yang berbeda. Elemen <audio> HTML5 akan mencoba memainkan audio dengan format mp3 atau ogg. Jika gagal, kode akan kembali mencoba elemen <embed>.

Masalah:

  • Anda harus mengkonversi audio ke format yang lain.
  • Elemen <audio> tidak dapat divalidasi melalui HTML 4 dan XHTML.
  • Elemen <embed> tidak dapat divalidasi melalui HTML 4 dan XHTML.
  • Elemen <embed> tidak dapat kembali untuk menampilkan pesan kesalahan.

Keterangan:Gunakan <!DOCTYPE html> (HTML5) untuk memecahkan masalah verifikasi.

Cara paling mudah untuk menambahkan audio ke situs web

Bagaimana cara paling mudah untuk menambahkan audio ke halaman web?

Pemutar media Yahoo pasti termasuk diantaranya.

Pemakaian pemutar media Yahoo adalah cara yang berbeda. Anda hanya perlu membiarkan Yahoo melakukan pekerjaan pemutaran lagu.

Itu dapat memainkan format mp3 dan sejumlah format lainnya. Dengan baris kode sederhana, Anda dapat menambahkannya ke halaman web, dengan mudah mengubah halaman HTML menjadi daftar putar profesional.

Pemutar Media Yahoo

Contoh

<a href="song.mp3">Main Suara</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
</script>

Coba sendiri

Pemakaian pemutar media Yahoo adalah gratis. Untuk menggunakannya, Anda perlu memasukkan kode JavaScript ini ke bagian bawah halaman web Anda:

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

Lalu cukup menempatkan tautan berkas MP3 ke HTML Anda, JavaScript akan otomatis membuat tombol pemutar untuk setiap lagu:

<a href="song1.mp3">Main Lagu 1</a>
<a href="song2.mp3">Main Lagu 2</a>
...
...
...

Pemutar Media Yahoo menyediakan tombol pemutar kecil bagi pengguna Anda, bukan pemutar yang penuh. Namun, saat Anda mengklik tombol ini, pemutar yang penuh akan muncul.

Perhatikan, pemutar ini selalu berdampingan di dasar bingkai jendela. Hanya kliknya, dan ia dapat dislipkan keluar.

Menggunakan tautan

Jika halaman web mengandung tautan ke berkas media, sebagian besar peramban akan menggunakan 'aplikasi bantuan' untuk memainkan berkas.

Kode potongan berikut menunjukkan tautan ke berkas mp3. Jika pengguna mengklik tautan, peramban akan meluncurkan 'aplikasi bantuan' untuk memainkan berkas ini:

Contoh

<a href="song.mp3">Mainkan suara</a>

Coba sendiri

Suara yang disisipkan

Ketika Anda menempatkan suara di halaman web atau sebagai bagian dari halaman web, disebut suara yang disisipkan.

Jika Anda berencana menggunakan suara yang disisipkan di aplikasi web, Anda harus menyadari banyak orang yang merasa suara yang disisipkan memancing. Juga perhatikan, pengguna mungkin telah menonaktifkan opsi suara yang disisipkan di browser.

Kami sarankan hanya menempatkan suara di tempat pengguna ingin mendengar suara yang disisipkan. Contoh yang positif adalah, saat pengguna membutuhkan mendengar rekaman dan mengklik tautan, halaman akan dibuka dan rekaman akan dimainkan.

Tag Multimedia HTML 4.01

Tag Deskripsi
<applet> Tidak disarankan. Definisi applet yang disisipkan.
<embed> Tidak disarankan di HTML4, diijinkan di HTML5. Definisi objek yang disisipkan.
<object> Definisi objek yang disisipkan.
<param> Definisi parameter objek.

Tag Multimedia HTML 5

Tag Deskripsi
<audio> Tag mendefinisikan suara, seperti musik atau aliran audio lainnya.
<embed> Tag mendefinisikan konten yang disisipkan, seperti plugin.