How To Add FM Live Radio Widget To Website?

Namaste दोस्तों! अगर आप अपनी Website पर कुछ ऐसा Feature जोड़ना चाहते हैं जिससे Visitors ज़्यादा देर तक रुकें और आपकी Site ज़्यादा Interactive बने, तो FM Live Radio Widget एक बेहतरीन Option है। इस Beginner‑Friendly Guide में आप सीखेंगे कि अपनी Website पर FM Live Radio Widget कैसे Add करें, वो भी बिल्कुल Step‑By‑Step और बिना किसी Technical Knowledge के।

और सबसे अच्छी बात — मैं आपको इस Article में Widget Code भी दूँगा, जिसे आप बस Copy‑Paste करके आसानी से Setup कर सकते हैं 😊

आज के Digital ज़माने में Users सिर्फ Content पढ़ना ही नहीं चाहते, बल्कि कुछ Live और Entertaining चीज़ें भी पसंद करते हैं। ऐसे में अगर आपकी Website पर Live FM Radio चल रहा हो, तो Visitors को एक अलग Experience मिलता है।

WhatsApp Channel Join Now
Telegram Channel Join Now

चाहे आप:

  • 📰 News Website चलाते हों।
  • ✍ Blog लिखते हों।
  • 🏢 Business Website हो।
  • 🎙 Entertainment Portal हो।

FM Live Radio Widget आपकी Site को:

  • ज़्यादा Interactive बनाता है।
  • User Retention बढ़ाता है।
  • Professional Look देता है।

अब चलिए Detail में समझते हैं 👇

FM Live Radio Widget क्या होता है?

FM Live Radio Widget एक छोटा‑सा Player होता है जो आपकी Website पर Real‑Time Radio Stream चलाता है। इसका मतलब है कि:

  • Visitors आपकी Website पर रहते हुए।
  • Live Radio सुन सकते हैं।
  • बिना किसी App के।
  • Direct Browser से।

यह Widget Automatically Stream करता है और आपको रोज़‑रोज कुछ Update करने की ज़रूरत नहीं पड़ती।

यह बिल्कुल उसी तरह काम करता है जैसे:
Mobile पर FM App बस फर्क इतना है कि यह आपकी Website के अंदर चलता है।

Website पर FM Radio Widget लगाने के फायदे

FM Live Radio Widget लगाने से आपकी Website को कई Benefits मिलते हैं:

  • Visitors ज़्यादा देर तक Site पर रहते हैं।
  • Bounce Rate कम होता है।
  • Website Fun & Engaging बनती है।
  • News या Blog Site को Extra Value मिलती है।
  • Regular Audience बनने में मदद मिलती है।
  Creating a Temporary Login URL Using the Temporary Login Without Password Plugin

खासकर:

  • 🎧 Music Lovers
  • 📰 News Readers
  • 🧑‍💻 Students
  • 📢 Digital Audience

को यह Feature बहुत पसंद आता है।

Widget Add करने के लिए आपको क्या चाहिए?

FM Live Radio Widget Add करने के लिए आपको सिर्फ:

  • आपके पास एक WordPress Website होना चाहिए।
  • Custom HTML Widget Access
  • Live Radio Widget Code
  • बस! और कोई Plugin जरूरी नहीं हैं।
  • Step‑By‑Step – FM Live Radio Widget कैसे Add करें

अब पूरा Process बिल्कुल Easy Steps में समझते हैं 👇

Step 1: WordPress Dashboard पर Login करें

सबसे पहले अपने Browser में जाएँ और Type करें:

yourwebsite.com/wp-admin
yourwebiste.com/wp-login.php

अब:

  • Username
  • Password

डालकर Login करें। Login होते ही आपके सामने WordPress Dashboard खुल जाएगा।

Step 2: Widgets Section खोलें

अब Dashboard से जाएँ:

Appearance → Widgets

यहाँ आपको आपकी Website के सभी Widget Areas दिखेंगे जैसे:

  • Sidebar Widgets
  • Footer Widgets
  • Header Widgets
  • Custom Widgets Areas

आप Radio Widget कहीं भी लगा सकते हैं, लेकिन Sidebar Widget Area सबसे Best जगह होती है।

Step 3: Custom HTML Widget Add करें

अब जिस Area में Widget लगाना है:

  • “Add Block” पर Click करें या ।
  • Search करें — Custom HTML
  • उस Widget को Sidebar में Add कर दें।

अब आपके सामने एक खाली Box खुलेगा।

Step 4: FM Live Radio Widget Code Paste करें

अब नीचे दिया गया Code Copy करें और Custom HTML Box में Paste कर दें 👇

HTML+JS+CSS CODE
<div class=\"wp-radio-widget\">

  <div class=\"wp-radio-header\">
    <div class=\"wp-radio-logo\">📻</div>
    <div>
      <h3>FM Live Radio</h3>
      <span id=\"wpRadioStatus\">Connecting...</span>
    </div>
  </div>

  <div class=\"wp-radio-controls\">
    <button id=\"wpPlayBtn\">▶ Play</button>
    <button id=\"wpPauseBtn\">⏸ Pause</button>
  </div>

  <audio id=\"wpRadioPlayer\" preload=\"none\">
    <source src=\"https://air.pc.cdn.bitgravity.com/air/live/pbaudio001/playlist.m3u8\" type=\"application/x-mpegURL\">
  </audio>

</div>

<style>
.wp-radio-widget{
max-width:360px;
margin:auto;
background:#0f2027;
color:#fff;
padding:18px;
border-radius:14px;
box-shadow:0 8px 25px rgba(0,0,0,.4);
font-family:Arial
}
.wp-radio-header{
display:flex;
align-items:center;
gap:12px
}
.wp-radio-logo{
font-size:30px;
background:#fff;
color:#000;
border-radius:50%;
width:50px;
height:50px;
display:flex;
align-items:center;
justify-content:center
}
.wp-radio-header h3{
margin:0;
font-size:17px
}
#wpRadioStatus{
font-size:13px;
color:#7dd3fc
}
.wp-radio-controls{
margin-top:12px;
display:flex;
gap:8px
}
.wp-radio-controls button{
flex:1;
padding:9px;
border:0;
border-radius:6px;
font-size:14px;
cursor:pointer
}
#wpPlayBtn{background:#00c853}
#wpPauseBtn{background:#ff5252;color:#fff}

/* Mobile */
@media(max-width:480px){
.wp-radio-widget{width:95%}
}
</style>

<script>
(function(){

var player=document.getElementById(\"wpRadioPlayer\");
var status=document.getElementById(\"wpRadioStatus\");

document.getElementById(\"wpPlayBtn\").addEventListener(\"click\",function(){
player.play();
status.innerHTML=\"🔴 Live Playing...\";
});

document.getElementById(\"wpPauseBtn\").addEventListener(\"click\",function(){
player.pause();
status.innerHTML=\"⏸ Paused\";
});

player.addEventListener(\"waiting\",function(){
status.innerHTML=\"🔴 Live Playing...\";
});

})();
</script>

अब: Widget को Save करें Update करें और Done कर दे।

Step 5: Final Preview करें

अब अपनी Website Open करें और Check करें:

  • Radio Player Show हो रहा है।
  • Play Button काम कर रहा है।
  • Sound Proper आ रहा है।
  How to Claim FREE 18-Month Google Gemini Pro Plan (₹35,100 Value)

अगर तुरंत न दिखे तो:

  • Page Refresh करें। अपने कंप्यूटर/लैपटॉप से Ctrl+Shift+R दबाये।
  • या अपने वेब ब्राउज़र का Cache Clear करें।

क्या यह Safe है?

Yes 👍 क्योंकि:

  • यह सिर्फ Audio Player है।
  • कोई Heavy Script नहीं।
  • WordPress Friendly है।
  • Website Slow नहीं करता।

बस ध्यान रखें:

Trusted Streaming Source ही Use करें।

Common Mistakes Avoid करें

  • Wrong Stream Link डालना।
  • HTTPS Website पर HTTP Link Use करना।
  • Cache Clear ना करना।
  • गलत Widget Area चुनना।

अगर आप चाहते हैं कि आपकी Website:

  • ज़्यादा Engaging बने।
  • Visitors को Entertain करे।
  • Professional Look दे।

तो FM Live Radio Widget एक Perfect Feature है।

और सबसे अच्छी बात — इसे Add करना इतना आसान है कि कोई भी Beginner 5 Minute में कर सकता है।

अब आपकी बारी!

अगर यह Article आपको Helpful लगा हो — तो Comment में जरूर बताइए कि आपने Radio Widget कहाँ Add किया और WordPress, Blogging, Tech Tips और Website Tools से जुड़े Daily Updates पाने के लिए हमारे Telegram और WhatsApp Channel जरूर Join करें।

आपकी Feedback ही हमारी सबसे बड़ी Motivation है ❤️

Affiliate Disclosure: Some links in this article may be affiliate links. If you use them, we may earn a small commission at no extra cost to you. This helps support our blog and content. Read full disclosure

Discover more from MTECH4YOU BLOG

Subscribe to get the latest posts sent to your email.

Was this article helpful?
YesNo
Vijay Joshi's avatar

I am a Senior WordPress (CMS) Website Designer and Digital Marketing Expert with over 9 years of experience, having successfully delivered more than 500 websites to clients.

Leave a Comment

Discover more from MTECH4YOU BLOG

Subscribe now to keep reading and get access to the full archive.

Continue reading