Inilah cara yang benar menampilkan Audio ke postingan blog menggunakan HTML5

Kali ini saya akan menjelaskan menggunakan tag <audio> HTML5 dengan tautan langsung ke file MP3 di Google Drive.

Langkah-Langkah Detail dengan Kode HTML5 <audio> dan Google Drive:

1. Unggah ke Google Drive: Unggah file MP3 Anda ke Google Drive.

2. Ubah Izin Berbagi: Klik kanan pada file MP3 Anda di Google Drive, pilih "Bagikan", dan ubah izin menjadi "Siapa pun yang memiliki tautan dapat melihat". Ini sangat penting, jika tidak, pengunjung tidak akan dapat mengakses file.

3. Dapatkan Tautan Langsung (Direct Link): Ini adalah bagian yang paling penting dan sedikit rumit. Anda tidak bisa hanya menggunakan tautan "bagikan" standar dari Google Drive. Anda memerlukan tautan langsung yang memaksa browser untuk mengunduh atau memutar file tersebut. Gunakan format tautan berikut:

         
   https://drive.google.com/uc?export=download&id=YOUR_FILE_ID
   
       

   Use code with caution.

   Ganti YOUR_FILE_ID dengan ID file Anda. Seperti sebelumnya, ID file adalah bagian dari URL file Google Drive Anda. Misalnya, jika URL file Anda adalah https://drive.google.com/file/d/1aBcDeFgHiJkLmNoPqRsTuVwXyZ012345/view?usp=sharing, maka ID file Anda adalah 1aBcDeFgHiJkLmNoPqRsTuVwXyZ012345.

4. Sematkan Kode di Blogger:

   • Di postingan Blogger Anda, beralih ke tampilan "HTML".

   • Tempel kode HTML di atas di tempat Anda ingin pemutar audio muncul. Pastikan untuk mengganti YOUR_FILE_ID dengan ID yang benar.

5. Pratinjau dan Uji: Beralih kembali ke tampilan "Tulis" untuk melihat pratinjau. Pastikan pemutar audio muncul dan Anda dapat memutar file. Uji di berbagai browser dan perangkat.

Contoh Lengkap:

Misalkan ID file Anda adalah 12XyZabcDefGHIJklmNoPqRsTuvW0Y1z2. Kode Anda akan menjadi:

      
<audio controls>
  <source src="https://drive.google.com/uc?export=download&id=12XyZabcDefGHIJklmNoPqRsTuvW0Y1z2" type="audio/mpeg">
  Browser Anda tidak mendukung elemen audio.
</audio>

    

Use code with caution.Html

Keuntungan dari Metode Ini:

• Kontrol Penuh: Anda menggunakan tag HTML5 <audio>, yang memberi Anda kontrol lebih besar atas tampilan dan fungsionalitas pemutar (meskipun sebagian besar gaya bergantung pada browser).

• Sederhana: Kode HTML-nya cukup sederhana dan mudah dimengerti.

• Tidak Ada Ketergantungan Pihak Ketiga (Jika Google Drive Berfungsi): Anda tidak bergantung pada pemutar atau layanan pihak ketiga, mengurangi kemungkinan masalah kompatibilitas atau perubahan di masa mendatang.

Kekurangan dan Pertimbangan Penting:

• Google Drive Bukan untuk Hosting: Penting untuk diingat bahwa Google Drive bukan dirancang untuk hosting media. Google dapat mengubah kebijakan mereka di masa mendatang, dan tautan langsung ke file Anda mungkin berhenti berfungsi. Ini adalah risiko yang perlu Anda ketahui. Lebih baik menggunakan layanan hosting khusus audio/media untuk produksi dan stabilitas jangka panjang.

• Batasan Bandwidth Google Drive: Google Drive memiliki batasan bandwidth. Jika file MP3 Anda diunduh atau diputar berkali-kali, Anda mungkin mencapai batasan tersebut, dan pemutar akan berhenti berfungsi untuk sementara.

• Tampilan Pemutar Tergantung Browser: Tampilan kontrol pemutar audio akan berbeda-beda tergantung pada browser yang digunakan pengunjung Anda. Anda memiliki kendali terbatas atas gayanya.

• Tidak Ada Analitik: Anda tidak akan mendapatkan analitik apa pun tentang berapa banyak orang yang mendengarkan file Anda (tidak seperti yang akan Anda dapatkan dengan platform hosting khusus).

Kesimpulan:

Menggunakan tag <audio> HTML5 dengan tautan langsung Google Drive adalah cara yang baik dan sederhana untuk menyematkan MP3 di Blogger untuk proyek kecil. Namun, sangat penting untuk menyadari keterbatasan Google Drive sebagai solusi hosting media. Untuk proyek yang lebih serius atau jika Anda membutuhkan stabilitas dan analitik, pertimbangkan untuk menggunakan layanan hosting audio khusus.

Dengarkan contoh audio berikut:

Sebagai penutup, ringkasan bahwa ada dua cara utama untuk menambahkan audio di Blogger: menggunakan tag<suara>HTML5 untuk kontrol penuh atau menggunakan embed dari layanan audio untuk kemudahan dan tampilan yang lebih profesional. Pilih metode yang paling sesuai dengan kebutuhan Anda dan jangan takut untuk berkreasi. Semoga blog Anda semakin menarik dan bermanfaat dengan tambahan audio ini! Semangat berkarya!