Cara Menambahkan Suara ke Halaman Web HTML5

HTML5 memudahkan untuk menambahkan suara dan musik ke halaman web Anda dengan elemen. Faktanya, hal tersulit adalah membuat banyak sumber yang Anda perlukan untuk memastikan file suara Anda dapat diputar di berbagai browser yang paling luas.

Manfaat menggunakan HTML5 adalah Anda dapat menyematkan suara hanya dengan menggunakan beberapa tag. Browser, kemudian, memainkan suara seperti mereka akan menampilkan gambar ketika Anda menggunakan elemen IMG .

Cara Menambahkan Suara ke Halaman Web HTML5

Anda membutuhkan Editor HTML , file suara (sebaiknya dalam format MP3), dan pengonversi file suara.

1. Pertama, Anda perlu file suara. Yang terbaik adalah merekam file sebagai MP3 ( .mp3 ) karena ini memiliki kualitas suara yang tinggi dan didukung oleh sebagian besar browser (Android 2.3+, Chrome 6+, IE 9+, iOS 3+, dan Safari 5+).
2. Konversi file Anda ke format Vorbis ( .ogg ) untuk ditambahkan di dukungan Firefox 3.6+ dan Opera 10.5+. Anda dapat menggunakan konverter seperti yang ditemukan di Vorbis.com. Anda juga dapat mengkonversi MP3 Anda ke format file WAV ( .wav ) untuk mendapatkan dukungan Firefox dan Opera. Saya merekomendasikan untuk memposting file Anda dalam ketiga jenis, hanya untuk keamanan, tetapi yang paling Anda butuhkan adalah MP3 dan satu jenis lainnya.
3. Unggah semua file audio ke server web Anda dan catat direktori tempat Anda menyimpannya. Sebaiknya letakkan di sub-direktori hanya untuk file audio, seperti sebagian besar desainer menyimpan gambar dalam direktori gambar .
4. Tambahkan elemen AUDIO ke file HTML Anda di mana Anda ingin kontrol file suara ditampilkan.
5. Tempatkan elemen SUMBER untuk setiap file audio yang Anda unggah di dalam elemen AUDIO :

1. Setiap HTML di dalam elemen AUDIO akan digunakan sebagai fallback untuk browser yang tidak mendukung elemen AUDIO . Jadi tambahkan beberapa HTML. Cara termudah adalah menambahkan HTML agar mereka mengunduh file, tetapi Anda juga dapat menggunakan metode penyematan HTML 4.01 untuk memutar suara. Berikut ini fallback sederhana:

   Browser Anda tidak mendukung pemutaran audio, unduh file:

   1. MP3 ,
   2. Vorbis , WAV
2. Hal terakhir yang perlu Anda lakukan adalah menutup elemen AUDIO Anda:
3. Setelah selesai, HTML Anda akan terlihat seperti ini:
   4. Browser Anda tidak mendukung pemutaran audio, unduh file:

   5. MP3 ,
   6. Vorbis ,
   7. WAV

Tips Tambahan

1. Pastikan untuk menggunakan HTML5 doctype () sehingga HTML Anda akan divalidasi
2. Tinjau atribut yang tersedia untuk elemen untuk melihat opsi lain apa yang dapat Anda tambahkan ke elemen Anda.
3. Perhatikan bahwa kami menyiapkan HTML untuk memasukkan kontrol secara default dan memiliki pemutaran otomatis dimatikan. Tentu saja, Anda dapat mengubah itu, tetapi ingat bahwa banyak orang menemukan suara yang dimulai secara otomatis / yang tidak dapat mereka kendalikan untuk menjadi yang paling menjengkelkan, dan sering kali hanya meninggalkan halaman ketika itu terjadi.