मीडिया नोटिफ़िकेशन ब्रिज

1Media Notification Bridge क्या है?#

जब आपकी वेबसाइट संगीत या ऑडियो बजाती है, Android को इसका पता नहीं होता। न लॉक-स्क्रीन प्लेयर, न एल्बम आर्ट, न नोटिफ़िकेशन शेड में मीडिया बटन।

Media Notification Bridge यही ठीक करता है। आपका JavaScript कोड Android को बताता है:

• कौन-सा गाना बज रहा है (शीर्षक, कलाकार, कवर आर्ट)
• बज रहा है या रुका है

फिर Android कंट्रोल के साथ एक सही मीडिया नोटिफ़िकेशन दिखाता है। जब उपयोगकर्ता नोटिफ़िकेशन या लॉक स्क्रीन पर Play/Pause/Next/Prev दबाता है, Android आपके JavaScript को वापस कॉल करता है ताकि आप जवाब दे सकें।

इसे दो तरफ़ा ब्रिज समझें:
आपकी वेबसाइट का JS ⟷ Android लॉक स्क्रीन / नोटिफ़िकेशन

2जनरेटर में चालू करें#

जनरेटर के चरण 4 में:

1. '🎵 Media Notification' को ON करें
2. अपना APK बनाएँ

अब आपकी वेबसाइट का JS मीडिया मेथड्स के साथ window.WebToApk तक पहुँच सकता है।

3चरण 1 - Android को बताएँ क्या बज रहा है#

जब भी कोई नया ट्रैक शुरू हो, इसे अपनी वेबसाइट के JS से कॉल करें। Android नोटिफ़िकेशन और लॉक स्क्रीन तुरंत अपडेट कर देगा।

// When a new song starts playing:
window.WebToApk.setMediaMetadata(
  'Bohemian Rhapsody',          // track title
  'Queen',                       // artist name
  'https://yoursite.com/art.jpg' // cover art URL (or '' to skip)
);

4चरण 2 - Play / Pause की स्थिति अपडेट करें#

जब भी प्लेबैक शुरू हो, रुके, या पोज़िशन बदले, इसे कॉल करें। Android इससे सही बटन (▶ या ⏸) दिखाता है और सीक बार भरता है।

// When playback starts:
window.WebToApk.setPlaybackState(
  true,   // isPlaying (true = playing, false = paused)
  30000,  // current position in milliseconds (30 seconds)
  240000  // total duration in milliseconds (4 minutes)
);

// When the user presses pause on your site:
window.WebToApk.setPlaybackState(false, 30000, 240000);

5चरण 3 - बटन दबने को सुनें#

उपयोगकर्ता नोटिफ़िकेशन या लॉक स्क्रीन पर Play/Pause/Next/Prev दबा सकता है। इन क्रियाओं को पाने और जवाब देने के लिए आपकी वेबसाइट को यह कॉलबैक फ़ंक्शन तय करना होगा।

// Define this ONCE, early in your page JS:
window.WebToApkOnMediaAction = function(action) {
  switch (action) {
    case 'play':
      myAudioPlayer.play();
      break;
    case 'pause':
      myAudioPlayer.pause();
      break;
    case 'next':
      playNextTrack();
      break;
    case 'prev':
      playPrevTrack();
      break;
    case 'stop':
      myAudioPlayer.pause();
      myAudioPlayer.currentTime = 0;
      break;
  }
};

6चरण 4 - रुकने पर नोटिफ़िकेशन हटाएँ#

जब उपयोगकर्ता प्लेबैक पूरी तरह रोक दे (सिर्फ़ पॉज़ नहीं), तो नोटिफ़िकेशन को वापस सामान्य 'Running in background' संदेश पर लाने और मीडिया कंट्रोल हटाने के लिए इसे कॉल करें।

// When user stops / closes the player:
window.WebToApk.clearMediaNotification();

7Play/Pause अपने आप क्यों चलता है, पर Next/Prev के लिए कोड क्यों चाहिए#

हमारे ऐप में एक 'Automatic Media Tracker' है। अगर आप कोई कस्टम कोड नहीं लिखते, तो ऐप अपने आप पहचान लेता है कि कब सामान्य <video> या <audio> टैग चल रहे हैं, और Play तथा Pause बटन अपने आप काम करने लगते हैं।

लेकिन सामान्य HTML5 मीडिया प्लेयर्स में 'Next' या 'Previous' का कोई सार्वभौमिक कमांड नहीं होता (क्योंकि वे प्लेलिस्ट को स्वाभाविक रूप से सपोर्ट नहीं करते)। Next/Prev काम करवाने के लिए आपकी वेबसाइट को मानक MediaSession API (navigator.mediaSession.setActionHandler) इस्तेमाल करनी ही होगी, या window.WebToApkOnMediaAction कॉलबैक तय करना होगा, ताकि ऐप को पता चले कि उन बटनों के दबने पर क्या करना है।

8पूरा काम करने वाला उदाहरण#

पूरा उदाहरण - HTML5 ऑडियो एलिमेंट को Android मीडिया नोटिफ़िकेशन से जोड़ने के लिए इसे अपनी वेबसाइट में चिपकाएँ:

var audio = document.getElementById('myAudio'); // your <audio> element

// — Send metadata when track loads —
audio.addEventListener('loadedmetadata', function() {
  window.WebToApk.setMediaMetadata(
    document.title,
    'My Radio Station',
    'https://yoursite.com/logo.png'
  );
});

// — Keep Android in sync with playback state —
audio.addEventListener('play', function() {
  window.WebToApk.setPlaybackState(
    true,
    Math.round(audio.currentTime * 1000),
    Math.round(audio.duration * 1000) || 0
  );
});
audio.addEventListener('pause', function() {
  window.WebToApk.setPlaybackState(
    false,
    Math.round(audio.currentTime * 1000),
    Math.round(audio.duration * 1000) || 0
  );
});

// — Receive lock-screen button presses —
window.WebToApkOnMediaAction = function(action) {
  if (action === 'play')  audio.play();
  if (action === 'pause') audio.pause();
  // next / prev: implement your playlist logic here
};

9नोटिफ़िकेशन कैसा दिखता है#

मीडिया नोटिफ़िकेशन नीचे खींचने वाले शेड में और लॉक स्क्रीन पर दिखता है:

┌───────────────────────────────────────┐
│ 🎵 [आपके ऐप का नाम] │
│ Bohemian Rhapsody │
│ Queen │
│ [एल्बम आर्ट] ⏮ ⏸ ⏭ │
└───────────────────────────────────────┘

• ⏮ Prev - आपका WebToApkOnMediaAction('prev') कॉल करता है
• ⏸ / ▶ - 'pause' या 'play' कॉल करता है
• ⏭ Next - 'next' कॉल करता है

Bluetooth हेडसेट के बटन और Android Auto भी अपने आप वही कॉलबैक चलाते हैं।

10ज़रूरतें और सीमाएँ#

✅ 'Foreground Service' टॉगल भी ON होना ज़रूरी है (मीडिया नोटिफ़िकेशन के लिए सर्विस चलती रहनी चाहिए)

✅ कवर आर्ट आपके दिए URL से लाया जाता है - यह सार्वजनिक रूप से पहुँच योग्य इमेज होनी चाहिए (HTTPS बेहतर)

✅ किसी भी HTML5 ऑडियो या वीडियो एलिमेंट, या किसी भी JS म्यूज़िक प्लेयर लाइब्रेरी के साथ चलता है

⚠️ अगर आप setPlaybackState() कॉल नहीं करते, तो बटन दिखेंगे पर Android को मौजूदा स्थिति पता नहीं होगी - play/pause के बाद इसे हमेशा कॉल करें

⚠️ window.WebToApk सिर्फ़ बनाए गए ऐप के अंदर उपलब्ध होता है। कॉल हमेशा इस गार्ड के साथ करें:
if (window.WebToApk) { ... }

11ब्राउज़र टेस्टिंग के लिए सुरक्षा गार्ड#

आपकी वेबसाइट सामान्य ब्राउज़रों में भी खुलती है जहाँ window.WebToApk मौजूद नहीं होता। इस रैपर का इस्तेमाल करें ताकि Chrome/Safari में कोड क्रैश न हो:

// Safe wrapper — works in both app and browser:
function sendToAndroid(method, args) {
  if (window.WebToApk && typeof window.WebToApk[method] === 'function') {
    window.WebToApk[method].apply(window.WebToApk, args);
  }
}

// Usage:
sendToAndroid('setMediaMetadata', ['Song Title', 'Artist', 'https://art.jpg']);
sendToAndroid('setPlaybackState', [true, 0, 240000]);