Javascript detect if volume can be set

Question

Can you detect if volume can be set with javascript? Like for example to see if you are on ios browser (but not detecting ios just if volume can be set). I tried something like this but it always returns true.

If I am on ios I want to hide my volume button in the player. I know I can detect ios, but I wanted to go step further and possibly detect if volume can be changed.

var audio = document.createElement("audio");
    if(!audio) return false;
    audio.volume = 0;
    return audio.volume == 0 ? true : false;

Can you provide an example of a situation where you expect to not be able to set the volume? — Felix Kling, Dec 19 '19 at 21:32
Pretty sure there is no browser API exposing anything like this. — Bryantee, Dec 19 '19 at 21:39

score 1 · Answer 1 · answered Dec 18 '20 at 10:54

Getting same issue on iOS Safari. I can suggest async variant with volumechange event listener.

function testMediaElementVolumeSetterAsync () {
  const timeoutPromise = new Promise(resolve => setTimeout(resolve, 1e3, false))
  const promise = new Promise((resolve) => {
    let video = document.createElement('video')
    const handler = () => {
      video.removeEventListener('volumechange', handler)
      video = null

      resolve(true)
    }

    video.addEventListener('volumechange', handler)

    video.volume = 0.5
  })

  return Promise.race([promise, timeoutPromise])
}

score 0 · Answer 2 · answered Dec 19 '19 at 21:52

0

Only think I could think of would be to listen for the volumechange event (which has universal support), and then set the volume like you're doing (which according to MDN has unknown support in many browsers) and see if it fires?

answered Dec 19 '19 at 21:52

Alex Wayne

145,435
42
271
302

score 0 · Answer 3 · answered Dec 11 '20 at 21:17

0

I had the same issue and after a couple hours I resigned myself to detecting iOS altogether. I resisted but now the code actually feels cleaner.

I tried Alex's idea which almost worked as the event is not triggered on iOS but is on other platforms. However, the fact that setting the volume happens synchronously but the event happens asynchronously made it tricky.

answered Dec 11 '20 at 21:17

simlmx

658
8
12

You are saying Alksey's solutiong doesn't work in some scenarios? What are they? Seems to be working for me, unless I am missing some edge cases? – Mark Fisher Jan 18 '21 at 13:12

Javascript detect if volume can be set

3 Answers3