web-dev-qa-db-ja.com

ビート検出にJSWebAudioAPIを使用するにはどうすればよいですか？

JavaScript WebAudioAPIを使用して曲のビートを検出し、それらをキャンバスにレンダリングすることに興味があります。

私はキャンバス部分を扱うことができますが、私はオーディオの大物ではなく、JavaScriptでビート検出器を作成する方法を本当に理解していません。

私は次のことを試みました この記事 しかし、私の人生の間、各関数間のドットを接続して関数型プログラム。

私はあなたにいくつかのコードを見せるべきだと知っていますが、正直なところ私は何も持っていません、私の試みはすべて惨めに失敗しました、そしてそれが前に述べた記事にある関連コード。

とにかく、私はいくつかのガイダンス、またはWebAudioAPIを使用して実際に曲のビートを検出する方法のデモを本当に感謝します。

ありがとう！

javascriptaudioweb-audio-apibeat-detection
13
undefined

Joe Sullivan による参照記事について理解する主なことは、多くのソースコードを提供しているにもかかわらず、最終的で完全なコードからはほど遠い。実用的なソリューションに到達するには、コーディングとデバッグの両方のスキルが必要です。

この回答は、参照されている記事からコードの大部分を引き出しています。必要に応じて、元のライセンスが適用されます。

以下は、上記の記事で説明されている関数を使用するための単純なサンプル実装です。

コードは、答えのために書かれた準備コードで構成されています。

  • ローカルファイルの読み取り FileReader API
  • AudioContext API を使用してファイルをオーディオデータとしてデコードする

そして、記事で説明されているように：

  • オーディオのフィルタリング、この例では ローパスフィルター
  • しきい値を使用してピークを計算する
  • インターバルカウントとテンポカウントのグループ化

しきい値には、最大値と最小値の間の範囲の.98の任意の値を使用しました。グループ化するときに、無限ループの可能性を回避し、デバッグしやすいサンプルにするために、いくつかの追加のチェックと任意の丸めを追加しました。

サンプルの実装を簡潔にするためにコメントすることはほとんどないことに注意してください。理由は次のとおりです。

  • 処理の背後にあるロジックは、参照記事で説明されています
  • 構文は、関連するメソッドのAPIドキュメントで参照できます。
audio_file.onchange = function() {
  var file = this.files[0];
  var reader = new FileReader();
  var context = new(window.AudioContext || window.webkitAudioContext)();
  reader.onload = function() {
    context.decodeAudioData(reader.result, function(buffer) {
      prepare(buffer);
    });
  };
  reader.readAsArrayBuffer(file);
};

function prepare(buffer) {
  var offlineContext = new OfflineAudioContext(1, buffer.length, buffer.sampleRate);
  var source = offlineContext.createBufferSource();
  source.buffer = buffer;
  var filter = offlineContext.createBiquadFilter();
  filter.type = "lowpass";
  source.connect(filter);
  filter.connect(offlineContext.destination);
  source.start(0);
  offlineContext.startRendering();
  offlineContext.oncomplete = function(e) {
    process(e);
  };
}

function process(e) {
  var filteredBuffer = e.renderedBuffer;
  //If you want to analyze both channels, use the other channel later
  var data = filteredBuffer.getChannelData(0);
  var max = arrayMax(data);
  var min = arrayMin(data);
  var threshold = min + (max - min) * 0.98;
  var peaks = getPeaksAtThreshold(data, threshold);
  var intervalCounts = countIntervalsBetweenNearbyPeaks(peaks);
  var tempoCounts = groupNeighborsByTempo(intervalCounts);
  tempoCounts.sort(function(a, b) {
    return b.count - a.count;
  });
  if (tempoCounts.length) {
    output.innerHTML = tempoCounts[0].tempo;
  }
}

// http://tech.beatport.com/2014/web-audio/beat-detection-using-web-audio/
function getPeaksAtThreshold(data, threshold) {
  var peaksArray = [];
  var length = data.length;
  for (var i = 0; i < length;) {
    if (data[i] > threshold) {
      peaksArray.Push(i);
      // Skip forward ~ 1/4s to get past this peak.
      i += 10000;
    }
    i++;
  }
  return peaksArray;
}

function countIntervalsBetweenNearbyPeaks(peaks) {
  var intervalCounts = [];
  peaks.forEach(function(peak, index) {
    for (var i = 0; i < 10; i++) {
      var interval = peaks[index + i] - peak;
      var foundInterval = intervalCounts.some(function(intervalCount) {
        if (intervalCount.interval === interval) return intervalCount.count++;
      });
      //Additional checks to avoid infinite loops in later processing
      if (!isNaN(interval) && interval !== 0 && !foundInterval) {
        intervalCounts.Push({
          interval: interval,
          count: 1
        });
      }
    }
  });
  return intervalCounts;
}

function groupNeighborsByTempo(intervalCounts) {
  var tempoCounts = [];
  intervalCounts.forEach(function(intervalCount) {
    //Convert an interval to tempo
    var theoreticalTempo = 60 / (intervalCount.interval / 44100);
    theoreticalTempo = Math.round(theoreticalTempo);
    if (theoreticalTempo === 0) {
      return;
    }
    // Adjust the tempo to fit within the 90-180 BPM range
    while (theoreticalTempo < 90) theoreticalTempo *= 2;
    while (theoreticalTempo > 180) theoreticalTempo /= 2;

    var foundTempo = tempoCounts.some(function(tempoCount) {
      if (tempoCount.tempo === theoreticalTempo) return tempoCount.count += intervalCount.count;
    });
    if (!foundTempo) {
      tempoCounts.Push({
        tempo: theoreticalTempo,
        count: intervalCount.count
      });
    }
  });
  return tempoCounts;
}

// http://stackoverflow.com/questions/1669190/javascript-min-max-array-values
function arrayMin(arr) {
  var len = arr.length,
    min = Infinity;
  while (len--) {
    if (arr[len] < min) {
      min = arr[len];
    }
  }
  return min;
}

function arrayMax(arr) {
  var len = arr.length,
    max = -Infinity;
  while (len--) {
    if (arr[len] > max) {
      max = arr[len];
    }
  }
  return max;
}
<input id="audio_file" type="file" accept="audio/*"></input>
<audio id="audio_player"></audio>
<p>
  Most likely tempo: <span id="output"></span>
</p>
19
Nit

ここに、javascript Web AudioAPIを使用してこれを行う方法を示すチュートリアルを作成しました。

https://askmacgyver.com/blog/tutorial/how-to-implement-tempo-detection-in-your-application

手順の概要

  1. オーディオファイルを配列バッファに変換する
  2. ローパスフィルターを介してアレイバッファーを実行する
  3. 配列バッファから10秒のクリップをトリミングします
  4. データのダウンサンプル
  5. データを正規化する
  6. ボリュームグループのカウント
  7. グループカウントからテンポを推測する

以下のこのコードは、手間のかかる作業を行います。

オーディオファイルをアレイバッファにロードし、ローパスフィルタを実行します

function createBuffers(url) {

 // Fetch Audio Track via AJAX with URL
 request = new XMLHttpRequest();

 request.open('GET', url, true);
 request.responseType = 'arraybuffer';

 request.onload = function(ajaxResponseBuffer) {

    // Create and Save Original Buffer Audio Context in 'originalBuffer'
    var audioCtx = new AudioContext();
    var songLength = ajaxResponseBuffer.total;

    // Arguments: Channels, Length, Sample Rate
    var offlineCtx = new OfflineAudioContext(1, songLength, 44100);
    source = offlineCtx.createBufferSource();
    var audioData = request.response;
    audioCtx.decodeAudioData(audioData, function(buffer) {

         window.originalBuffer = buffer.getChannelData(0);
         var source = offlineCtx.createBufferSource();
         source.buffer = buffer;

         // Create a Low Pass Filter to Isolate Low End Beat
         var filter = offlineCtx.createBiquadFilter();
         filter.type = "lowpass";
         filter.frequency.value = 140;
         source.connect(filter);
         filter.connect(offlineCtx.destination);

            // Render this low pass filter data to new Audio Context and Save in 'lowPassBuffer'
            offlineCtx.startRendering().then(function(lowPassAudioBuffer) {

             var audioCtx = new(window.AudioContext || window.webkitAudioContext)();
             var song = audioCtx.createBufferSource();
             song.buffer = lowPassAudioBuffer;
             song.connect(audioCtx.destination);

             // Save lowPassBuffer in Global Array
             window.lowPassBuffer = song.buffer.getChannelData(0);
             console.log("Low Pass Buffer Rendered!");
            });

        },
        function(e) {});
 }
 request.send();
}


createBuffers('https://askmacgyver.com/test/Maroon5-Moves-Like-Jagger-128bpm.mp3');

これで、ローパスフィルター処理された曲（およびオリジナル）の配列バッファーができました

これは、いくつかのエントリ、sampleRate（44100に曲の秒数を掛けたもの）で構成されています。

window.lowPassBuffer  // Low Pass Array Buffer
window.originalBuffer // Original Non Filtered Array Buffer

曲から10秒のクリップをトリミングします

function getClip(length, startTime, data) {

  var clip_length = length * 44100;
  var section = startTime * 44100;
  var newArr = [];

  for (var i = 0; i < clip_length; i++) {
     newArr.Push(data[section + i]);
  }

  return newArr;
}

// Overwrite our array buffer to a 10 second clip starting from 00:10s
window.lowPassFilter = getClip(10, 10, lowPassFilter);

クリップのダウンサンプル

function getSampleClip(data, samples) {

  var newArray = [];
  var modulus_coefficient = Math.round(data.length / samples);

  for (var i = 0; i < data.length; i++) {
     if (i % modulus_coefficient == 0) {
         newArray.Push(data[i]);
     }
  }
  return newArray;
}

// Overwrite our array to down-sampled array.
lowPassBuffer = getSampleClip(lowPassFilter, 300);

データを正規化する

function normalizeArray(data) {

 var newArray = [];

 for (var i = 0; i < data.length; i++) {
     newArray.Push(Math.abs(Math.round((data[i + 1] - data[i]) * 1000)));
 }

 return newArray;
}

// Overwrite our array to the normalized array
lowPassBuffer = normalizeArray(lowPassBuffer);

フラットライングループを数える

function countFlatLineGroupings(data) {

 var groupings = 0;
 var newArray = normalizeArray(data);

 function getMax(a) {
    var m = -Infinity,
        i = 0,
        n = a.length;

    for (; i != n; ++i) {
        if (a[i] > m) {
            m = a[i];
        }
    }
    return m;
 }

 function getMin(a) {
    var m = Infinity,
        i = 0,
        n = a.length;

    for (; i != n; ++i) {
        if (a[i] < m) {
            m = a[i];
        }
    }
    return m;
 }

 var max = getMax(newArray);
 var min = getMin(newArray);
 var count = 0;
 var threshold = Math.round((max - min) * 0.2);

 for (var i = 0; i < newArray.length; i++) {

   if (newArray[i] > threshold && newArray[i + 1] < threshold && newArray[i + 2] < threshold && newArray[i + 3] < threshold && newArray[i + 6] < threshold) {
        count++;
    }
 }

 return count;
}

// Count the Groupings
countFlatLineGroupings(lowPassBuffer);

10秒のグループ化カウントを60秒にスケーリングして、1分あたりの拍数を導き出します

var final_tempo = countFlatLineGroupings(lowPassBuffer);

// final_tempo will be 21
final_tempo = final_tempo * 6;

console.log("Tempo: " + final_tempo);
// final_tempo will be 126
8
Timothy Moody