Media Notification Bridge

1Apa itu Media Notification Bridge?#

Saat situs web Anda memutar musik atau audio, Android tidak mengetahuinya. Tidak ada pemutar di layar kunci, tidak ada sampul album, tidak ada tombol media di panel notifikasi.

Media Notification Bridge memperbaiki ini. Kode JavaScript Anda memberi tahu Android:

• Lagu apa yang sedang diputar (judul, artis, sampul)
• Sedang diputar atau dijeda

Android lalu menampilkan notifikasi media yang layak dengan kontrol. Saat pengguna menekan Play/Pause/Next/Prev di notifikasi atau layar kunci, Android memanggil balik JavaScript Anda sehingga Anda dapat menanggapinya.

Anggap sebagai jembatan dua arah:
JS Situs Web Anda ⟷ Layar Kunci Android / Notifikasi

2Aktifkan di generator#

Di Langkah 4 generator:

1. Aktifkan '🎵 Media Notification'
2. Buat APK Anda

Sekarang JS situs web Anda memiliki akses ke window.WebToApk dengan metode media.

3Langkah 1 - Beri tahu Android apa yang sedang diputar#

Panggil ini dari JS situs web Anda setiap kali lagu baru dimulai. Android akan langsung memperbarui notifikasi dan layar kunci.

// 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)
);

4Langkah 2 - Perbarui status Play / Pause#

Panggil ini setiap kali pemutaran dimulai, dijeda, atau posisi berubah. Android memakainya untuk menampilkan tombol yang tepat (▶ atau ⏸) dan mengisi bilah geser.

// 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);

5Langkah 3 - Dengarkan penekanan tombol#

Pengguna dapat menekan Play/Pause/Next/Prev di notifikasi atau layar kunci. Situs web Anda harus mendefinisikan fungsi callback ini untuk menerima aksi tersebut dan menanggapinya.

// 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;
  }
};

6Langkah 4 - Hapus notifikasi saat dihentikan#

Saat pengguna menghentikan pemutaran sepenuhnya (bukan sekadar jeda), panggil ini untuk mengembalikan notifikasi ke pesan dasar 'Running in background' dan menghapus kontrol media.

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

7Mengapa Play/Pause berfungsi otomatis, tetapi Next/Prev memerlukan kode#

Aplikasi kami menyertakan 'Automatic Media Tracker'. Jika Anda tidak menulis kode khusus, aplikasi otomatis mendeteksi saat tag <video> atau <audio> standar sedang diputar, dan membuat tombol Play dan Pause berfungsi otomatis sebagai cadangan.

Namun, pemutar media HTML5 standar TIDAK memiliki perintah 'Next' atau 'Previous' yang universal (karena secara bawaan tidak mendukung playlist). Agar Next/Prev berfungsi, situs web Anda HARUS secara eksplisit memakai API MediaSession standar (navigator.mediaSession.setActionHandler) atau mendefinisikan callback window.WebToApkOnMediaAction untuk memberi tahu aplikasi apa yang harus dilakukan saat tombol-tombol itu ditekan.

8Contoh lengkap yang berfungsi#

Contoh lengkap - tempelkan ini ke situs web Anda untuk menyambungkan elemen audio HTML5 ke notifikasi media 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
};

9Tampilan notifikasi#

Notifikasi media muncul di panel tarik-turun dan di layar kunci:

┌───────────────────────────────────────┐
│ 🎵 [Your App Name] │
│ Bohemian Rhapsody │
│ Queen │
│ [album art] ⏮ ⏸ ⏭ │
└───────────────────────────────────────┘

• ⏮ Prev - memanggil WebToApkOnMediaAction('prev') Anda
• ⏸ / ▶ - memanggil 'pause' atau 'play'
• ⏭ Next - memanggil 'next'

Tombol headset Bluetooth dan Android Auto juga memicu callback yang sama secara otomatis.

10Persyaratan & batasan#

✅ Mengharuskan sakelar 'Foreground Service' juga AKTIF (notifikasi media membutuhkan layanan yang berjalan)

✅ Sampul diambil dari URL yang Anda berikan - harus berupa gambar yang dapat diakses publik (HTTPS lebih disarankan)

✅ Berfungsi dengan elemen audio atau video HTML5 apa pun, atau pustaka pemutar musik JS apa pun

⚠️ Jika Anda tidak memanggil setPlaybackState(), tombol akan muncul tetapi Android tidak tahu status saat ini - selalu panggil setelah play/pause

⚠️ window.WebToApk hanya tersedia di dalam aplikasi yang dihasilkan. Selalu lindungi panggilan dengan:
if (window.WebToApk) { ... }

11Pengaman untuk pengujian di browser#

Situs web Anda juga terbuka di browser biasa yang tidak memiliki window.WebToApk. Gunakan pembungkus ini agar kode tidak error di 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]);