Audio HTML

Ada banyak cara untuk memainkan suara di HTML.

Masalah, masalah, dan solusi

Tidak mudah untuk memainkan audio di HTML!

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

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

Gunakan plugin

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

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

Dapat digunakan 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 plugin eksternal.

Gunakan elemen <embed>

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

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

Contoh

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

Coba sendiri

Masalah:

  • Tanda <embed> di HTML 4 adalah 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 plugin belum diinstal di komputer pengguna, audio tidak dapat dimainkan.
  • Jika file ini diubah format, masih tidak dapat dimainkan di semua browser.

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

Gunakan elemen <object>

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

Kode potongan di bawah dapat menampilkan file MP3 yang disisipkan ke 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 plugin belum diinstal di komputer pengguna, audio tidak dapat dimainkan.
  • Jika file ini diubah format, masih tidak dapat dimainkan di semua browser.

Gunakan elemen <audio> HTML5

Elemen <audio> adalah elemen HTML5, yang di HTML 4 adalah ilegal, 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, file jenis ogg ditambahkan. Jika gagal, pesan kesalahan akan ditampilkan.

Masalah:

  • Tanda <audio> di HTML 4 adalah 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 pengesahan.

Paling baik penyelesaian HTML

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 disahkan melalui HTML 4 dan XHTML.
  • Elemen <embed> tidak dapat disahkan melalui HTML 4 dan XHTML.
  • Elemen <embed> tidak dapat diembungkan untuk menampilkan pesan kesalahan.

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

Cara termudah untuk menambahkan audio ke situs web

Cara termudah untuk menambahkan audio ke halaman web adalah?

Pemutar Media Yahoo pasti termasuk diantara nya.

Pemakaian Pemutar Media Yahoo adalah jalan yang berbeda. Anda hanya perlu membiarkan Yahoo melakukan pekerjaan pemutaran lagu.

Dapat memainkan format mp3 serta berbagai format lainnya. Dengan satu 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 menggunakan itu, Anda perlu memasukkan kode JavaScript ini ke bagian bawah halaman web Anda:

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

Lalu hanya tinggal menghubungkan link 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 penuh. Namun, saat Anda mengklik tombol itu, pemutar penuh akan muncul.

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

Menggunakan tautan

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

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 menyisipkan suara di halaman web, atau sebagai bagian dari halaman web, disebut suara yang disisipkan.

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

Pernyataan terbaik kami adalah hanya termasuk suara yang diinginkan pengguna untuk mendengar. Sebuah contoh yang positif adalah, saat pengguna membutuhkan mendengarkan rekaman dan mengklik tautan, halaman akan dibuka dan rekaman akan dimainkan.

Tag Multimedia HTML 4.01

Tag Deskripsi
<applet> Tidak disarankan. Mendefinisikan applet yang disisipkan.
<embed> Tidak disarankan di HTML4, diijinkan di HTML5. Mendefinisikan objek yang disisipkan.
<object> Mendefinisikan objek yang disisipkan.
<param> Mendefinisikan 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.