Cara Memasang Pemutar Musik Di Blog AMP HTML

Cara memasang pemutar musik di blog AMP HTML

Setelah kemarin saya sudah memberikan tutorial Cara Menyimpan File Musik Di Google Sites Dengan Smartphone Android
Kali ini saya akan memberikan cara sederhana membuat pemutar musik di blog AMP HTML dengan menggunakan file sites musik dari google sites kemarin yang di simpan di google sites
Seperti yang sudah saya singgung kemarin dengan menyimpan file musik di google sites kita bisa gunakan untuk menerapkannya pemutar musik di blog dengan file hosting atau URL dari file musik google sites tersebut

Mungkin sedikit mengerti karena setiap kita ingin menambahkan sematan atau media di blog membutuhkan hosting baik itu hosting dari google atau pun dari hosting lainnya,sebagai contoh ketika ingin membuat atau menampilkan video youtube di blog maka kita harus mempunyai atau mengetahui URL video tersebut ini bisa URL video dari orang lain ataupun URL video dari channel youtube kita sendiri,dan untuk mendafatkan URL video dari channel kita maka kita harus terlebih dahulu mengupload file video nya ke channel youtube kita begitu pun dengan cara ini kita bisa membuat pemutar musik dengan menggunakan file atau URL dari google sites kita

Ok langsung saja jika anda tertarik membuat pemutar musik di blog AMP HTML ini sangatlah lah mudah
Berikut ini langkah Langkahnya

Langkah pertama sisipkan kode amp-audio di bawah tag head berikut ini
<script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>

Jika kode script amp-audio tidak bisa di simpan di template anda bisa gunakan tag conditional khusus untuk URL tertentu
Berikut ini contohnya
<b:if cond='data:blog.url in {&quot;URL halaman postingan&quot;}'>
<script async='async' custom-element='amp-audio' src='https://cdn.ampproject.org/v0/amp-audio-0.1.js'/> </b:if>

Keterangan :
Silahkan anda ganti URL halaman posting dengan URL postingan anda yang mau di pasang musik nya atau di pasang audionya
Langkah kedua untuk menambah musik di blog gunakan kode script ini dalam mode HTML
<amp-audio width="auto" height="50" src="URL file musik google sites"> <div fallback> <p>Your browser doesn’t support HTML5 audio</p> </div> </amp-audio>

Keterangan :
Silahkan anda ganti URL file musik google site dengan url file musik anda yang di simpan di google sites
Sebelumnya jika tidak tau cara menyimpan file musik di google sites silahkan baca dulu postingan berikut ini :
Cara Menyimpan File Musik Di Google Sites Dengan Smartphone Android 

Untuk menggunakan atau menampilkan audio di blog AMP HTML anda juga bisa menambah atau menggunakan gambar,judul lagu atau pun artis anda bisa gunakan kode script berikut ini
<amp-audio src="https://sites.google.com/site/filepertamasaya/music-file/One_Ok_Rock_Liar.mp3" artwork="https://4.bp.blogspot.com/-qKQcXECGh8c/WZ29lXXRXtI/AAAAAAAADrM/wrNzXP6YIdINTSxlpXbsxd4nPWpX4UatQCLcBGAs/s1600/logoadmin.jpg" title="one ok rock by encep nurdin" album="encep nurdin file" artist="one ok rock" height="50" width="auto" controls> </amp-audio>

Atau juga jika ingin mempilkan musik dengan control atribut controlslist dari elemen HTML5 , misalnya anda menggukan dengan menonaktifkan tombol download
Gunakan scrpit di bawah ini.
<amp-audio width="auto" height="50" src="https://sites.google.com/site/filepertamasaya/music-file/One_Ok_Rock_Liar.mp3" controlsList="nodownload"> <div fallback> <p>Your browser doesn’t support HTML5 audio</p> </div> </amp-audio>



Dan contoh nya pemutar musik di blog AMP HTML seperti yang terlihat di bawah ini :

Nah berikut adalah cara memasang pemutar musik di blog AMP HTML
Semoga bermanfaat dan selamat mencobanya...

blog views
Reactions:
Donate via PayPal

You Might Also Like:

ADD A COMMENT WITH YOUR FACEBOOK PLEASE WAIT FOR FACEBOOK COMMENT WILL SOON OPEN

ADD A COMMENT WITH DISQUS HIDE COMMENT

Disqus Comments

ADD A COMMENT WITH GOOGLE PLUS HIDE COMMENT

google Comments

Hello, how may we help you? Just send us a message now to get assistance.

Facebook Messenger ×