pwa detect android volume change buttons event

Question

I have a pwa built with react and have gotten twa .apk from it using the pwabuilder.com, having a mute video playing on my screen, I want to unmute the video when the user presses the volume change buttons of the android mobile device,

is there a way to detect this? (without using other technologies like react-native or ionic etc)

Ingenious_Hans · Answer 1 · 2023-05-06T11:35:34.800

0

Try this, but will depend on the device and browser used Implementing the volumechange listener

window.addEventListener('volumechange', function() {
  // Get the current volume level
  var volume = Math.round((window.volume * 100));

  // Check if the volume has increased or decreased
  if (window.lastVolume > window.volume) {
    // Volume has decreased
    
  } else if (window.lastVolume < window.volume) {
    // Volume has increased
    
  }

  // Update the last volume value
  window.lastVolume = window.volume;
});

// Initialize the last volume value
window.lastVolume = window.volume;

edited May 06 '23 at 11:35

answered May 06 '23 at 11:23

Ingenious_Hans

724
5
16

thanks for your quick answer, but no 'keydown' events are triggered when pressing the android volume keys. I've already tried that and did not work. – moeinghasemi May 06 '23 at 11:26
Try this change – Ingenious_Hans May 06 '23 at 11:36
volumechange event works only on media tags, like audio or videos – moeinghasemi May 06 '23 at 17:21
This doesn't work for me. But i tested html/js on mobile without it being installed as PWA. But i don't think it would make a difference – Andrei F Jun 15 '23 at 08:16
@moeinghasemi did you manage to find an answer for this? – Andrei F Jun 15 '23 at 08:17
hi @AndreiF, as far as I searched and asked senior developers, it seems there is no way to detect this event in browser, though in pwa. if detecting such events is crucial and important, you may need to use native technologies. – moeinghasemi Jun 18 '23 at 09:04

pwa detect android volume change buttons event

1 Answers1