Memasang Pemutar Audio di Artikel Blogger

Biasanya saya tidak terkesan dengan blog yang memiliki fitur pemutar lagu, apalagi jika lagu tersebut otomatis dimainkan ketika blog dibuka. Namun bukan berarti menyertakan lagu atau berkas audio adalah hal tabu dalam blogging, hanya saja jika penempatan dan penggunaannya tidak bijak malah membuat blog terkesan norak.

Sekian lama blogging, jarang sekali atau mungkin tidak pernah saya merasakan perlu untuk memasang berkas audio di artikel blog. Sampai saat menulis artikel Mengamankan Akun Telegram, baru merasakan kebingungan bagaimana untuk menyisipkan berkas audio ke dalam artikel agar bisa langsung didengarkan oleh pembaca.

Berbagai panduan dirasa menunjukkan cara-cara yang rumit dan merepotkan. Misalnya mesti menggunakan layanan Google Sites, Soundcloud dan lainnya. Saya menggunakan sarana blog dari Blogger justru karena mengincar kemudahan layanan yang berpusat di satu tempat. Dengan Blogger, saya tidak perlu lagi memusingkan kesediaan server, CMS apa yang digunakan, di mana menyimpan gambar, bagaimana perihal komentar dan lain sebagainya. Jadi kini saya berusaha sekira mampu menghindari untuk menyimpan berkas penunjang blog di banyak tempat.

Beruntung saya kemudian menemukan perihal kemampuan HTML 5 yang memiliki fitur tag <audio> yang memungkinkan peramban web untuk bisa langsung memutar berkas audio. Cara ini setidaknya memiliki dua kekurangan; (1) memerlukan peramban yang telah mendukung HTML 5, dan (2) tampilannya sangat sederhana. Namun kedua hal ini saya rasa bukanlah masalah, karena; (1) jika seseorang masih menggunakan peramban versi lama, sepertinya dia bukan target dari blog ini, dan (2) kesederhanaan pemutar audionya justru merupakan sebuah nilai tambah karena saya tidak memerlukan full blown audo player.

Lalu bagaimana dengan berkas audionya? Bukankah Blogger tidak mengizinkan mengunggah berkas audio ke dalam artikel blog?
Yep, bener pisan. Solusinya adalah dengan menyimpan berkas audio di sarana penyimpanan awan (cloud storage). Layanan yang saya gunakan di sini masih dari Google, yakni Google Drive.

Jadi, kita akan menyimpan berkas audio di Google Drive dan merujuk berkas tersebut ke dalam audio player HTML 5. Profit!

• Unggah berkas audio ke Google Drive.

• Dapatkan tautan langsung (direct link) ke berkas audio tersebut.
  Umumnya bentuk tautan di Google Drive mengikuti pola berikut:

  https://drive.google.com/file/d/ID_BERKAS/view?usp=sharing
  

  Misalya tautan berkas audio yang kita unggah tadi adalah:
  https://drive.google.com/file/d/1AKl7Wkbn5vCnzxhbXAGTjkOsl9JyrnTi/view?usp=sharing

  Untuk menjadikan tautan berkas audio tersebut sebuah tautan langsung, kita ubah pola tautannya mengikuti pola serupa berikut:

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

  Maka tautan langsung berkas audio yang kita unggah tadi adalah:
  https://drive.google.com/uc?export=download&id=1AKl7Wkbn5vCnzxhbXAGTjkOsl9JyrnTi

  Baca juga: Membuat Tautan Langsung Menuju Berkas di Google Drive

• Sekarang kita sisipkan pemutar audio-nya ke dalam artikel:
  

  <audio controls="" style="width: 100%;border-radius:4px;border:solid black 1px">
    Peramban web Anda belum mendukung HTML5 (tag <audio>).
    <source src="https://drive.google.com/uc?export=download&id=1AKl7Wkbn5vCnzxhbXAGTjkOsl9JyrnTi" type="audio/ogg">
  </audio>
  

  Panduan lengkap perihal tag <audio> bisa dilihat di https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio.
  Dan kode di atas bisa dijelaskan secara sederhana sebagai berikut:

  • Atribut controls akan menampilkan ragam kendali pada pemutar audio, misalnya tombol play, volume dan seeking.
  • Atribut style untuk mempersolek penampilan pemutar audio.
  • Baris tepat di bawah tag <audio> akan memberikan peringatan jika peramban yang digunakan pembaca artikel belum mendukung tag <audio> HTML 5.
  • Atribut src menunjukkan di mana letak berkas audio yang bisa dimainkan oleh pemutar audio. Di bagian inilah kita letakkan tautan langsung berkas audio di Google Drive yang kita dapatkan pada langkah di atas.
    Atribut type di akhir baris ini menunjukkan MIME type dari berkas audio. Di sini saya gunakan berkas audio berbentuk Ogg yang formatnya terbuka dan kemungkinan besar bisa dimainkan oleh banyak peramban web.

• Profit!
  Kode di atas akan menghasilkan pemutar audio dengan tampilan seperti berikut di bawah ini.

Selama kita bijak dalam menggunakan fitur <audio> ini, misalnya dengan tidak memutar audio secara otomatis dan dalam volume maksimum, juga pembaca diberikan kendali penuh atas pemutar audio tersebut tentunya fitur ini akan membawa banyak manfaat dan memberikan nilai tambah kepada artikel.

Hope this tip usefull...