Javascript检测是否可以设置音量

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;

Answer 1

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])
}

Answer 2

我只能想到的是监听volumechange事件（它具有普遍支持），然后像你正在做的那样设置音量（根据MDN在许多浏览器中都有未知的支持），看看它是否会触发？

Answer 3

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.