※この記事は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ファイルを読み込むようにするか)
'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と書かなくていいようにするヤツです。
↓普通はこう書きます
// 特定のidのaudioの音量設定
const a1=document.getElementById('a1');
a1.volume = 0.8; // 0〜1 の間で
これを、あらかじめ
↓どっか書いておくと…
↓const始まり(関数式)の書き方の場合、getなんちゃらを使うより前に書き、
↓function始まり(関数文)の書き方の場合、どこでもスキなヶ所に書いておく...
//この1行書いておく(関数式)
const $ =(id)=>{ return document.getElementById(id) }
//あるいはこの書き方(関数文)
function $(id){ return document.getElementById(id) }
こうすることで、全てのid取得をいちいちdocument.getElementByIdと書かなくて済むようになる。つまりdocument.getElementById('スキなID名')と書かなくて$('スキなID名')と書けばよくなる。
↓id取得を $('id名') で済ませて書く場合の例
// 特定のidのaudioの音量設定
const a1 = $('a1'); //←Σ(꒪﹃꒪ )なんという省スペース！
a1.volume = 0.8; // 0〜1 の間で
この例の場合 上記2行分に分けた書き方は下記の1行で済ませられる
// 特定のidのaudioの音量設定
$('a1').volume = 0.8; // 0〜1 の間で
audioタグ・videoタグ部分
あと、audioタグ・videoタグの書式(個人的最低限)
※他にもある様々な属性値は省略
※下記はhtml内の抜粋です
<audio src="mp3などのURL" controls preload="metadata"></audio>
<video src="mp4などのURL" controls preload="metadata"></video>