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
Cara Menambahkan Suara ke Halaman Web HTML5
Anda membutuhkan Editor HTML, file suara (sebaiknya dalam format MP3), dan pengonversi file suara.
- Pertama, Anda perlu file suara. Yang terbaik untuk 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+).
- Konversi file Anda ke format Vorbis (
.ogg) untuk menambah 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.
- Unggah semua file audio ke server web Anda dan catat direktori tempat Anda menyimpannya. Ada baiknya untuk menempatkannya di sub-direktori hanya untuk file audio, seperti kebanyakan desainer menyimpan gambar dalam
gambar direktori.
- Tambahkan
AUDIO elemen ke file HTML Anda di mana Anda ingin kontrol file suara ditampilkan.
- Tempat
SUMBER elemen untuk setiap file audio yang Anda unggah di dalam
AUDIO elemen:
-
-
- HTML apa pun di dalam
AUDIO elemen akan digunakan sebagai fallback untuk browser yang tidak mendukung
AUDIO elemen. 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. Ini adalah fallback sederhana:
Browser Anda tidak mendukung pemutaran audio, unduh file: MP3,
-
Vorbis, WAV
- HTML apa pun di dalam
-
Hal terakhir yang perlu Anda lakukan adalah menutup elemen AUDIO Anda:
-
Setelah selesai, HTML Anda akan terlihat seperti ini:
-
-
-
Browser Anda tidak mendukung pemutaran audio, unduh file:
-
MP3,
-
Vorbis,
-
WAV
-
Tips Tambahan
- Pastikan untuk menggunakan HTML5 doctype () sehingga HTML Anda akan divalidasi
- Tinjau atribut yang tersedia untuk elemen untuk melihat opsi lain apa yang dapat Anda tambahkan ke elemen Anda.
- 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.
