Audio HTML

Ada banyak cara untuk memainkan suara di HTML.

Masalah, masalah, dan cara penyelesaian

Tidak mudah untuk memainkan audio di HTML!

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

Dalam bab ini, CodeW3C.com menyajikan kepada Anda masalah dan cara penyelesaian.

使用插件

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

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

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

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

使用 <embed> 元素

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

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

Contoh

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

Coba Sendiri

Soalan:

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

Catatan: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

Soalan:

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

使用 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 类型的文件。如果失败，会显示错误消息。

Soalan:

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

Catatan: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 format audio yang berbeza 2. Elemen <audio> HTML5 akan cuba memainkan audio dengan format mp3 atau ogg. Jika gagal, kod akan kembali mencuba elemen <embed>.

Soalan:

  • Anda mesti mengubah format audio anda.
  • Elemen <audio> tidak dapat disahkan melalui HTML 4 dan XHTML.
  • Elemen <embed> tidak dapat disahkan melalui HTML 4 dan XHTML.
  • Elemen <embed> tidak dapat berpindah untuk menampilkan mesej kesalahan.

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

cara paling mudah untuk menambahkan audio ke laman web

cara paling mudah untuk menambahkan audio ke halaman web adalah?

Pemutar media Yahoo pasti diantara yang terbaik.

Pemakaian pemutar media Yahoo adalah jalan yang berbeza. Semua yang anda perlu lakukan adalah membiarkan Yahoo melaksanakan kerja pemain lagu.

Ia dapat memainkan format mp3 serta beberapa format lain. Dengan baris kod yang ringkas, anda dapat menambahkannya ke halaman web, dan dengan mudah mengubah halaman HTML anda menjadi daftar main yang 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 script ini ke bawah halaman web anda:

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

Lainnya, hanya perlu menghubungkan pautan fail MP3 ke HTML anda, JavaScript akan secara automatik mencipta butang pemutar untuk setiap lagu:

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

Pemutar Media Yahoo memberikan kegunaan kepada pengguna adalah butang pemutar kecil, bukan pemutar penuh. Walau bagaimanapun, apabila anda mengklik butang itu, pemutar penuh akan muncul.

Perhatikan, pemutar ini selalu berdampingan di dasar bingkai jendela. Hanya kliknya, lalu keluar untuk menariknya.

Menggunakan Tautan

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

Bagian kode di bawah menunjukkan tautan ke berkas mp3. Jika pengguna mengklik tautan, peramban akan meluncurkan 'aplikasi bantuan' untuk memainkan berkas:

Contoh

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

Coba Sendiri

Suara disisipkan

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

Jika Anda merancang untuk menggunakan suara dalam aplikasi web, Anda harus menyadari banyak orang yang menyangka suara yang disisipkan menyedihkan. Juga perhatikan, pengguna mungkin telah menonaktifkan pilihan suara disisipkan di peramban.

Kami menyarankan untuk hanya mengandung suara di tempat pengguna menginginkan mendengar suara secara langsung. Contoh yang positif adalah, ketika pengguna memerlukan rekaman dan mengklik tautan, halaman akan terbuka dan rekaman akan dimainkan.

Tanda Multimedia HTML 4.01

Tanda Deskripsi
<applet> Tidak disarankan. Mendefinikan applet yang disisipkan.
<embed> Tidak disarankan di HTML4, tetapi diizinkan di HTML5. Mendefinikan objek yang disisipkan.
<object> Mendefinikan objek yang disisipkan.
<param> Mendefinikan 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 perangkat lunak ekstensi.