高度なテクニック: オーディオの生成とシーケンス

const audioCtx = new AudioContext(); 

const wave = new PeriodicWave(audioCtx, { real: wavetable.real, imag: wavetable.imag, }); 

function playSweep(time) { const osc = new OscillatorNode(audioCtx, { frequency: 380, type: "custom", periodicWave: wave, }); osc.connect(audioCtx.destination); osc.start(time); osc.stop(time + 1); } 

<label for="attack">Attack</label> <input name="attack" id="attack" type="range" min="0" max="1" value="0.2" step="0.1" /> <label for="release">Release</label> <input name="release" id="release" type="range" min="0" max="1" value="0.5" step="0.1" /> 

let attackTime = 0.2; const attackControl = document.querySelector("#attack"); attackControl.addEventListener( "input", (ev) => { attackTime = parseInt(ev.target.value, 10); }, false, ); let releaseTime = 0.5; const releaseControl = document.querySelector("#release"); releaseControl.addEventListener( "input", (ev) => { releaseTime = parseInt(ev.target.value, 10); }, false, ); 

const sweepLength = 2; function playSweep(time) { const osc = new OscillatorNode(audioCtx, { frequency: 380, type: "custom", periodicWave: wave, }); const sweepEnv = new GainNode(audioCtx); sweepEnv.gain.cancelScheduledValues(time); sweepEnv.gain.setValueAtTime(0, time); sweepEnv.gain.linearRampToValueAtTime(1, time + attackTime); sweepEnv.gain.linearRampToValueAtTime(0, time + sweepLength - releaseTime); osc.connect(sweepEnv).connect(audioCtx.destination); osc.start(time); osc.stop(time + sweepLength); } 

const osc = new OscillatorNode(audioCtx, { type: "sine", frequency: pulseHz, }); 

const amp = new GainNode(audioCtx, { value: 1, }); 

const lfo = new OscillatorNode(audioCtx, { type: "square", frequency: 30, }); 

lfo.connect(amp.gain); osc.connect(amp).connect(audioCtx.destination); lfo.start(); osc.start(time); osc.stop(time + pulseTime); 

<label for="hz">Hz</label> <input name="hz" id="hz" type="range" min="660" max="1320" value="880" step="1" /> <label for="lfo">LFO</label> <input name="lfo" id="lfo" type="range" min="20" max="40" value="30" step="1" /> 

let pulseHz = 880; const hzControl = document.querySelector("#hz"); hzControl.addEventListener( "input", (ev) => { pulseHz = parseInt(ev.target.value, 10); }, false, ); let lfoHz = 30; const lfoControl = document.querySelector("#lfo"); lfoControl.addEventListener( "input", (ev) => { lfoHz = parseInt(ev.target.value, 10); }, false, ); 

const pulseTime = 1; function playPulse(time) { const osc = new OscillatorNode(audioCtx, { type: "sine", frequency: pulseHz, }); const amp = new GainNode(audioCtx, { value: 1, }); const lfo = new OscillatorNode(audioCtx, { type: "square", frequency: lfoHz, }); lfo.connect(amp.gain); osc.connect(amp).connect(audioCtx.destination); lfo.start(); osc.start(time); osc.stop(time + pulseTime); } 

const bufferSize = audioCtx.sampleRate * noiseDuration; // 空のバッファーを作成 const noiseBuffer = new AudioBuffer({ length: bufferSize, sampleRate: audioCtx.sampleRate, }); 

// バッファーにノイズを充填 const data = noiseBuffer.getChannelData(0); for (let i = 0; i < bufferSize; i++) { data[i] = Math.random() * 2 - 1; } 

// 作成したデータのバッファーソースを作成 const noise = new AudioBufferSourceNode(audioCtx, { buffer: noiseBuffer, }); 

noise.connect(audioCtx.destination); noise.start(); 

// 出力フィルター const bandpass = new BiquadFilterNode(audioCtx, { type: "bandpass", frequency: bandHz, }); // グラフへ接続 noise.connect(bandpass).connect(audioCtx.destination); 

<label for="duration">Duration</label> <input name="duration" id="duration" type="range" min="0" max="2" value="1" step="0.1" /> <label for="band">Band</label> <input name="band" id="band" type="range" min="400" max="1200" value="1000" step="5" /> 

let noiseDuration = 1; const durControl = document.querySelector("#duration"); durControl.addEventListener( "input", (ev) => { noiseDuration = parseFloat(ev.target.value); }, false, ); let bandHz = 1000; const bandControl = document.querySelector("#band"); bandControl.addEventListener( "input", (ev) => { bandHz = parseInt(ev.target.value, 10); }, false, ); 

function playNoise(time) { const bufferSize = audioCtx.sampleRate * noiseDuration; // set the time of the note // Create an empty buffer const noiseBuffer = new AudioBuffer({ length: bufferSize, sampleRate: audioCtx.sampleRate, }); // Fill the buffer with noise const data = noiseBuffer.getChannelData(0); for (let i = 0; i < bufferSize; i++) { data[i] = Math.random() * 2 - 1; } // Create a buffer source for our created data const noise = new AudioBufferSourceNode(audioCtx, { buffer: noiseBuffer, }); // Filter the output const bandpass = new BiquadFilterNode(audioCtx, { type: "bandpass", frequency: bandHz, }); // Connect our graph noise.connect(bandpass).connect(audioCtx.destination); noise.start(time); } 

async function getFile(audioContext, filepath) { const response = await fetch(filepath); const arrayBuffer = await response.arrayBuffer(); const audioBuffer = await audioContext.decodeAudioData(arrayBuffer); return audioBuffer; } 

async function setupSample() { const filePath = "dtmf.mp3"; const sample = await getFile(audioCtx, filePath); return sample; } 

setupSample().then((sample) => { // sample is our buffered file // … }); 

function playSample(audioContext, audioBuffer, time) { const sampleSource = new AudioBufferSourceNode(audioContext, { buffer: audioBuffer, playbackRate, }); sampleSource.connect(audioContext.destination); sampleSource.start(time); return sampleSource; } 

<label for="rate">Rate</label> <input name="rate" id="rate" type="range" min="0.1" max="2" value="1" step="0.1" /> 

let playbackRate = 1; const rateControl = document.querySelector("#rate"); rateControl.addEventListener( "input", (ev) => { playbackRate = parseInt(ev.target.value, 10); }, false, ); 

function playSample(audioContext, audioBuffer, time) { const sampleSource = new AudioBufferSourceNode(audioCtx, { buffer: audioBuffer, playbackRate, }); sampleSource.connect(audioContext.destination); sampleSource.start(time); return sampleSource; } 

let tempo = 60.0; const bpmControl = document.querySelector("#bpm"); bpmControl.addEventListener( "input", (ev) => { tempo = parseInt(ev.target.value, 10); }, false, ); 

const lookahead = 25.0; // How frequently to call scheduling function (in milliseconds) const scheduleAheadTime = 0.1; // How far ahead to schedule audio (sec) 

let currentNote = 0; let nextNoteTime = 0.0; // when the next note is due. function nextNote() { const secondsPerBeat = 60.0 / tempo; nextNoteTime += secondsPerBeat; // Add beat length to last beat time // Advance the beat number, wrap to zero when reaching 4 currentNote = (currentNote + 1) % 4; } 

const notesInQueue = []; function scheduleNote(beatNumber, time) { // Push the note on the queue, even if we're not playing. notesInQueue.push({ note: beatNumber, time }); if (pads[0].querySelectorAll("input")[beatNumber].checked) { playSweep(time); } if (pads[1].querySelectorAll("input")[beatNumber].checked) { playPulse(time); } if (pads[2].querySelectorAll("input")[beatNumber].checked) { playNoise(time); } if (pads[3].querySelectorAll("input")[beatNumber].checked) { playSample(audioCtx, dtmf, time); } } 

let timerID; function scheduler() { // While there are notes that will need to play before the next interval, // schedule them and advance the pointer. while (nextNoteTime < audioCtx.currentTime + scheduleAheadTime) { scheduleNote(currentNote, nextNoteTime); nextNote(); } timerID = setTimeout(scheduler, lookahead); } 

let lastNoteDrawn = 3; function draw() { let drawNote = lastNoteDrawn; const currentTime = audioCtx.currentTime; while (notesInQueue.length && notesInQueue[0].time < currentTime) { drawNote = notesInQueue[0].note; notesInQueue.shift(); // Remove note from queue } // We only need to draw if the note has moved. if (lastNoteDrawn !== drawNote) { pads.forEach((pad) => { pad.children[lastNoteDrawn * 2].style.borderColor = "var(--black)"; pad.children[drawNote * 2].style.borderColor = "var(--yellow)"; }); lastNoteDrawn = drawNote; } // Set up to draw again requestAnimationFrame(draw); } 

// When the sample has loaded, allow play const loadingEl = document.querySelector(".loading"); const playButton = document.querySelector("#playBtn"); let isPlaying = false; setupSample().then((sample) => { loadingEl.style.display = "none"; dtmf = sample; // to be used in our playSample function playButton.addEventListener("click", (ev) => { isPlaying = !isPlaying; if (isPlaying) { // Start playing // Check if context is in suspended state (autoplay policy) if (audioCtx.state === "suspended") { audioCtx.resume(); } currentNote = 0; nextNoteTime = audioCtx.currentTime; scheduler(); // kick off scheduling requestAnimationFrame(draw); // start the drawing loop. ev.target.dataset.playing = "true"; } else { clearTimeout(timerID); ev.target.dataset.playing = "false"; } }); });