Cara Terbaru Menyematkan File Audio MP3 di Postingan Blog

Memasang atau menyematkan file lagu dengan ekstensi MP3 ke postingan tertentu di blog sangatlah mudah. Tips ini mungkin agak basi bagi blogger yang passion blognya seputar musik atau yang isi postingan blognya menggunakan bantuan audio MP3 seperti berbagi podcast dan potongan musik.

Memasukkan file audio ke dalam halaman postingan blog atau website yang paling populer tentunya dengan bantuan beberapa layanan penyimpanan audio seperti SoundCloud dan Anchor.fm. Meskipun ada berbagai jenis media dan cara untuk menyematkan file mp3 ke postingan blog, dalam artikel ini akan dibahas beberapa metode atau langkah sederhana untuk menyematkan file audio MP3 di halaman postingan blog atau web dengan bantuan Google Drive, tentunya lebih efektif dalam meningkatkan kemampuan multimedia audio MP3 di blog yang Anda miliki.

Sebetulnya ada beberapa artikel yang sejenis, yang membahas tentang cara embed audio di postingan blog dan hampir semuanya merupakan artikel lama yang sudah tidak berfungsi lagi kode scriptnya. Termasuk postingan yang menggunakan layanan Google Drive dengan kode script : <audio controls>, yakni tag player audio dengan kontrol dasar play, pause, dll.

Bagaimana cara menyematkan file audio MP3 di halaman postingan blog atau website dari Google Drive?

Anda hanya perlu mengunggah file audio MP3 ke Google Drive dan menyematkan file MP3 langsung dari Drive. Platform website atau blog apa pun yang mendukung IFRAME, seperti Blogger, WordPress, Medium, atau bahkan Google Sites dapat menggunakan tips ini.

Menggunakan fungsi <iframe> jelas sangat berbeda dengan fungsi <audio controls>, walaupun pada prinsipnya kedua fungsi marka HTML ini sama-sama menyematkan file tetapi ada sedikit perbedaan pada penerapannya.

Untuk teknik lama yang menggunakan tag <audio controls> fungsinya sama persis ketika memasang klip video Youtube ke dalam artikel / postingan dengan menggunakan kode embed yang sudah disediakan. Namun untuk pemasangan menggunakan tag <iframe> tidak perlu lagi menggunakan kode embed, tetapi menggunakan kode HTML sederhana yang sudah support digunakan untuk blog.

Berikut langkah-langkah memasang file audio MP3 di halaman portingan blog atau website.

1. Simpan file audio MP3 di Google Drive;
2. Pada file audio MP3, silakan klik kanan atau klik tanda 3 titik pada bagian akhir baris file;
3. Klik "Bagikan" dan pastikan akses link filenya sudah disetting: "Siapa saja yang memiliki link";
4. Salin link file, dan Paste di notepad terlebih dahulu untuk back-up;
5. Gunakan tag IFRAME berikut, copy dan paste di halaman postingan blog;
   
   

   <iframe
   frameborder="0"
   type="audio/mp3"
   width="100%"
   height="75"
   src="https://drive.google.com/file/d/ID-FILE-MP3-GOOGLE-DRIVE/preview">
   </iframe>
   

   
   
6. Sekarang, ganti "ID-FILE-MP3-GOOGLE-DRIVE" pada source kode diatas (warna merah) dengan id file yang diperoleh dari tautan file audio MP3 dari google drive.
   
   Contoh penerapan link tautan dari Google Drive pada source kode diatas:
   
   

   https://drive.google.com/file/d/1ida0kXXhCAA8dl9EABn8L2lDy4bKiQ65/view?usp=drive_link
   

   
   Id file pada link google drive diatas ditunjukkan oleh kode yang berwarna merah. Copy kode id file yang Anda miliki (posisinya sama dengan kode yang berwarna merah) dan paste untuk mengganti kata: ID-FILE-MP3-GOOGLE-DRIVE pada source kode nomor 5;
7. Simpan perubahan keseluruhan;
8. Selesai.

Catatan:
Untuk mengganti ukuran pada source kode HTML diatas, Anda bisa mengganti angka pada atribut width dan height.

Silakan dicoba, Semoga bermanfaat. Hasil dari penerapan keseluruhan source kode diatas dapat dicoba pada tautan audio dibawah ini: