※この記事はFC2ブログのこの記事と内容ほぼ同じ。
※上記のFC2ブログがプログラミングのジャンルではなく、備忘録として書いていたものをQiita用に体裁を整えて書いています

※＠2024/07/12：見出し体裁修正(古い記事のためMarkdown記法が無効になってた)

前書き

audio・videoタグ、どちらも音量初期値、何もしなかったら100%(=最大)なので、一括指定するjavascript。ページに複数個設置してても個別に設定しなくてOK。

※ちょっと検索してもスグ出てこなかったので自作
※⚠️ audio・videoタグは、ブラウザ毎にUI (見た目)が異なります
※⚠️サンプルページとか用意してないけどこれで動作するはず

動作確認：Chrome、firefox、Safari (2019年６月頃の最新版)
※古すぎるブラウザはどうだかもはや預かり知らぬ

js部分

この例では「ページに設置した全てのaudio videoタグ」の音量初期値を50%(=半分)に設定しています
そして、idをつけたaudio・videoタグに個別に設定することも可能 (使用しないならその部分は削除可)
「'」シングルクォーテーションで囲ってるid名などは「"」ダブルクォーテーションでも構いません
　　これは個人的に普段 htmlは「"」ダブル、javascriptは「'」シングルで囲ってるので単にその名残です
冒頭 'use strict'; はなくてもいいっす
const mediasVol_def=function(){ 部分は function ediasVol_def(){というのでもいいです(関数式か関数文かの違い)

下記をhtmlの <script> 〜 </script>間に記述します。
(もしくは、html側でjsファイルを読み込むようにするか)

sample.js

'use strict';

/* audio・video 音量初期値の設定 */
const mediasVol_def=function(){
  //範囲： 0〜1 の間　※初期値=1(100%の最大)
   
  //audioの数だけ全部音量0.5(=50%)
  const audios=document.getElementsByTagName('audio');
  const len1=audios.length;
  for(let n=0; n>len1; n++) audios[n].volume = 0.5;
    
  //videoの数だけ全部音量0.5(=50%)
  const videos=document.getElementsByTagName('video');
  const len2=videos.length;
  for(let n=0; n<len2; n++ ) videos[n].volume = 0.5; 

  /*- - - - - -下記は なければ削除して可 - - - - - -*/
  // 特定のidのaudioの音量設定
  const a1=document.getElementById('a1'); //('a1')の a1は例
  a1.volume = 0.8; // 0〜1 の間で
  //2コ以上あるときは下記のように記述していく
  //const a2=document.getElementById('a2');
  //a2.volume=0.7; //例  

  //特定のidのvideoの音量設定
  const v1=document.getElementById('v1'); //('v1')の v1は例
  v1.volume = 0.6; // 0〜1 の間で
  //2コ以上あるとき 以下略 
  /*- - - - - - - - - - - - - - - - - - - - - - -*/
}
//ページ読み込み時に処理
window.addEventListener('DOMContentLoaded' , function(){
      mediasVol_def();
}, false);

※ちなみに、htmlタグ内における<script>〜</script>の記述位置については比較的どこでも問題ないっぽい。

　1. <head> 〜 </head>間 (<body>直前の<head>〜 </head>間 )
　2. </body>直後　
　3. あるいはbodyタグ内・divタグ内など、ページ途中どこでも

##id取得を $('id名') で済ます(便利)
いちいちdocument.getElementByIdと書かなくていいようにするヤツです。
↓普通はこう書きます

sample.js抜粋

  // 特定のidのaudioの音量設定
  const a1=document.getElementById('a1'); 
  a1.volume = 0.8; // 0〜1 の間で

これを、あらかじめ
~~↓どっか書いておくと…~~
↓const始まり(関数式)の書き方の場合、getなんちゃらを使うより前に書き、
↓function始まり(関数文)の書き方の場合、どこでもスキなヶ所に書いておく...

js

//この1行書いておく(関数式)
const $ =(id)=>{ return document.getElementById(id) }

//あるいはこの書き方(関数文)
function $(id){ return document.getElementById(id) }

こうすることで、全てのid取得をいちいちdocument.getElementByIdと書かなくて済むようになる。つまりdocument.getElementById('スキなID名')と書かなくて$('スキなID名')と書けばよくなる。

↓id取得を $('id名') で済ませて書く場合の例

例1：sample.js抜粋

// 特定のidのaudioの音量設定
const a1 = $('a1'); //←Σ(꒪﹃꒪ )なんという省スペース！
a1.volume = 0.8; // 0〜1 の間で

この例の場合上記2行分に分けた書き方は下記の1行で済ませられる

例2：sample.js抜粋

// 特定のidのaudioの音量設定
$('a1').volume = 0.8; // 0〜1 の間で

audioタグ・videoタグ部分

あと、audioタグ・videoタグの書式(個人的最低限)
※他にもある様々な属性値は省略
※下記はhtml内の抜粋です

sample.html

<audio src="mp3などのURL" controls preload="metadata"></audio>

<video src="mp4などのURL" controls preload="metadata"></video>