WEBサイトの音量を調整する方法（たぶんJavaScript？）

Question

###実現したいこと
埋め込んだiframeタグ、audioタグ、videoタグ、などなど含め、

とりあえず「WEBサイトから発せられるすべての音」を調整したい

のですが、もしそのような方法がございましたら教えて頂けませんでしょうか。

###実装イメージ
音量調整バーを設置し、それをいじると「WEBサイトから発せられるすべての音」が調整できるということです。不可能でしょうか？

イメージとしては以下で、

var volume = '「WEBサイトから発せられるすべての音」';

が代入できればという感じになります。

<div>
  <button type="button" onclick="volumeControl(1);">音量を上げる</button>
  <button type="button" onclick="volumeControl(-1);">音量を下げる</button>
</div>

<script type="text/javascript">
    function volumeControl(flag) {
      var volume = '「WEBサイトから発せられるすべての音」';
      if (0 < flag) {
        if (0.9 < volume) {
          volume = 1;
        } else {
          volume  += 0.1;
        }
      } else {
        if (volume  < 0.1) {
          volume = 0;
        }
        else {
          volume -= 0.1;
        }
      }
    }
</script>

例えばFirefoxの場合ですがブラウザのタブの音量アイコンをクリックすると、「WEBサイトから発せられるすべての音」を

消すか否か

だけは調整できるので、それを踏まえれば今回の質問も技術には可能だろうと思ったのですが…

Answer 1

あまり詳しくないですが、以下を参考に考えられる点を挙げます。

https://www.pazru.net/html5/Video/040.html#e1

・音量調整は、動画そのものに対して行なっているのではなく、動画を包括しているaudioタグに対して行なっている。

ということは、bodyタグの前あたりにaudioタグを仕込んでおけば、body配下で動画タグを10個埋め込んだとしても、jsで音量調整すれば対象コンテンツの音量は一括調整することができるのではと思われます。

しかし、bodyタグの前あたりにaudioタグを仕込むのはHTML構造的に不適切だと思うので、
body配下の対象箇所でaudioタグから繰り返し構文で、classは同一のものにして表示させれば良いと思います。
同一のclassにすることで、jsの処理はひとつで済むはずなので。

アマゾンミュージックが良い例ではないでしょうか？
https://music.amazon.co.jp/home?do=play&playlistAsin=B08461ZB7V

1画面内に、複数のアルバムがあり、アルバムをクリックすると画面遷移することなく音声再生されるが、
この複数の音声は、個別に音量調整しているわけではなくグローバルナビの調整バーによってブラウザ（対象画面）の音量を調整していると言える作りになっていると思います。

Comments

[otsukisama]

>bodyタグの前あたりにaudioタグを仕込んでおけば

audioタグの中に置けるものは限られていて、これをやるとbodyタグの中身は表示されなくなってしまうようです。もちろん埋め込まれたiframeタグをaudioタグで囲めばiframeタグが表示されなくなってしまいます。

>アマゾンミュージックが良い例ではないでしょうか？
>バーによってブラウザ（対象画面）の音量を調整していると言える作りになっていると思います。

うーん、これもやはりaudioタグだから調整できるだけではないでしょうか。ブラウザの音量を調整しているのだろうとお考えになったのはどうしてですか？