Inilah cara menampilan MP3 dengan tombol download di blog

bagaimana jika anda ingin membuat daftar lagu di blog milik anda sendiri dengan tombol download berikut ini ulasan rinci cara menampilkan daftar lagu di blog dengan menampilkan tombol download.Perhatikan dibawah ini adalah contoh sederhana menampilkan MP3 Audio  dengan tombol download  :

Band Noah DOWNLOAD MP3 

1. NOAH - Abadi (Ft. All Star). Download mp3
2. NOAH - Ada apa denganmu. Download mp3
3. NOAH - Aku dan bintang. Download mp3
4. NOAH - Andaikan kau datang. Download mp3
5. NOAH - Bintang disurga. Download mp3
6. NOAH - Biarkan sendiri. Download mp3 
7. NOAH - Cinta bukan dusta. Download mp3
8. NOAH - Cobalah mengerti. Download mp3
9. NOAH - Dan hilang. Download mp3 
10. NOAH - Dara. Download mp3

1. Menampilkan Daftar Lagu dengan tombol download

        
          
    
  <div class="code-wrapper">
  <details>
    <summary class="code-summary">
      Tampilkan/Sembunyikan Audio Player
       <button class="copy-button" onclick="copyCode()">
       Copy
     </button>
    </summary>
    <div class="music-list">
        <h2 class="list-title">Berita (2012) - NOAH</h2>
        <ul class="tracks">
           <li class="track-item">
                <div class="track-details">
                    <span class="track-number">1</span>
                    <span class="track-title">Raja Negeriku</span>
                      <div class="player-controls" data-audio="URL-FILE-AUDIO-1.mp3">
                        <button class="download-button" data-file="Al-Baqarah-1.mp3" data-url="URL-FILE-AUDIO-1.mp3"></button>
                      </div>
                </div>
            </li>
           <li class="track-item">
                <div class="track-details">
                    <span class="track-number">2</span>
                   <span class="track-title">Jika Kamu</span>
                    <div class="player-controls" data-audio="URL-FILE-AUDIO-2.mp3">
                       <button class="download-button" data-file="Al-Baqarah-2.mp3" data-url="URL-FILE-AUDIO-2.mp3"></button>
                     </div>
                 </div>
           </li>
            <li class="track-item">
                <div class="track-details">
                    <span class="track-number">3</span>
                    <span class="track-title">Separuh Aku</span>
                     <div class="player-controls" data-audio="URL-FILE-AUDIO-3.mp3">
                        <button class="download-button" data-file="Al-Baqarah-3.mp3" data-url="URL-FILE-AUDIO-3.mp3"></button>
                     </div>
                 </div>
            </li>
        </ul>
        <audio id="main-audio" preload="none"></audio>
    </div>
 </details>
</div>

<style>
    /* Gaya Container */
    .code-wrapper{
       font-family: sans-serif;
          margin-bottom: 20px;
     }
    /* Style Details Summary*/
    .code-summary {
      background-color: #f0f0f0;
       padding: 10px 15px;
       border: 1px solid #ddd;
        border-radius: 5px;
      cursor: pointer;
       display: flex;
        align-items: center;
       justify-content: space-between;

    }
     .code-summary:hover {
            background-color:#e1e1e1;
     }
  /* Style Button Copy */
    .copy-button {
        background-color: #3498db;
        color: #fff;
        border: none;
        padding: 8px 12px;
        border-radius: 5px;
        cursor: pointer;
       transition: background-color 0.3s ease;
        }
       .copy-button:hover{
           background-color:#217dbb;
        }

   /* Gaya Container */
   .music-list{
        background-color: #f9f9f9;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 20px;
        margin: 20px 0;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    /* Gaya Judul List */
    .list-title{
          font-weight: bold;
          font-size: 1.3em;
           margin-bottom: 15px;
          padding-bottom: 5px;
           border-bottom: 1px solid #eee;
           color: #2c3e50;
     }
    /* Style List */
    .tracks{
        list-style: none;
         padding: 0;
     }
    /* Gaya List Item */
      .track-item{
         display: flex;
        align-items: center;
        justify-content: space-between;
         padding: 10px;
        border-bottom: 1px solid #eee;
        margin-bottom: 5px
        }
         /* Gaya Detail Track */
    .track-details {
        flex: 1;
        display: flex;
         align-items: center;
    }
     /* Gaya Number Track */
    .track-number{
         margin-right: 10px;
        color: #777;
    }
    /* Gaya Title Track */
     .track-title{
        flex: 1;
         color: #333;
        font-size: 1em;
     }
     /* Gaya Player Controls */
     .player-controls{
          display: flex;
        align-items: center;
          margin-left: 10px;
     }
     /* Gaya Tombol Download */
     .download-button{
             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E");
        background-size: 20px;
        background-repeat: no-repeat;
        background-position: center;
        width: 30px;
         height: 30px;
       border: none;
       background-color: transparent;
        cursor: pointer;
     }
    .download-button:hover{
          background-color:#e9e9e9;
         }
   /* Responsif */
   @media (max-width: 600px) {
      .track-title{
          font-size: 0.9em;
       }
       .track-item{
           padding: 8px;
       }
       .player-controls{
           margin-left: 5px;
       }
    }
</style>
<script>
 function copyCode() {
    const code = `
    <div class="music-list">
    <h2 class="list-title">Berita (2012) - NOAH</h2>
    <ul class="tracks">
         <li class="track-item">
            <div class="track-details">
                <span class="track-number">1</span>
                 <span class="track-title">Raja Negeriku</span>
                  <div class="player-controls" data-audio="URL-FILE-AUDIO-1.mp3">
                   <button class="download-button" data-file="Al-Baqarah-1.mp3" data-url="URL-FILE-AUDIO-1.mp3"></button>
                 </div>
            </div>
       </li>
        <li class="track-item">
            <div class="track-details">
                <span class="track-number">2</span>
                <span class="track-title">Jika Kamu</span>
                   <div class="player-controls" data-audio="URL-FILE-AUDIO-2.mp3">
                   <button class="download-button" data-file="Al-Baqarah-2.mp3" data-url="URL-FILE-AUDIO-2.mp3"></button>
                 </div>
           </div>
       </li>
           <li class="track-item">
            <div class="track-details">
                <span class="track-number">3</span>
                 <span class="track-title">Separuh Aku</span>
                  <div class="player-controls" data-audio="URL-FILE-AUDIO-3.mp3">
                   <button class="download-button" data-file="Al-Baqarah-3.mp3" data-url="URL-FILE-AUDIO-3.mp3"></button>
                 </div>
           </div>
       </li>
    </ul>
     <audio id="main-audio" preload="none"></audio>
</div>

<style>
 /* Gaya Container */
   .music-list{
        background-color: #f9f9f9;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 20px;
        margin: 20px 0;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
       font-family: sans-serif;
    }
    /* Gaya Judul List */
    .list-title{
          font-weight: bold;
          font-size: 1.3em;
           margin-bottom: 15px;
          padding-bottom: 5px;
           border-bottom: 1px solid #eee;
           color: #2c3e50;
     }
    /* Style List */
    .tracks{
        list-style: none;
         padding: 0;
     }
    /* Gaya List Item */
      .track-item{
         display: flex;
        align-items: center;
        justify-content: space-between;
         padding: 10px;
        border-bottom: 1px solid #eee;
        margin-bottom: 5px
        }
         /* Gaya Detail Track */
    .track-details {
        flex: 1;
        display: flex;
         align-items: center;
    }
     /* Gaya Number Track */
    .track-number{
         margin-right: 10px;
        color: #777;
    }
    /* Gaya Title Track */
     .track-title{
        flex: 1;
         color: #333;
        font-size: 1em;
     }
     /* Gaya Player Controls */
     .player-controls{
          display: flex;
        align-items: center;
          margin-left: 10px;
     }
     /* Gaya Tombol Download */
     .download-button{
             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E");
        background-size: 20px;
        background-repeat: no-repeat;
        background-position: center;
        width: 30px;
         height: 30px;
       border: none;
       background-color: transparent;
        cursor: pointer;
     }
    .download-button:hover{
          background-color:#e9e9e9;
         }
   /* Responsif */
   @media (max-width: 600px) {
      .track-title{
          font-size: 0.9em;
       }
       .track-item{
           padding: 8px;
       }
       .player-controls{
           margin-left: 5px;
       }
    }
</style>

<script>
 document.addEventListener('DOMContentLoaded', function () {
    const mainAudio = document.getElementById('main-audio');
     const trackItems = document.querySelectorAll('.track-item');
  trackItems.forEach(track => {
        const playButton = track.querySelector('.play-button');
        const downloadButton = track.querySelector('.download-button');
        const trackDetails = track.querySelector('.track-details');
       const audioFile = track.querySelector('.player-controls').dataset.audio;
        const fileName = track.querySelector('.download-button').dataset.file;
        const urlFile = track.querySelector('.download-button').dataset.url;

       if (playButton) {
        playButton.addEventListener('click', function(){
           mainAudio.src = audioFile
           mainAudio.play()

       });
        }
       if (downloadButton){
         downloadButton.addEventListener('click', function() {
          window.open(urlFile, '_blank');
         });
       }


        trackDetails.addEventListener('click', function(event) {
            if (event.target !== downloadButton){
               mainAudio.src = audioFile
               mainAudio.play();
            }
           });
     });
});
</script>
     `;
      navigator.clipboard.writeText(code)
        .then(() => {
          alert("Kode berhasil disalin!");
        })
        .catch(err => {
         alert('Gagal menyalin kode, silahkan coba manual', err);
        });
    }
</script>
        
    

Use code with caution. Html

Penjelasan Kode:

• music-list: Container utama untuk daftar lagu.

  • background-color, border, border-radius, padding, margin, dan box-shadow: Mengatur tampilan container.

• list-title: Judul daftar lagu.

  • font-weight dan font-size: Mengatur font.

  • border-bottom dan padding-bottom: Menambahkan garis bawah.

  • color: Mengatur warna text

• tracks: Container untuk list item.

• list-style: menghilangkan style list default

  • padding : mengatur jarak dalam list

• track-item: Setiap item lagu.

  • display: flex: Mengatur item agar sejajar.

  • align-items: Mengatur item agar berada di tengah secara vertikal

  • justify-content : Mengatur item agar posisinya rata kiri dan kanan

  • padding: Mengatur jarak dalam setiap list item

  • border-bottom: Mengatur garis bawah

  • margin-bottom: Mengatur jarak bawah antar list item

• track-details: Membungkus detail lagu

  • display: flex: Mengatur item agar sejajar.

  • align-items: Mengatur item agar berada di tengah secara vertikal

  • flex: 1: Membuat item mengikuti sisa tempat yang ada

• track-number: Nomor urut lagu.

  • margin-right: Mengatur jarak dari kanan.

  • color: Mengatur warna text

• track-title: Judul lagu.

  • flex:1: Mengatur lebar item

    • color: Mengatur warna text

    • font-size : Mengatur ukuran font

• player-controls: Container tombol audio.
   display: Mengatur tampilan item menjadi flex

  • align-items: Mengatur item agar berada di tengah secara vertikal
    margin-left : Mengatur jarak dari kiri

• play-button: Tombol play.

  • background-image: Memasukkan gambar tombol play

  • background-size: Mengatur ukuran gambar
    background-repeat: Mengatur agar gambar tidak berulang

    • background-position: Mengatur posisi gambar
      border : Menghilangkan garis tepi

    • background-color : Mengatur warna background

    • cursor: Mengatur cursor

• play-button:hover: Mengatur style ketika cursor berada di atas tombol
  background-color : Mengatur warna background ketika di hover.

• download-button: Tombol download.
  background-image: Memasukkan gambar tombol download

  • background-size: Mengatur ukuran gambar
    background-repeat: Mengatur agar gambar tidak berulang

    • background-position: Mengatur posisi gambar

    • border : Menghilangkan garis tepi

    • background-color : Mengatur warna background

      • cursor: Mengatur cursor

  • download-button:hover: Mengatur style ketika cursor berada di atas tombol

    • background-color : Mengatur warna background ketika di hover.

• @media: Mengatur tampilan responsive
  * font-size : Mengatur ukuran font
  * padding : Mengatur jarak dalam item
  * margin-left : Mengatur jarak kiri

• <audio id="main-audio" preload="none">: Elemen audio utama untuk memutar semua file mp3.

  • preload="none": Mengatur agar tidak memuat audio secara otomatis.

• JavaScript:

  • DOMContentLoaded: memastikan script dijalankan setelah semua element HTML dimuat

  • querySelectorAll : Mendapatkan semua track item

  • forEach : Melakukan perulangan untuk setiap item

  •       `querySelector` : Mendapatkan element dari setiap item.
        

    Use code with caution.

    • addEventListener('click') : Memberikan event klik pada elemen

    • dataset : Mendapatkan data url dan file yang ada di HTML

Cara Penggunaan:

1. Salin Kode: Salin seluruh kode HTML, CSS, dan JavaScript di atas.

2. Buka Blogger/Platform Blog Anda: Masuk ke editor HTML di blog Anda.

3. Tempel Kode: Tempelkan kode HTML dan CSS yang sudah Anda salin ke tempat yang Anda inginkan.

4. Ganti URL:

   • Ganti URL-FILE-AUDIO-1.mp3, URL-FILE-AUDIO-2.mp3, dst dengan URL file audio MP3 Anda masing-masing.

   • Ganti Al-Baqarah-1.mp3, Al-Baqarah-2.mp3, dst dengan nama file yang akan diunduh.

   • Ganti "Berita (2012) - NOAH" dengan judul daftar lagu yang sesuai.

   • Ganti text Raja Negeriku, Jika Kamu dll dengan judul lagu yang sesuai.

5. Pratinjau: Lihat pratinjau dan pastikan tampilan player sudah sesuai di blog Anda, lalu publikasikan.

Penting:

• File Audio MP3: Pastikan file audio murottal Anda berformat MP3 dan URL-nya bisa diakses publik.

• Direct Link: Gunakan direct link (seperti yang sudah kita bahas sebelumnya) untuk memastikan audio player berfungsi dengan baik.

• Atribut Data: Perhatikan atribut data seperti data-audio, data-file, dan data-url di kode HTML. Ini penting agar kode JavaScript dapat berfungsi dengan baik.

• Ikon Play/Download: Ubah atribut background-image: url() pada .play-button dan .download-button dengan path gambar yang anda miliki atau menggunakan url gambar yang ada di web.

Penyederhanaan dan Pengembangan:

• JavaScript: Kode JavaScript yang saya berikan masih sangat sederhana. Anda bisa mengembangkan lebih lanjut dengan menambahkan fitur-fitur lain seperti pengaturan volume, progress bar, dan lainnya.

• CSS: Anda bisa mengubah tampilan daftar lagu ini sesuai dengan selera Anda, termasuk font, warna, layout, dan sebagainya.

Dengan kode ini, Anda dapat menampilkan mp3 lagu dengan tombol download yang sederhana, tetapi terlihat profesional dan mudah digunakan oleh pengunjung. Jika ada pertanyaan lebih lanjut, jangan ragu untuk bertanya.