html5：audio・videoタグの音量初期値を設定(指定)するjavascript

- - -
※この記事は[FC2ブログのこの記事](http://gtrinthesky.blog.fc2.com/blog-entry-233.html "html5：audio・videoタグの音量初期値を設定(指定)するjavascript")と内容ほぼ同じ。
※上記の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ファイルを読み込むようにするか)

```javascript: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`と書かなくていいようにするヤツです。
↓普通はこう書きます

```javascript:sample.js抜粋
  // 特定のidのaudioの音量設定
  const a1=document.getElementById('a1'); 
  a1.volume = 0.8; // 0〜1 の間で
```
これを、あらかじめ
~~↓どっか書いておくと…~~ 
↓const始まり(関数式)の書き方の場合、getなんちゃらを使うより前に書き、
↓function始まり(関数文)の書き方の場合、どこでもスキなヶ所に書いておく...

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

//あるいはこの書き方(関数文)
function $(id){ return document.getElementById(id) }
```
こうすることで、全てのid取得をいちいち`document.getElementById`と書かなくて済むようになる。つまり`document.getElementById('スキなID名')`と書かなくて`$('スキなID名')`と書けばよくなる。

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

```javascript:例1：sample.js抜粋
// 特定のidのaudioの音量設定
const a1 = $('a1'); //←Σ(꒪﹃꒪ )なんという省スペース！
a1.volume = 0.8; // 0〜1 の間で
```
この例の場合 上記2行分に分けた書き方は下記の1行で済ませられる

```javascript:例2：sample.js抜粋
// 特定のidのaudioの音量設定
$('a1').volume = 0.8; // 0〜1 の間で
```
　
## audioタグ・videoタグ部分
あと、`audio`タグ・`video`タグの書式(個人的最低限)
 ※他にもある様々な属性値は省略
※下記は`html`内の抜粋です

```html:sample.html 
<audio src="mp3などのURL" controls preload="metadata"></audio>

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