Audio HTML

Ada banyak cara untuk memainkan suara di HTML.

Masalah, masalah, dan cara pemecahan

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 perangkat hardware (PC, Mac, iPad, iPhone).

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

使用插件

浏览器插件是一种扩展浏览器标准功能的小型计算机程序。

插件有很多用途：播放音乐、显示地图、验证银行账号，控制输入等等。

可以使用 <object> 或 <embed> 标签将插件添加到 HTML 页面。

这些标签定义资源（通常是非 HTML 资源）的容器，根据类型，它们即会由浏览器显示，也会由外部插件显示。

使用 <embed> 元素

<embed> 标签定义外部（非 HTML）内容的容器。（这是一个 HTML5 标签，在 HTML4 中是非法的，但是所有浏览器中都有效）。

下面的代码片段可以显示嵌入网页中的 MP3 文件：

Contoh

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

Coba sendiri

Masalah:

  • <embed> 标签在 HTML 4 中无效。页面无法通过 HTML 4 验证。
  • 不同的浏览器对音频格式的支持也不同。
  • 如果浏览器不支持该文件格式且没有插件，则无法播放该音频。
  • 如果用户的计算机未安装插件，则无法播放音频。
  • 即使将该文件转换为其他格式，也无法在所有浏览器中播放。

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

使用 <object> 元素

<object tag> 标签也可以定义外部（非 HTML）内容的容器。

下面的代码片段可以显示嵌入网页中的 MP3 文件：

Contoh

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

Coba sendiri

Masalah:

  • 不同的浏览器对音频格式的支持也不同。
  • 如果浏览器不支持该文件格式且没有插件，则无法播放该音频。
  • 如果用户的计算机未安装插件，则无法播放音频。
  • 即使将该文件转换为其他格式，也无法在所有浏览器中播放。

使用 HTML5 <audio> 元素

<audio> 元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效。

Contoh

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
您的浏览器不支持此音频格式。
</audio>

Coba sendiri

上面的例子使用了一个 mp3 文件，这样它在 Internet Explorer、Chrome 以及 Safari 中是有效的。

为了使这段音频在 Firefox 和 Opera 中同样有效，添加了一个 ogg 类型的文件。如果失败，会显示错误消息。

Masalah:

  • <audio> 标签在 HTML 4 中无效。您的页面无法通过 HTML 4 验证。
  • 您必须将音频文件转换为不同的格式。
  • 在旧式浏览器中，<audio> 元素不起作用。

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

最好是 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 diuji kebenaran melalui HTML 4 dan XHTML.
  • Elemen <embed> tidak dapat diuji kebenaran melalui HTML 4 dan XHTML.
  • Elemen <embed> tidak dapat kembali untuk menampilkan pesan kesalahan.

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

Yang paling mudah untuk menambahkan audio ke laman web

Yang paling mudah untuk menambahkan audio ke halaman web adalah?

Pemutar media Yahoo pasti termasuk diantara mereka.

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

Dapat memainkan format mp3 serta sejumlah format lain. Dengan hanya satu baris kode, anda dapat menambahkannya ke halaman web, dan 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 percuma. Untuk menggunakannya, anda perlu memasukkan kode JavaScript ini ke bawah halaman web anda:

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

Lalu hanya perlu menghubungkan link berkas MP3 ke HTML anda, JavaScript akan secara 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 memberikan kepada pengguna adalah tombol pemutar kecil, bukan pemutar penuh. Walau bagaimanapun, apabila anda mengklik tombol itu, pemutar penuh akan muncul.

Perhatikan, pemutar ini selalu berdampingan di dasar bingkai jendela. cukup klik untuk mengguncangnya 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 menyertakan 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 mengecewakan. Juga perhatikan, pengguna mungkin telah menonaktifkan pilihan suara yang disisipkan di browser.

Perekomendan terbaik kami adalah hanya mengikutsertakan suara yang diinginkan pengguna untuk mendengar di tempat yang diinginkan. Sebuah contoh yang positif adalah, saat pengguna membutuhkan mendengar rekaman dan mengklik tautan, halaman akan dibuka dan rekaman akan dimainkan.

Tanda Multimedia HTML 4.01

Tanda 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.

Tanda Multimedia HTML 5

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