Cara Upload dan Embed File Audio mp3 ke Postingan Blogger

Sebelumnya, menyematkan audio ke dalam halaman web tidaklah mudah, karena browser web tidak memiliki standar tunggal untuk mendefinisikan file media yang disematkan. Namun sejak kemunculan HTML5 menyematkan file audio ke halaman web menjadi lebih mudah, karena HTML 5 telah menyediakan cara standar untuk menyematkan audio di halaman web. Dengan adanya HTML 5, anda dapat meyematkan file audio hampir diseluruh platform CMS termasuk Blogger.

Terkadang lebih baik memiliki beberapa file audio di situs Blogger Anda daripada beberapa konten teks yang membosankan. Dengan audio, Anda dapat menambahkan lebih banyak bumbu pada konten Anda karena pengguna dapat mendengarkan audio daripada membaca seluruh konten sendiri.

Apakah Anda ingin menambahkan file audio ke postingan di Blogger? Terkadang Anda ingin menyertakan beberapa trek audio ke blog Anda, yang bisa berupa podcast atau sesuatu yang terkait dengan konten anda.

 

Menambahkan audio ke situs blogger anda dapat membuatnya lebih menarik dan interaktif bagi pembaca anda. Dengan file audio HTML 5, Anda dapat dengan mudah menyematkan file audio langsung ke halaman blogger anda.

Dalam posting di blogger ini, anda akan belajar cara memasukkan atau mengembed file audio ke halaman blogger anda dengan bantuan Google Drive. Kami juga akan membahas beberapa praktik terbaik untuk menggunakannya script audio tersebut.

A. Buat file mp3 dan Upload ke Google Drive

Sebelum kita lebih jauh mempelajari cara menyematkan file mp3 ke Blogger, langkah awal yang harus anda kerjakan adalah membuat file mp3 tersebut. Kita anggap saja anda telah memiliki file mp3 yang siap untuk di embed ke Blogger.

Sekarng langsung saja anda upload file mp3 tersebut ke Google Drive. Mungkin anda bertanya, kenapa harus Google Drive. Pada artikel ini Google Drive akan kita jadikan backend untuk menyimpan file master mp3 anda. Anda bisa saja menggunakan paltform lainnya, seperti Nextcloud, Soundcloud ataupun cloud yang anda beli dari hosting.

Tapi saya lebih senang pilih Google drive, selain gratis juga mendukung script embed file mp3, video dan lainnya ke Blogger, karena memang antara Google drive dan Blogger masih satu paltform milik Google. Jadi banyak kemudahan untuk mengintegrasikan tiap paltform yang dimiliki Google. Biar lebih jelasnya, gambar di bawah ini adalah file mp3 yang telah kami upload ke Google Drive.

B. Dapatkan Script iFrame untuk Embed File mp3 di Google drive

Setelah anda menyimpan file mp3 ke dalam Gogole Drive, berikan hak akses ke public, agar file mp3 tersebut dapat didengar oleh orang banyak. Pada bagian "general access", pilih "Anyone with the link"

Sekarang kita akan mengcopy script iFrame dari Google drive. Ikuti langkah-langkah berikut:

1. Buka file mp3 yang akan anda embed ke Blogger, dengan cara double klik file mp3 yang ada di Google drive, hingga muncul tab baru.

2. Pada tab baru tersebut anda klik tanda "titik 3" dibagian atas kanan, kemudian klik "Open in New Window". Sehingga muncul tab baru lagi.

3. Pada halaman ini, anda klik lagi tanda "titik 3", dan kemudian klik "Embed item" sampai muncul script iFrame.

Di bawah ini adalah gambar dari script iframe yang akan anda gunakan untuk ditempelkan di haalaman postingan Blogger.

Script iFrame nya akan terlihat seperti di bawah ini.

<iframe src="https://drive.google.com/file/d/1sMoOpxx_X4gI4G9PLBP17IfuEPwdWyYE/preview" width="640" height="480" allow="autoplay"></iframe>

C. Cara Meletakkan script iFrame di Template Blogger

Bagian ini adalah bagian yang paling penting dan sulit, karena anda harus menempatkan script iFrame di script template halaman Blogger. Agak sulit menjelaskannya. Biar lebih mudah akan kami bantu anda dengan gambar.

Sebagai contoh, kita akan meletakkan script iFrame pada (perhatikan gambar).

Pada halaman script HTML cari kata "yang bisa berupa podcast atau sesuatu yang terkait dengan konten anda."

Pada tanda titik dari akhir kata tersebut, anda paste (salin) script iFrame yang berasal dari Google drive. Biar lebih jelas perhatikan gambar berikut.

Biar hasil embednya telihat manis, enak dilihat dan nyaman di dengarkan. Anda ubah ukuran width dan height nya:

• width="160"
• height="80"

<iframe src="https://drive.google.com/file/d/1sMoOpxx_X4gI4G9PLBP17IfuEPwdWyYE/preview" width="160" height="80" allow="autoplay"></iframe>

Selesai, sekarang mari kita lihat hasilnya. Setelah postingan anda publish, maka hasilnya akan terlihat seperti gambar di bawah ini.

Dan dengan itu, Anda memahami dasar-dasar cara kerja audio pada halaman HTML. Meskipun dalam konsep elemen ini mudah digunakan, Anda dapat memanfaatkannya untuk membuat situs web Anda lebih dinamis dan menarik. Cobalah untuk membuat suara yang berhubungan dengan isi postingan artikel anda, dan nantikan peningkatan SEO Blogger anda.