Dalam membuat postingan artikel di dalam sebuah website, terkadang banyak komponen-komponen penting yang harus kita masukkan, salah satu diantaranya adalah audio. Audio ini bisa dalam bentuk suara orang, lagu, nyanyian, dan lain-lain. Namun sebagian orang harus repot-repot mengunggahnya langsung melalui blog, sehingga jika pengunjung mau mendengarkan audionya biasanya harus mendownload terlebih dahulu. Padahal yang kita harapkan adalah pengunjung bisa langsung mendengarkan audio tersebut tanpa harus repot-repot mendownloadnya dulu.

Pada artikel ini saya memberikan tutorial bagaimana cara agar kita bisa menampilkan audio play langsung melalui blog kita. Saya akan membagi tutorial ini menjadi dua bagian, yaitu menggunakan Blogger dan Menggunakan WordPress. Karena yang sudah kita ketahui dua penyedia blog ini sudah umum dipakai orang banyak orang.

Untuk pengguna WordPress versi terbaru, silahkan lihat tutorial ini: Baru! Cara Memasang Audio Play di WordPress Tanpa Plugin

Persyaratan

Ohya dalam tutorial ini kita sama sekali tidak memerlukan plugins untuk diinstal. Namun ada pernyaratan yang harus Anda punyai, yaitu

1. Akun Google. Jadi asalkan Anda sudah mempunyai akun google atau akun email dari google (gmail), maka syarat pertama sudah terpenuhi. Saya tidak akan memberikan tutorial bagaimana cara membuat akun Google ya..
2. Audio File. Jelas sudah harus Anda persiapkan file audionya ya, file bisa dalam bentuk .mp3

Tutorial

Membuat file audio bersifat publik

1) Pertama yang perlu Anda lakukan tentu saja masuk di akun google ya, Anda bisa mengunjungi google.com lalu pastikan di pojok kanan sudah ada gambar profil Anda. Jika masih tertulis Login atinya Anda belum melakukan login akun google.

2) Selanjutnya silahkan masuk di akun Google Drive, Anda bisa langsung mengujungi link berikut: drive.google.com.

3) Silahkan upload file Audio Anda dengan menekan tombol Baru yang terletak di sebelah kiri atas. Kemudian klik Upload File. Anda juga boleh membuat Folder dulu sebelum melakukan upload file, tujuannya agar file .mp3 tidak tercampu baur dengan file-file lainnya.

4) Jika file audio sudah Anda upload selanjutnya yang harus kita lakukan adalah membuat file tersebut agar terlihat publik, atau dapat diakses oleh siapapun. Jika ini tidak kita lakukan maka file tersebut akan tidak terlihat di blog dan harus meminta persetujuan dulu untuk memplaynya. Caranya adalah silahkan kilk kanan pada bagian audio tersebut, kemudian klik Bagikan.

5) Jika sudah akan muncul tampilan kurang lebih sepeti gambar di bawah ini, silahkan teman klik saja Lanjutkan, tombol tersebut ada di sebelah kanan bawah (tulisannya agak kecil)

6) Selanjutnya pada bagian akses yang semula statusnya pribadi, silahkan ubah dengan cara klik Ubah di sampingnya.

7) Kemudian Anda klik di bagian paling atas bertuliskan Aktif – Publik di web. Jika sudah silahkan Anda klik simpan, kemudian klik Selesai.

Mengambil kode/embed kode file audio

Sekarang file audio kita sudah bersifat publik. Selanjnya kita akan mengambil kode/embed, agar kodenya nanti bisa di pasang pada blog kita.

8) Caranya yang pertama silahkan klik kanan lagi pada file audio yang sudah kita buat publik tadi kemudian pilih Pratinjau. Atau ada juga bisa langsung double click pada file yang sudah kita buat publik tadi.

9) Pada pojok kanan atas, ada sebuah menu yang berbentuk titik tiga vertikal, kemudian klik Buka di jendela baru. Jika kurang jelas silahkan lihat gambar dibawah.

10) Selanjutnya akan terbuka kembali tampilan yang mirip seperti tadi. Yang kita lakukan tadi adalah untuk mengaktifkan/melihat menu embed/smart item. Maka kemudian silahkan ulangi lagi dengan klik menu titik tiga di kanan atas, namun sekarang kita memilih menu Smartkan item… Silahkan lihat gambar di bawah ini untuk lebih jelasnya.

11) Jika sudah maka kita akan melihat sebuah kode HTML. Kode HTML ini silahkan Anda copy semua, untuk nanti kita pasang di website/blog kita.

Memasang kode HTML di blog

Melalui WordPress

1) Pertama silahkan Anda tambahkan post baru, atau bisa silahkan pilih dimana tempat Audio ini akan di tempatkan.

2) Jika sudah silahkan Anda beralih ke mode tesk HTML, caranya adalah klik tombol plus yang dilingkari, tombol ini juga bisanya bisa ditemui di pojok kiri atas ya, kurang lebihnya silahkan lihat gambar. Kemudian Anda search saja dengan menuliskan html, dan klik Costum HTML.

Untuk Anda yang masih manggunakan mode penulisan Clasic, Anda bisa klik saja Teks di pojok kanan lembar penulisan. Letaknya seperti gambar di bawah ini.

3) Jika sudah silahkan masukkan kode yang sudah kita copy tadi di langkah ke 11 di atas.

Yang perlu Anda perhatikan dalam kode ini adalah bagian width dan height. Width adalah ukuran panjang dari tampilan audio, sedangkan untuk Height adalah tinggi dari tampilan audio. Dalam contoh di atas saya memilih panjangnya 600, dan tingginya 70, agar tampilan audio terlihat memanjang.

4) Silahkan Anda publish dan lihat hasilnya.

Melalui Blogspot/Blogger

Cara memasukkan kode HTML melalui blogger ini tidaklah terlalu sulit, dan lebih ringkas. Berikut ini langkah-langkahnya:

1) Sama seperti pada cara WordPress di atas, silahkan pilih dimana Anda ingin menampilkan kode audio ini, misal ada di post baru.

2) Jika sudah silahkan pilih mode HTML, letak tombolnya ada di samping kiri ya. Untuk lebih jelasnya lihat gambar di bawah.

3) Setelah itu silahkan masukkan kodenya di situ. Sama seperti penjelasan di WordPress, Anda harus memperhatikan kode bagian width dan height. Silahkan sesuaikan ukurannya sesuai dengan keinginan. Penjelasan width dan height silahkan lihat bagian WordPress di atas.

4) Silahkan publikasikan pos nya, dan lihat hasilnya.

Kesimpulan

Itu tadi adalah langkah-langkah cara memasang Audio melalui Blog. Cara ini tentu saja akan ebih cepat jika Anda nanti sudah terbiasa. Dengan cara ini juga kita bisa menghemat storage blog kita, dan tidak ribet untuk menambahkan plugins. Untuk hasil yang sudah saya buat, silahkan Anda bisa mengunjungi halaman ini. Mudah-mudahan bermanfaat, jika ada yang perlu didiskusikan silahkan tulisa saja pendapat Anda melalui kolom komentar.