HTML+CSS+Jacascriptによるグラフィックイコライザーについて

About the Graphic Equalizer in HTML + CSS + JavaScript

このページでは、Web Audio API を使用したグラフィックイコライザーを実装する方法を紹介します。
ユーザーがスライダーを操作して、任意の周波数帯域のゲインを調整できます。

This page demonstrates how to implement an audio equalizer using the Web Audio API. Users can adjust the gain of different frequency bands using sliders.

HTML Structure

<audio id="audio" controls>
    <source src="./audio/xxx.wav" type="audio/wav">
    Your browser does not support the audio element.
</audio>

The <audio> element is used to embed audio content on the web page.

<audio>タグでaudioコンテンツをウェブページに埋め込みます。

CSS Styles

.equalizer-controls { display: flex; justify-content: center; flex-wrap: nowrap; overflow-x: auto; width: 1000px; border: 1px solid #000; padding: 10px; background-color: #f0f0f0; }
.equalizer-slider { display: flex; flex-direction: column; align-items: center; margin: 5px; }
.equalizer-slider input { writing-mode: sideways-lr; -webkit-appearance: slider-vertical; height: 100px; width: 20px; }
.equalizer-slider .freq-label { font-size: 12px; margin-bottom: 5px; }
.equalizer-slider .value-label { font-size: 12px; margin-top: 5px; }
}

Configure the appearance of your graphic equalizer with CSS styles.

CSSスタイルでグラフィックイコライザーの外見を設定します。

JavaScript Functionality

const audio = document.getElementById(`audio`);
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const audioSource = audioContext.createMediaElementSource(audio);
audio.addEventListener(`play`, () => {
  audioContext.resume();
});

Create an AudioContext and use the audio element as the audio source.

AudioContextを作成し、オーディオ要素をオーディオソースとして使用します。

周波数とフィルターの設定

Frequency and Filter Settings

const frequencies = [
    31.5, 63, 80, 100, 125, 160, 200, 250, 315, 400, 500,
    630, 800, 1000, 1250, 1600, 2000, 2500, 3150, 4000,
    5000, 6300, 8000, 10000, 12500, 16000
];

const filters = frequencies.map(freq => {
    const filter = audioContext.createBiquadFilter();
    filter.type = 'peaking';
    filter.frequency.value = freq;
    filter.gain.value = 0;
    return filter;
});

const gainNode = audioContext.createGain();
gainNode.gain.value = 0.5;

audioSource.connect(filters[0]);
for (let i = 0; i < filters.length - 1; i++) {
    filters[i].connect(filters[i + 1]);
}

filters[filters.length - 1].connect(gainNode);
gainNode.connect(audioContext.destination);

Setting the Frequency List

Define the frequencies corresponding to each band of the equalizer in a list and set them in the frequencies array.

Creating Filters

Create filters for each frequency based on the frequencies list. Use audioContext.createBiquadFilter() to generate the filters and set them to the peaking type.

Adding a Gain Node

Create a gainNode to adjust the overall volume. Set the initial gain value to 0.5 to reduce the volume (change it to 1 if you want the sound to be louder initially).

Connecting the Filters

Connect the audio source to the first filter and then connect the filters sequentially to each other. Connect the last filter to the gainNode and the gainNode to the audioContext.destination.

周波数リストの設定

イコライザーの各バンドに対応する周波数をリストで定義し、frequencies配列に設定します。

フィルターの作成

frequenciesリストをもとに各周波数に対するフィルターを作成。audioContext.createBiquadFilter() を使用してフィルターを生成し、peaking タイプに設定します。

ゲインノードの追加

全体の音量を調整するための gainNode を作成します。初期ゲイン値を 0.5 に設定して音量を抑制します（最初から音を大きくしたい場合は1に変更してください。）。

フィルターの接続

オーディオソースを最初のフィルターに接続し、フィルター同士を順次接続します。最後のフィルターを gainNode に接続し、gainNode を audioContext.destination に接続します。

Generating the UI and Setting Event Listeners

UIの生成とイベントリスナーの設定

const effectsContainer = document.createElement('div');
effectsContainer.classList.add('effects');
audio.insertAdjacentElement('afterend', effectsContainer);

const equalizerControls = document.createElement('div');
equalizerControls.classList.add('equalizer-controls');
effectsContainer.appendChild(equalizerControls);

filters.forEach((filter, filterIndex) => {
    const controlDiv = document.createElement('div');
    controlDiv.classList.add('equalizer-slider');

    const freqLabel = document.createElement('label');
    freqLabel.classList.add('freq-label');
    freqLabel.innerText = frequencies[filterIndex] >= 1000 ? `${frequencies[filterIndex] / 1000}k` : `${frequencies[filterIndex]}`;
    controlDiv.appendChild(freqLabel);

    const input = document.createElement('input');
    input.type = 'range';
    input.min = -25;
    input.max = 25;
    input.value = 0;
    input.step = 1;
    input.addEventListener('input', () => {
        filter.gain.value = input.value;
        valueLabel.innerText = input.value;
        console.log(`Frequency: ${freqLabel.innerText}, Gain: ${input.value}`);
    });
    controlDiv.appendChild(input);

    const valueLabel = document.createElement('label');
    valueLabel.classList.add('value-label');
    valueLabel.innerText = input.value;
    controlDiv.appendChild(valueLabel);

    equalizerControls.appendChild(controlDiv);
});

const qControlDiv = document.createElement('div');
qControlDiv.classList.add('equalizer-slider');

const qFreqLabel = document.createElement('label');
qFreqLabel.classList.add('freq-label');
qFreqLabel.innerText = 'Q Width';
qControlDiv.appendChild(qFreqLabel);

const qInput = document.createElement('input');
qInput.type = 'range';
qInput.min = 1;
qInput.max = 10;
qInput.value = 5;
qInput.step = 0.1;
qInput.addEventListener('input', () => {
    filters.forEach(filter => {
        filter.Q.value = qInput.value;
    });
    qValueLabel.innerText = qInput.value;
    console.log(`Q Width: ${qInput.value}`);
});
qControlDiv.appendChild(qInput);

const qValueLabel = document.createElement('label');
qValueLabel.classList.add('value-label');
qValueLabel.innerText = qInput.value;
qControlDiv.appendChild(qValueLabel);

equalizerControls.appendChild(qControlDiv);

Creating the UI Container

Create the effectsContainer and insert it immediately after the audio tag.

Create the equalizerControls and add it to the effectsContainer.

Generating Filter Sliders

Generate sliders corresponding to each filter.

Update the filter gain and display the value on the screen in response to the input event.

Create elements to display the slider labels and values, and add them to the UI.

Generating the Q Width Adjustment Slider

Generate a slider to adjust the Q width of the entire graphic equalizer.

Update the Q value of the filters and display the value on the screen in response to the input event.

UIコンテナの作成

effectsContainer を作成し、オーディオタグの直後に挿入します。

equalizerControls を作成し、effectsContainer へ追加します。

フィルタースライダーの生成

各フィルターに対応するスライダーを生成します。

input イベントでフィルターのゲインを更新し、値を画面に表示します。

スライダーのラベルと値を表示する要素を作成し、UIに追加します。

Q幅調整スライダーの生成

グラフィックイコライザー全体のQ幅を調整するためのスライダーを生成します。

input イベントでフィルターのQ値を更新し、値を画面に表示します。