Membuat Postingan Podcast Audio Player Dengan Blogger Enclosure Link Mime Type

Jika Anda ingin menawarkan postingan Blogger yang menenangkan dan menyenangkan kepada semua pembaca Anda, maka salah satu caranya adalah dengan menyematkan pemutar audio yang bagus dengan Podcast yang sesuai dengan isi artikel anda.

Nah jika Anda mencari sesuatu seperti menyematkan pemutar audio ke blog blogger Anda maka pencarian Anda berakhir di sini.

Artkel ini merupakan kelanjutan dari artikel sebelumnya yang membahas tentang cara melakukan embed file audio mp.3 ke dalam postingan Blogger. Namun pada artikel tersebut tidak dijelaskan cara menyebarkan podcast dan membuat umpan RSS podcast agar kompatibel dengan Itunes. Berkat Feedburner, kita dapat membuat umpan RSS untuk Podcast file audio yang disematkan di dalam postingan Blogger.

Pada artikel ini kita akan memfokuskan tentang proses pembuatan enclosure lini dan Mime Type. Untuk melakukan pekerjaan tersebut kita membutuhkan script Java yang nanti akan kami jelaskan.

Baiklah kita langsung saja memulai prosesnya, cara nya sangat mudah dan sederhana. Untuk meringkas isi artikel, kami anggap anda telah memiliki file mp3 yang telah di unduh/disimpan di Google Drive, Soundcloud atau Dropbox. Iktui langkah-langkah di bawah ini.

A. Upload file mp3 ke Google Drive, Soundcloud atau Dropbox

Pada bagian ini kami tidak menjelaskan proses upload file mp3, kita lebih menitik beratkan cara mendapatkan URL dari file mp3 yang telah anda upload di hosting tersebut.

Pada Google drive untuk mendapatkan alamat URL anda harus membuka file mp3 yang telah anda upload sebelumnya. Kemudian anda klick menu "Embed item" untuk menamilkan script embed tersebut.

Cara Embed Alamat URL di Google Drive

Simpan alamat URL hasil embed tersebut, karena nanti akan kita letakkan di menu enclosure link dan Mime Type yang ada di editor halaman postingan Blogger.

B. Buat Script Java

Setelah anda memiliki alamat URL dari file mp3, sekarang kita akan menuliskan script java kedalam kode HTML Blogger. Anda hanya perlu mengcopy paste saja, kode java di bawah ini. Letakkan kode java di bawah ini di atas kode </head>.

Letakkan di atas kode </head>

<script src='https://cdnjs.cloudflare.com/ajax/libs/audiojs/1.0.1/audio.min.js' type='text/javascript'/>
<script type='text/javascript'>
    audiojs.events.ready(function() {
    var as = audiojs.createAll();
  });
</script>

C. Buat Script Audio Enclosure Link

Karena kita akan membuat umpan untuk RSS Feed, maka kita harus membuat script audio Enclosure link. Script ini nantinya yang akan di baca oleh RSS Feed. Perlu anda perhatikan, script ini akan berjalan dengan normal jika anda telah membuat Feed Burner dan mengaktifkannya di Blogger anda.

Beriktu ini adalah script audio enclosure link yang bisa anda copy paste.

Letakkan di bawah kode <data:post.body/>

<ul>
<b:loop values='data:post.enclosures' var='enclosure'>
<b:if cond='data:enclosure.mimeType == &quot;audio/mpeg&quot;'>
<div>
<hr/>
Dengarkan Podcastnya:
<br/>
<audio expr:src='data:enclosure.url' preload='none'/>
<br/>
<a expr:href='data:enclosure.url'><b>&#9658; Unduh Podcast</b></a>
</div>
</b:if>
</b:loop>
</ul>

D. Aktifkan menu Enclosure link dan Mime Type

Sampai sini anda telah mengaktifkan perintah HTML Enclosure link, langkah selanjutnya adalah mengaktifkan Enclosure link tersebut.

Untuk mengaktifkan Enclosure link dan Mime Type anda harus aktif di editor postingan. Agar lebih mudah cara mengaktifkan menu enclosure link, perhatikan gambar di bawah ini.

Lihat Hasilnya

Setelah semuanya telah anda kerjakan, tiba saatnya kita lihat hasilnya. Bila copy paste tak ada yang terlewat, anda dapat melihat hasil pembuatan Podcast Enclosure link seperti gambar di bawah ini.

Contoh penerapan Podcast dengan Enclosure Link

E. Contoh Script lainnya yang bisa anda Coba

Jika anda telah berhasil dengan script di atas, kami akan berikan contoh script lainnya untuk anda coba. Tak panjang lebar, kami anggap anda telah berhasil dengan script di atas. Berikut adalah script lainnya yang dapat anda coba.

Letakkan di atas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'> </script>
<script src='https://dl.dropboxusercontent.com/s/o0dn83pzj8s8cpk/mediaelement-and-player.min.js'/>
<link href='https://dl.dropboxusercontent.com/s/gzlhi56sfn3tn3i/style.css' media='screen' rel='stylesheet'/>
  
<script>
$(document).ready(function() {
$('#audio-player').mediaelementplayer({
alwaysShowControls: true,
features: ['playpause','volume','progress'],
audioVolume: 'horizontal',
audioWidth: 200,
audioHeight: 100
});
});
</script>

Letakkan script ini di Sidebar atau tempat lainnya (terserah anda)

 <div class="audio-player">
<div id="autocolor"></div>
<h1>Demo Podcast</h1>
<img class="cover" src="cover.jpg" alt="cover">
<audio id="audio-player" src="file.mp3" type="audio/mp3" controls="controls"></audio>
</div>

Hasilnya dapat anda lihat seperti gambar di bawah ini.

Contoh Podcast dengan Script Java

Penggunaan Podcast yang dapat anda gunakan sebagai umpan untuk RSS Feed ini sangat baik untuk meningkatkan pengunjung Blogger anda, karena tampilan blogger anda tak hanya sekedar kata-kata tapi sudah dihiasi dengan audio MP3. Selain itu, mengaktifkan enclosure link dan Mime tpe juga dapat membantu Google untuk mempercepat proses pengindekan postingan anda.