Latest web development tutorials

Audio HTML (Audio)

Terdengar di HTML bisa bermain dengan cara yang berbeda.


Masalah dan solusi

Memutar audio dalam HTML tidak mudah!

Anda perlu banyak tips familiar untuk memastikan bahwa file Anda audio dalam semua browser (Internet Explorer, Chrome, Firefox, Safari, Opera), dan semua perangkat keras (PC, Mac, iPad, iPhone) bisa dimainkan.

Dalam bab ini, W3CSchool Anda meringkas masalah dan solusi.


Penggunaan plug-in

Browser plug-in adalah perpanjangan dari browser standar memiliki program komputer kecil.

Plug-in dapat menggunakan <object> tag atau <embed> tag ditambahkan ke halaman.

Label ini menentukan sumber daya (biasanya sumber non-HTML) kontainer, tergantung pada jenis, mereka akan ditampilkan oleh browser yang juga ditampilkan oleh eksternal plug-in.


Menggunakan <embed> elemen

<Embed> mendefinisikan sebuah eksternal (non-HTML) konten kontainer. (Ini adalah tag HTML5 di HTML4 adalah ilegal, tetapi semua browser yang valid).

Fragmen kode berikut dapat menampilkan file MP3 tertanam di halaman web:

contoh

<embed height="50" width="100" src="horse.mp3">

Coba »

Soal:

  • <Embed> tag di HTML 4 tidak valid. Halaman tidak dapat diverifikasi oleh HTML 4.
  • Browser mendukung berbagai format audio yang berbeda untuk.
  • Jika browser Anda tidak mendukung format file, ada plug-in, maka Anda tidak bisa memainkan audio.
  • Jika komputer pengguna tidak plug-in diinstal, Anda tidak dapat memutar audio.
  • Jika file yang dikonversi ke format lain, masih belum bisa bermain di semua browser.

Gunakan elemen <object>

<Tag Object> tag juga dapat didefinisikan di luar wadah (non-HTML) konten.

Fragmen kode berikut dapat menampilkan file MP3 tertanam di halaman web:

contoh

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

Coba »

Soal:

  • Browser mendukung berbagai format audio yang berbeda untuk.
  • Jika browser Anda tidak mendukung format file, ada plug-in, maka Anda tidak bisa memainkan audio.
  • Jika komputer pengguna tidak plug-in diinstal, Anda tidak dapat memutar audio.
  • Jika file yang dikonversi ke format lain, masih belum bisa bermain di semua browser.

Gunakan HTML5 <audio yang> elemen

HTML5 <audio yang> elemen merupakan elemen HTML5 di HTML 4 adalah ilegal, tetapi di semua browser yang valid.

The <audio yang> elemen bekerja di semua browser modern.

Di bawah ini kita akan menggunakan tag <audio yang> untuk menggambarkan file MP3 (Internet Explorer, Chrome dan Safari efektif), juga menambahkan jenis file OGG (Firefox dan Opera browser efektif). Jika gagal, ini akan menampilkan kesalahan teks:

contoh

<audio controls>
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
Your browser does not support this audio format.
</audio>

Coba »

Soal:

  • <Audio> tag di HTML 4 tidak valid. Halaman Anda tidak dapat diverifikasi oleh HTML 4.
  • Anda harus mengkonversi file audio ke format yang berbeda.
  • <Audio> elemen tidak bekerja di browser lama.

Solusi HTML Terbaik

Contoh berikut ini menggunakan dua format audio yang berbeda. HTML5 <audio yang> elemen mencoba untuk bermain ogg ke mp3 atau audio. Jika gagal, kode akan mencoba untuk rollback <embed> elemen.

contoh

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

Coba »

Soal:

  • Anda harus dikonversi ke format audio yang berbeda.
  • <Embed> elemen tidak dapat digulung kembali untuk menampilkan pesan kesalahan.

Yahoo Media Player - cara sederhana untuk menambahkan audio di situs Anda

Pemain menggunakan Yahoo gratis. Untuk menggunakannya, Anda harus menempatkan JavaScript ini ke bagian bawah halaman:

Yahoo player dapat memutar MP3 dan berbagai format lainnya. Anda hanya perlu menambahkan satu baris kode ke halaman Anda atau blog, Anda dapat dengan mudah membuat halaman HTML Anda menjadi playlist profesional:

contoh

<a href="horse.mp3">Play Sound</a>

<script src="http://mediaplayer.yahoo.com/latest"></script>

Coba »

Jika Anda ingin menggunakannya, Anda harus menempatkan JavaScript ini ke bagian bawah halaman:

<script src="http://mediaplayer.yahoo.com/latest"></script>

Kemudian hanya menempatkan link ke file MP3 Anda dalam HTML, JavaScript secara otomatis membuat tombol putar untuk setiap lagu:

<a href="song1.mp3"> Putar Lagu 1 </a>
<a href="song2.wav"> Bermain Song 2 </a>
...
...

Yahoo media player untuk pengguna Anda adalah tombol putar kecil bukan pemain penuh. Namun, ketika Anda mengklik tombol ini akan muncul pemain yang lengkap.

Harap dicatat bahwa pemain ini selalu merapat di bagian bawah bingkai jendela. Klik saja, Anda dapat geser keluar.


menggunakan hyperlink

Jika halaman berisi hyperlink yang menunjuk ke file media, kebanyakan browser akan menggunakan "aplikasi pembantu" untuk memutar file.

Fragmen kode berikut menunjukkan link ke file mp3. Jika pengguna mengklik pada link, browser akan meluncurkan "aplikasi pembantu" untuk memutar file:

contoh

<a href="horse.mp3">Play the sound</a>

Coba »


Deskripsi inline suara

Bila Anda termasuk suara di halaman web, atau sebagai bagian dari suatu halaman web, hal itu disebut suara inline.

Jika Anda berencana untuk menggunakan inline suara dalam aplikasi web Anda, Anda perlu menyadari bahwa banyak orang menemukan inline terdengar menjengkelkan. Juga mencatat bahwa pengguna mungkin telah ditutup opsi peramban inline suara Anda.

Saran terbaik kami adalah untuk hanya ketika pengguna ingin mendengar tempat inline suara mengandung mereka. Sebuah contoh positif adalah bahwa ketika pengguna perlu mendengar rekaman dan klik pada link akan membuka halaman dan bermain rekaman.


HTML tag multimedia

Baru: HTML5 label baru

标签 描述
<embed> 定义内嵌对象。HTML4 中不赞成,HTML5 中允许。
<object> 定义内嵌对象。
<param> 定义对象的参数。
<audio> New 定义了声音内容
<video> New 定义一个视频或者影片
<source> New 定义了media元素的多媒体资源(<video> 和 <audio>)
<track> New 规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)