Panduan Lengkap: Cara Menambahkan Musik MP3 di Blog Anda

Table of Contents

Menambahkan musik ke blog Anda dapat meningkatkan pengalaman pengunjung dan membuat blog Anda lebih menarik. Musik dapat menciptakan suasana yang sesuai dengan konten Anda, membuat pengunjung merasa lebih terhubung, dan bahkan meningkatkan waktu yang mereka habiskan di situs Anda. Artikel ini akan membahas berbagai cara untuk menambahkan musik MP3 ke blog Anda, termasuk langkah-langkah praktis dan contoh kode yang dapat Anda gunakan.

MP3 di website 

Mengapa Menambahkan Musik ke Blog?

Menambahkan musik ke blog memiliki beberapa manfaat, antara lain:

1. Meningkatkan Pengalaman Pengguna: Musik dapat membuat pengunjung merasa lebih nyaman dan terhibur saat membaca konten Anda.
2. Menciptakan Suasana: Musik dapat membantu menciptakan suasana yang sesuai dengan tema blog Anda, apakah itu santai, energik, atau inspiratif.
3. Meningkatkan Keterlibatan: Musik dapat meningkatkan keterlibatan pengunjung dengan konten Anda, membuat mereka lebih mungkin untuk kembali lagi.
4. Membedakan Blog Anda: Menambahkan musik dapat membuat blog Anda menonjol dari yang lain dan memberikan pengalaman unik bagi pengunjung.

Metode Menambahkan Musik ke Blog

1. Menggunakan HTML5 Audio Tag HTML5 menyediakan cara sederhana untuk menambahkan audio ke halaman web menggunakan tag <audio>. Berikut adalah langkah-langkah untuk menambahkan musik menggunakan HTML5:
• Langkah 1: Siapkan File MP3 Pastikan Anda memiliki file MP3 yang ingin Anda tambahkan ke blog Anda. Unggah file tersebut ke server hosting Anda atau gunakan layanan penyimpanan cloud seperti Google Drive.
• Langkah 2: Tambahkan Kode HTML Tambahkan kode HTML berikut ke dalam postingan atau halaman blog Anda:
• <audio controls>
•   <source src="path/to/your/music.mp3" type="audio/mpeg">
•   Your browser does not support the audio element.
• </audio>

Gantilah path/to/your/music.mp3 dengan URL file MP3 Anda.

• Contoh Kode HTML:
• <audio controls>
•   <source src="https://example.com/music.mp3" type="audio/mpeg">
•   Your browser does not support the audio element.
• </audio>
1. Menggunakan SoundCloud SoundCloud adalah platform populer untuk berbagi musik yang juga menyediakan fitur embed untuk menambahkan musik ke blog Anda. Berikut adalah langkah-langkah untuk menggunakan SoundCloud:
• Langkah 1: Buat Akun SoundCloud Jika Anda belum memiliki akun SoundCloud, buat akun terlebih dahulu dan unggah musik Anda ke SoundCloud.
• Langkah 2: Dapatkan Kode Embed Setelah musik Anda diunggah, buka halaman musik tersebut dan klik tombol “Share”. Pilih opsi “Embed” dan salin kode embed yang diberikan.
• Langkah 3: Tambahkan Kode Embed ke Blog Tambahkan kode embed yang telah Anda salin ke dalam postingan atau halaman blog Anda. Contoh kode embed SoundCloud:
• <iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/your-track-id&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>

Gantilah your-track-id dengan ID track SoundCloud Anda.

3. Menggunakan Google Drive Google Drive dapat digunakan untuk menyimpan file MP3 dan membuat link langsung ke file tersebut. Berikut adalah langkah-langkah untuk menggunakan Google Drive:
• Langkah 1: Unggah File MP3 ke Google Drive Unggah file MP3 Anda ke Google Drive dan pastikan file tersebut diatur sebagai “Public” atau “Anyone with the link”.
• Langkah 2: Dapatkan Link Langsung Klik kanan pada file MP3 dan pilih “Get link”. Salin link yang diberikan.
• Langkah 3: Tambahkan Kode HTML ke Blog Gunakan kode HTML berikut untuk menambahkan musik dari Google Drive ke blog Anda:
• <audio controls>
•   <source src="https://drive.google.com/uc?export=download&id=your-file-id" type="audio/mpeg">
•   Your browser does not support the audio element.
• </audio>

Gantilah your-file-id dengan ID file Google Drive Anda.

4. Menggunakan SCM Music Player SCM Music Player adalah pemutar musik gratis yang dapat diintegrasikan ke dalam blog Anda. Berikut adalah langkah-langkah untuk menggunakan SCM Music Player:
• Langkah 1: Kunjungi Situs SCM Music Player Buka situs SCM Music Player di scmplayer.net.
• Langkah 2: Konfigurasi Pemutar Musik Pilih skin, tambahkan URL musik Anda, dan sesuaikan pengaturan lainnya sesuai keinginan Anda.
• Langkah 3: Dapatkan Kode Embed Setelah selesai mengkonfigurasi, salin kode embed yang diberikan.
• Langkah 4: Tambahkan Kode Embed ke Blog Tambahkan kode embed ke dalam template blog Anda atau di bagian HTML postingan. Contoh kode embed SCM Music Player:
• <script type="text/javascript" src="https://scmplayer.net/script.js" data-config="{'skin':'skins/black/skin.css','volume':50,'autoplay':false,'shuffle':false,'repeat':1,'placement':'top','showplaylist':false,'playlist':[{'title':'Your Song Title','url':'https://example.com/music.mp3'}]}"></script>

Studi Kasus: Menambahkan Musik ke Blog Menggunakan HTML5 dan SoundCloud

Latar Belakang Seorang blogger ingin menambahkan musik ke blognya untuk meningkatkan pengalaman pengunjung. Dia memutuskan untuk menggunakan HTML5 untuk menambahkan musik lokal dan SoundCloud untuk menambahkan musik dari platform online.

Langkah-langkah yang Diambil

1. Menggunakan HTML5 untuk Menambahkan Musik Lokal:
• Blogger mengunggah file MP3 ke server hostingnya.
• Dia menambahkan kode HTML berikut ke dalam postingan blognya:
• <audio controls>
•   <source src="https://example.com/music.mp3" type="audio/mpeg">
•   Your browser does not support the audio element.
• </audio>
2. Menggunakan SoundCloud untuk Menambahkan Musik Online:
• Blogger membuat akun SoundCloud dan mengunggah musiknya.
• Dia mendapatkan kode embed dari SoundCloud dan menambahkannya ke dalam postingan blognya:
• <iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/your-track-id&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>

Hasil Dengan menggunakan HTML5 dan SoundCloud, blogger berhasil menambahkan musik ke blognya. Pengunjung blog memberikan umpan balik positif dan menghabiskan lebih banyak waktu di blog tersebut.

Tips dan Trik Menambahkan Musik ke Blog

1. Pilih Musik yang Sesuai: Pilih musik yang sesuai dengan tema dan suasana blog Anda. Pastikan musik tidak mengganggu pembaca.
2. Perhatikan Hak Cipta: Pastikan Anda memiliki hak untuk menggunakan musik yang Anda tambahkan ke blog Anda. Gunakan musik bebas royalti atau dapatkan izin dari pemilik hak cipta.
3. Gunakan Format yang Didukung: Pastikan file musik Anda dalam format yang didukung oleh browser, seperti MP3.
4. Uji di Berbagai Perangkat: Uji pemutar musik di berbagai perangkat dan browser untuk memastikan kompatibilitas.
5. Sesuaikan Volume: Atur volume pemutar musik agar tidak terlalu keras atau terlalu pelan. Berikan kontrol volume kepada pengunjung.

Kesimpulan

Menambahkan musik ke blog Anda dapat meningkatkan pengalaman pengunjung dan membuat blog Anda lebih menarik. Dengan menggunakan berbagai metode seperti HTML5, SoundCloud, Google Drive, dan SCM Music Player, Anda dapat dengan mudah menambahkan musik ke blog Anda. Dengan mengikuti langkah-langkah dan tips yang dijelaskan dalam artikel ini, Anda dapat membuat blog yang lebih dinamis dan menarik.

Artikel sebelum diperbarui: 

Cara Pasang Lagu di Blog - Cara memasang/memberi musik/lagu mp3 di blog - Aneka widget memang bisa kita pasang di blog kita, baik widget yang berguna ataupun widget yang kurang bermanfaat keberadaannya, baca juga artikel cara memasang salah satu widget berguna berikut: cara pasang download artikel file pdf di blog. Dan pada kesempatan kali ini saya akan share salah satu widget blog yang sifatnya hiburan. Mau kan setiap blognya klo dikunjungi ada musik/lagunya? Relatif. . Tapi gada salahnya buat dipasang di blog sebagai penghilang penat, sambil baca isi postingan. Apalagi klo lagu yang disajikan enak-enak. Jadi pengunjung blog yang mampir baca-baca merasa nyaman dengan lagu yang kita putar di blog. hehe.. Banyak penyedia layanan Music Player untuk blog dengan berbagai macam model dan bentuk. Dan kali ini saya akan coba Share Widget Musik Player yang bentuknya toolbar yang bisa kita pasang diatas maupun dibawah blog. Kita akan menggunakan jasa gratis dari SCM Music Player. Ini dia sedikit kelebihan yang diberikan dari web musik player gratis ini :

- Support Blogger, Wordpress, Tumblr

- Mp3, Mp4, RSS Podcast atau Youtube Playlist

- Compatible dengan Crome, Firefox, Opera, Safari, IE

- Desain bebas utk Custom Skin RSS

Tertarik untuk mencoba ? Langsung aja berikut cara memasang musik lagu mp3 di blog kita:

Cara membuatnya cukup mudah hanya ada 3 Step: Choose Skin > Edit Playlist > Configure Settings

1. Pertama Choose Skin. Disini kita bisa memilih Toolbar Skin yang akan kita pasang nantinya di blog atau kita bisa menggunakan Custom Skin CSS. Sebagai contoh disini saya akan menggunakan Skin yang berwarna hitam, seperti gambar dibawah ini:

2. Selanjutnya berlanjut pada Edit Playlist. Pada tahap ini kita bisa menyusun Playlist lagu secara manual dengan memasukkan judul dan link lagu yang bisa kita dapatkan di youtube, 4shared atau dari web penyedia musik lainnya. Atau kita bisa memanfaatkan RSS Podcast dari Playlist Youtube yang kita miliki. Bagi pengguna jasa Mbah Google pasti sangat mudah utk mempunyai akun dari Youtube selain G+, Blogger,  dll.  Sebagai contoh pemasangan disini saya akan memasang lagu secara manual dengan memasang link lagu dari Youtube. Buka Youtube > pilih lagu yang diinginkan. sebagai contoh saya pasang lagu dari Seconhandserenade - Is There Anybody Out There. Ambil/copy Linknya dan pastekan di edit playlist.

3. Berlanjut ke langkah Configure Settings, setting sesuai keinginan kita, Auto Start/Tidak, Shuffle Playback'a, Volume'a, Toolbar'a diatas/dibawah. Contohnya saya akan setting seperti gambar di bawah ini:

Terakhir klik Done utk mengambil kode scriptnya

4. Proses terakhir pemasangan pada blog. Sobat dapat memasangnya di dalam Template HTML atau pada Add Gadget/HTML di tata letak. Copy kode script'a dan pastekan dibawah <body> atau pada add gadget/HTML di tata letak.

Hasilnya bisa lihat disini: DEMO