今までの学習のまとめです。

ローカルの音声ファイルをMediaElementで読み込み、AudioBufferでFXを付与して出力しています。

ディレイは原音とエフェクト音を分けて出力(センド・エフェクト)できるようにしています。

エフェクト音は通常のaudioContext.createDelay()に対してディレイタイムにLFOを掛け、HPFを通したものを出力しています。
これは音程に揺らぎを与え、低域の飽和を抑える役目をしています。

MEMO 追加予定
テープの劣化 = ディストーション
走行時のノイズ = ヒスノイズ
走行速度の揺れ = ディレイタイムにLFO
ハイダンプ/ローダンプ

html
<!DOCTYPE html>
<html lang="jp">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <input id="Afile" type="file">
    <audio id="Aplayer"></audio>
    <input type="checkbox" id="play_pause">PLAY/PAUSE
    <input type="checkbox" id="loop">LOOP
    <br>
    <input type="range" id="volume" value="1" min="0" max="1" step="0.05">GAIN
    <input type="range" id="pitchAdj" value="1.00" min="0.7" max="1.16" step="0.01">PITCH
    <br>
    <input type="range" id="inputVolume" value="1" min="0" max="1" step="0.05">InputVolume
    <input type="range" id="repeatRate" value="0" min="0" max="1" step="0.05">RepeatRate
    <input type="range" id="intensity" value="0" min="0" max="1" step="0.05">Intensity
    <input type="range" id="echoVolume" value="0" min="0" max="1.3" step="0.05">EchoVolume
    <script>
    //javascript
    </script>
</body>

</html>
javascript
window.onload = function() {

    var Actx = new(window.AudioContext || window.webkitAudioContext)();
    var gain = Actx.createGain();
    var source = Actx.createMediaElementSource(Aplayer);
    //ファイルの読み込み
    Afile.onchange = function() {
        Aplayer.src = URL.createObjectURL(this.files[0]);
        play_pause.checked = false;
    };
    //再生、一時停止
    play_pause.onchange = function() {
        (play_pause.checked) ? Aplayer.play(): Aplayer.pause();
    };
    //ループ
    loop.onchange = function() {
        (loop.checked) ? Aplayer.loop = true: Aplayer.loop = false;
    };
    //音量
    document.getElementById('volume').addEventListener('input', function() {
        gain.gain.value = this.valueAsNumber;
    });
    //再生速度の変更
    document.getElementById('pitchAdj').addEventListener('input', function() {
        Aplayer.playbackRate = this.valueAsNumber;
    });

    //ディレイ、エコー
    var delay = Actx.createDelay();
    var dry = Actx.createGain();
    var wet = Actx.createGain();
    var feedback = Actx.createGain();
    var delayFilter = Actx.createBiquadFilter();
    var lfo = Actx.createOscillator();
    var lfoG = Actx.createGain();
    //ディレイに適用するLFO、HPF
    lfo.frequency.value = 1;
    lfoG.gain.value = 0.002;
    lfo.start(0);
    delayFilter.type = 'highpass';
    delayFilter.frequency.value = 200;
    dry.gain.value = 1.0;
    wet.gain.value = feedback.gain.value = 0.0;

    //ドライ、ディレイタイム、フィードバック、音量
    document.getElementById('inputVolume').addEventListener('input', function() {
        dry.gain.value = this.valueAsNumber;
    });
    document.getElementById('repeatRate').addEventListener('input', function() {
        delay.delayTime.value = this.valueAsNumber;
    });
    document.getElementById('intensity').addEventListener('input', function() {
        feedback.gain.value = this.valueAsNumber;
    });
    document.getElementById('echoVolume').addEventListener('input', function() {
        wet.gain.value = this.valueAsNumber;
    });

    //ルーティング
    //ディレイ ドライ
    source.connect(dry);
    dry.connect(gain);
    //ディレイ ウェット
    source.connect(delay);
    delay.connect(wet);
    wet.connect(delayFilter);
    delayFilter.connect(gain);
    delay.connect(feedback);
    feedback.connect(delay);
    //ディレイタイムLFO
    lfo.connect(lfoG);
    lfoG.connect(delay.delayTime);
    //スピーカーへ出力
    gain.connect(Actx.destination);
};

別ファイルをロードした際にクリップするので、次回はその部分の修正とリバーブの制作を予定しています。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.