CARA MEMASANG WIDGET RADIO-RADIO SUNNAH DI BLOG ATAU DI WEBSITE

 

Ada beberapa cara  untuk menyematkan radio streaming di HTML, termasuk menggunakan pendekatan iframe, embed, atau audio-only players. Berikut adalah beberapa model alternatif yang bisa Anda gunakan. Pilihan tergantung dari selera masing-masing :

1. Model Iframe. Model ini digunakan jika Anda ingin menyematkan player eksternal.
2. Model Dropdown. Model ini cocok jika Anda ingin daftar pilihan radio (contohnya ada di blog ini)
3. Model Tombol Manual. Model ini mudah diakses untuk beberapa stasiun radio.
4. Model Interaktif. Model ini memberikan pengalaman kontrol yang lebih baik.

 

1. Model Iframe (Sederhana dan Stabil)

Iframe adalah salah satu cara termudah untuk menyematkan streaming jika radio sudah menyediakan player online. Masukkan kode HTML ini di blog/website Anda.

 

<div style="text-align: center;">

  <h3>Radio Salafy Indonesia</h3>

  <iframe

    src=" radioislamindonesia.com/tarbiyah.mp3"

    width="100%"

    height="100"

    style="border: none;"

    allow="autoplay">

  </iframe>

</div>

 

Catatan :

Anda bisa mengganti URL radioislamindonesia.com/tarbiyah.mp3 dengan URL player radio yang  Anda inginkan

Sesuaikan ukuran width dan height sesuai kebutuhan.

 

2. Model Embed (Opsi Alternatif untuk Streaming)

Gunakan elemen <embed> untuk menyematkan stream audio.

 <div style="text-align: center;">

  <h3>Radio Tarbiyah Sunnah Bandung</h3>

  <embed

    type="audio/mpeg"

    src="https://radioislamindonesia.com/tarbiyah.mp3?_=1"

    width="300"

    height="50"

    autostart="false"

    loop="true">

  </embed>

</div>

 

Catatan: Beberapa browser mungkin membatasi penggunaan <embed>, jadi ini kurang direkomendasikan untuk kasus modern.

 

3. Model Dropdown Pilihan Radio

Menggunakan dropdown untuk memilih radio dan memutar streaming. Masukkan kode HTML ini di blog/website Anda.

 <div style="text-align: center;">

  <h3>Radio Salafy Indonesia</h3>

  <select id="radioSelector" onchange="playSelectedRadio()">

    <option value="">Pilih Radio :</option>

    <option value=" https://radioislamindonesia.com/tarbiyah.mp3?_=1" />Radio Tarbiyah Sunnah Bandung</option>

    <option value=" https://radioislamindonesia.com/radiohidayah.mp3" />Radio Hidayah Pekanbaru </option>

    <option value=" https://sunnah.radio.yufid.com/;stream.mp3" />Radio Kita Cirebon</option>

  </select>

 

  <audio id="radioPlayer" controls style="margin-top: 10px; width: 100%;">

    Your browser does not support the audio element.

  </audio>

</div>

 

<script>

  function playSelectedRadio() {

    const selector = document.getElementById('radioSelector');

    const player = document.getElementById('radioPlayer');

    const streamUrl = selector.value;

 

    if (streamUrl) {

      player.src = streamUrl;

      player.play().catch(error => {

        alert("Tidak dapat memutar radio. Klik tombol play secara manual.");

        console.error("Error:", error);

      });

    }

  }

</script>

 

Catatan :

Anda bisa menambah  URL player radio yang Anda inginkan, contoh di atas hanya berjumlah 3 UR saja, contoh penggunaan model dropdown dapat dilihat pada blog ini.

 

 4. Model Player dengan Tombol Manual

Menyediakan tombol individual untuk setiap radio. Masukkan kode HTML ini di blog/website Anda.

 <div style="text-align: center;">

  <h3>Radio Salafy Indonesia</h3>

 

  <button onclick="playRadio('https://radioislamindonesia.com/tarbiyah.mp3?_=1')">Radio Tarbiyah Sunnah Bandung</button>

  <button onclick="playRadio('https://radioislamindonesia.com/radiohidayah.mp3')">Radio Hidayah Pekanbaru</button>

  <button onclick="playRadio('https://sunnah.radio.yufid.com/;stream.mp3')">Radio Kita Cirebon</button>

 

  <audio id="radioPlayer" controls style="margin-top: 10px; width: 100%;">

    Your browser does not support the audio element.

  </audio>

</div>

 

<script>

  function playRadio(streamUrl) {

    const player = document.getElementById('radioPlayer');

    player.pause();

    player.src = streamUrl;

    player.load();

    player.play().catch(error => {

      alert("Klik tombol play untuk memutar radio.");

      console.error("Error:", error);

    });

  }

</script>

 

Catatan :

Anda bisa menambah  URL player radio yang Anda inginkan, contoh di atas hanya berjumlah 3 URL saja, contoh penggunaan model dropdown dapat dilihat pada blog ini.

 

 5. Menggunakan Audio Tag Saja

Jika Anda hanya ingin memutar satu radio tanpa opsi tambahan, maka masukkan kode HTML ini di blog/website Anda.

 

<div style="text-align: center;">

  <h3>Radio As-Sunnah Cirebon</h3>

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

    <source src="'https://radioislamindonesia.com/tarbiyah.mp3?_=1" type="audio/mpeg">

    Your browser does not support the audio element.

  </audio>

</div>

 

6. Model Interaktif dengan Play/Pause

Model ini menambahkan tombol play/pause untuk kontrol interaktif. Masukkan kode HTML ini di blog/website Anda.

<div style="text-align: center;">

  <h3>Radio Rodja</h3>

  <button id="playPauseBtn" onclick="togglePlay()">Play</button>

  <audio id="radioPlayer" style="display: none;">

    <source src="'https://radioislamindonesia.com/tarbiyah.mp3?_=1" type="audio/mpeg">

    Your browser does not support the audio element.

  </audio>

</div>

 

<script>

  let isPlaying = false;

 

  function togglePlay() {

    const player = document.getElementById('radioPlayer');

    const btn = document.getElementById('playPauseBtn');

 

    if (!isPlaying) {

      player.style.display = "block";

      player.play();

      btn.textContent = "Pause";

      isPlaying = true;

    } else {

      player.pause();

      btn.textContent = "Play";

      isPlaying = false;

    }

  }

</script>

 

 Pilihan mana yang cocok ?, silahkan komen jika ada pertanyaan