Cara Mudah Embed Surat Al-Quran MP3 Di Postingan Blog

Jika Anda adalah pemilik blog dengan niche Pendidikan Agama Islam atau seorang muslim yang memiliki blog personal dan ingin mendengarkan bacaan Surat Al-Quran di blognya, Anda bisa meng-embed Al-Quran di blog dengan mudah.
Baru-baru ini saya menemukan sebuah blog yang khusus menyediakan unduhan surat-surat Al-Quran, doa-doa Islam, bahkan bacaan Al-Quran 30 juz yang merdu yang dilantunkan oleh para Qori terkenal.
Adalah https://islamiques.net yang merupakan blog yang menyediakan unduhan bacaan surat-surat Al-Quran dan doa-doa Islam.
Yang lebih menarik dari blog ini adalah tidak hanya menyediakan unduhan surat-surat Al-Quran, tetapi juga membahas semua hal dan semua informasi yang terkait mengenal surat-surat Al-Quran tersebut.
Sehingga dengan ini kita bisa belajar lebih dalam mengenai Al-Quran juga sekaligus sambil menghafal surat-surat Al-Quran dengan mendengarkan murottal Al-Quran dari player audio yang disediakan.
Jika Anda ingin mendengarkan murottal Al-Quran di blog Anda sendiri atau ingin memperdengarkan bacaan Al-Quran kepada pengunjung blog Anda, maka Anda bisa meng-embed-nya dengan menggunakan <audio> tag atau <amp-audio> untuk blog AMP HTML.
Yang pertama, silahkan cari kemudian unduh bacaan surat Al-Quran yang ingin di-embed dari blog Islamques tadi. Sebagai contoh, kita akan meng-embed Surat Yasin full suara merdu dan saya memilih embed Surat Yasin beserta artinya dalam Bahasa Indonesia.
Kemudian silahkan hosting file MP3 Surat Yasin yang sudah diunduh tadi. Saya rekomendasikan untuk menghosting file MP3 Surat Yasin ini di Dropbox karena kita bisa langsung mendapatkan URL direct download filenya.
Silahkan upload file MP3 surat Yasin di akun Dropbox Anda, setelah file terupload silahkan klik tombol Share di file tersebut dan Create Link kemudian Copy Link.
Biasanya URL file akan seperti berikut ini:

https://www.dropbox.com/s/lfpamt31h8it90o/MisyariRasyid-QuranTerjemah-036-Yaasiin.mp3?dl=0

Kemudian silahkan rubah angka 0 menjadi angka 1 untuk merubahnya menjadi direct download file.
Kemudian gunakan kode berikut di postingan di mode HTML.

Untuk Blog Non AMP

<audio controls="" style="width:100%">

  <source src="URL HOST FILE DI SINI" type="audio/mpeg">

  Your browser does not support the audio element.

</audio>

Sehingga tampak seperti berikut jika dengan URL file Dropbox.

<audio controls="" style="width:100%">

  <source src="https://www.dropbox.com/s/lfpamt31h8it90o/MisyariRasyid-QuranTerjemah-036-Yaasiin.mp3?dl=1" type="audio/mpeg">

  Your browser does not support the audio element.

</audio>

Jika ingin autoplay maka silahkan tambahkan kode autoplay="" menjadi seperti berikut.

<audio controls="" style="width:100%" autoplay="">

  <source src="https://www.dropbox.com/s/lfpamt31h8it90o/MisyariRasyid-QuranTerjemah-036-Yaasiin.mp3?dl=1" type="audio/mpeg">

  Your browser does not support the audio element.

</audio>

DEMO

Untuk Blog AMP HTML

Pastikan blog sudah memasang js amp-audio seperti berikut ini.

<script async='async' custom-element='amp-audio' src='https://cdn.ampproject.org/v0/amp-audio-0.1.js'/>

Kemudian gunakan kode berikut di postingan di mode HTML.

<amp-audio width="auto"

      height="50"

      layout="fixed-height"

      src="URL HOST FILE DI SINI">

    <div fallback>

      <p>Your browser doesn’t support HTML5 audio</p>

    </div>

  </amp-audio>

Demonya tampak seperti berikut ini.

Your browser doesn’t support HTML5 audio

Jika ingin autoplay gunakan kode seperti berikut ini.

 <amp-audio width="auto"

      height="50"

      autoplay="autoplay"

      layout="fixed-height"

      src="URL HOST FILE DI SINI">

    <div fallback>

      <p>Your browser doesn’t support HTML5 audio</p>

    </div>

  </amp-audio>

Semoga bermanfaat.
KA