レンジスライダーでボリューム調整できるようにする

レンジスライダーでボリューム調整できるようにする
adjust-volume-range-slider

これまでJavaScriptでゲームを作ってきたのですが、レンジスライダーでボリューム調整できるようにする処理は毎回同じなのでここに書くことにしました。

Contents

1 HTML部分
2 initVolume関数の定義

HTML部分

要は initVolume(‘volume’) とやれば <div id = “volume”></div> の部分にボリューム調整用のレンジスライダーが挿入されるようにしたいわけです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レンジスライダーでボリューム調整できるようにする</title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
</head>

<body>

<div id = "volume"></div>

<script src="./app.js"></script>

<script>
    window.addEventListener('load', () => {
        initVolume('volume'); // この1行でボリューム調整用のレンジスライダーを挿入する
    });
</script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>レンジスライダーでボリューム調整できるようにする</title>

</head>

<body>

window.addEventListener('load', () => {

initVolume('volume'); // この1行でボリューム調整用のレンジスライダーを挿入する

});

</script>

</body>

</html>

initVolume関数の定義

まずは音声ファイルを用意しましょう。そしてここからHTMLAudioElementを生成します。そしてこれらを配列に格納します。

app.js

const sound1 = new Audio('./sounds/sound1.mp3');
const sound2 = new Audio('./sounds/sound2.mp3');
const sound3 = new Audio('./sounds/sound3.mp3');

const sounds = [sound1, sound2, sound3];

const sound1 = new Audio('./sounds/sound1.mp3');

const sound2 = new Audio('./sounds/sound2.mp3');

const sound3 = new Audio('./sounds/sound3.mp3');

const sounds = [sound1, sound2, sound3];

initVolume関数を以下のとおり定義します。

let volume = 0.3; // 初期のボリューム

function initVolume(elementId){
    // ローカルストレージに値が保存されているならvolumeに値を設定する
    const savedVolume = localStorage.getItem('hatodemowakaru-volume');
    if(savedVolume)
        volume = Number(savedVolume);

    // div要素（1）を生成し、ここへレンジスライダーとラベル、現在のボリュームの値を表示する要素を追加する
    const $div = document.createElement('div');

    // ラベルの追加
    const $span1 = document.createElement('span');
    $span1.innerHTML = '音量：';
    $div.appendChild($span1);

    // レンジスライダーの追加
    const $range = document.createElement('input');
    $range.type = 'range';
    $range.value = Math.round(volume * 100);
    $range.style.width = '250px';
    $range.style.verticalAlign = 'middle';
    $div.appendChild($range);

    // 現在のボリュームの値を表示する要素を追加
    const $span2 = document.createElement('span');
    $span2.innerText = Math.round(volume * 100);
    $span2.style.marginLeft = '16px';
    $div.appendChild($span2);

    // レンジスライダーが操作されたらvolumeの値と設定されている値の表示を変更する
    $range.addEventListener('input', () => {
        const value = $range.value;
        $span2.innerText = value;
        volume = value / 100;
        setVolume();
    });
    // volumeの値をローカルストレージに保存する
    $range.addEventListener('change', () => localStorage.setItem('hatodemowakaru-volume', volume.toString()));

    // 音量テスト用のボタン（2）を追加する
    const $button = document.createElement('button');
    $button.innerHTML = '音量テスト';
    $button.style.width = '120px';
    $button.style.height = '40px';
    $button.style.marginTop = '12px';
    $button.style.marginLeft = '32px';

    // 音量テスト用のボタンがクリックされたらsounds[0]を再生する
    $button.addEventListener('click', () => {
        sounds[0].currentTime = 0;
        sounds[0].play();
    });

    // （1）と（2）を追加する
    const $element = document.getElementById(elementId);
    $element.appendChild($div);
    $element.appendChild($button);

    setVolume();

    // volume を HTMLAudioElement.volume に反映させる
    function setVolume(){
        for(let i = 0; i < sounds.length; i++)
            sounds[i].volume = volume;
    }
}

let volume = 0.3; // 初期のボリューム

function initVolume(elementId){

// ローカルストレージに値が保存されているならvolumeに値を設定する

const savedVolume = localStorage.getItem('hatodemowakaru-volume');

if(savedVolume)

volume = Number(savedVolume);

// div要素（1）を生成し、ここへレンジスライダーとラベル、現在のボリュームの値を表示する要素を追加する

const $div = document.createElement('div');

// ラベルの追加

const $span1 = document.createElement('span');

$span1.innerHTML = '音量：';

$div.appendChild($span1);

// レンジスライダーの追加

const $range = document.createElement('input');

$range.type = 'range';

$range.value = Math.round(volume * 100);

$range.style.width = '250px';

$range.style.verticalAlign = 'middle';

$div.appendChild($range);

// 現在のボリュームの値を表示する要素を追加

const $span2 = document.createElement('span');

$span2.innerText = Math.round(volume * 100);

$span2.style.marginLeft = '16px';

$div.appendChild($span2);

// レンジスライダーが操作されたらvolumeの値と設定されている値の表示を変更する

$range.addEventListener('input', () => {

const value = $range.value;

$span2.innerText = value;

volume = value / 100;

setVolume();

});

// volumeの値をローカルストレージに保存する

$range.addEventListener('change', () => localStorage.setItem('hatodemowakaru-volume', volume.toString()));

// 音量テスト用のボタン（2）を追加する

const $button = document.createElement('button');

$button.innerHTML = '音量テスト';

$button.style.width = '120px';

$button.style.height = '40px';

$button.style.marginTop = '12px';

$button.style.marginLeft = '32px';

// 音量テスト用のボタンがクリックされたらsounds[0]を再生する

$button.addEventListener('click', () => {

sounds[0].currentTime = 0;

sounds[0].play();

});

// （1）と（2）を追加する

const $element = document.getElementById(elementId);

$element.appendChild($div);

$element.appendChild($button);

setVolume();

// volume を HTMLAudioElement.volume に反映させる

function setVolume(){

for(let i = 0; i < sounds.length; i++)

sounds[i].volume = volume;

}

あとは以下のようにやれば設定されたボリュームで音声が再生されます。

    sound1.currentTime = 0;
    sound1.play();

1 2	sound1.currentTime = 0; sound1.play();

レンジスライダーでボリューム調整できるようにする

HTML部分

initVolume関数の定義

鳩でも分かるC#管理人からのお願い

コメントについて

管理人のモチベーションアップのために

コメントをどうぞ