html
<input id="file" type="file">
<input type="range" id="volume" value="1" min="0" max="1" step="0.05">
<input type="range" id="pitchAdj" value="1.00" min="0.84" max="1.16" step="0.01">
<input type="checkbox">
javascript
window.onload = function() {
    //変数の定義
    var source;
    var Actx = new(window.AudioContext || window.webkitAudioContext);
    var fileReader = new FileReader;
    var gain = Actx.createGain();

    //オーディオのデコード、出力
    fileReader.onload = function() {
        Actx.decodeAudioData(fileReader.result, function(buffer) {
            if (source) {
                source.stop();
            }
            source = Actx.createBufferSource();
            source.buffer = buffer;
            source.playbackRate.value = document.getElementById('pitchAdj').valueAsNumber;
            source.loop = document.querySelector('[type="checkbox"]').checked;
            source.connect(gain);
            gain.connect(Actx.destination);
            source.start(0);
        });
    };

    //ファイルから受け取った音声をバッファに格納
    document.getElementById('file').addEventListener('change', function(e) {
        fileReader.readAsArrayBuffer(e.target.files[0]);
    });
    //再生速度の変更
    document.getElementById('pitchAdj').addEventListener('input', function() {
        source.playbackRate.value = this.valueAsNumber;
    });
    //音量
    document.getElementById('volume').addEventListener('input', function() {
        gain.gain.value = this.valueAsNumber;
    });
    //ループ
    document.querySelector('[type="checkbox"]').addEventListener('click', function() {
        source.loop = this.checked;
    });

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