JavaScriptでオーディオをダウンサンプルしたい

Question

オーディオをダウンサンプリングしたく以下の記事を参考にコードを作成しました。

https://stackoverflow.com/questions/27598270/resample-audio-buffer-from-44100-to-16000

実行してみるとOfflineAudioContextの部分で以下のエラーが発生しました。

Uncaught DOMException: Failed to construct 'OfflineAudioContext': The number of frames provided (0) is less than the minimum bound (1). at fileReader.onload (webpack-internal:///./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./pages/index.vue?vue&type=script&lang=js&:29:28)

調べてみるとsource.numberOfChannelsがundefinedになっており、そもそもsourceがちゃんと取得できていないようです。
色々と調べてみたのですが解決に至らず...原因がわかる方がおられましたらご教授いただけると幸いです。

      const file = 'audio.wav' // 読み込むファイルのURL
      fetch(file)
        .then((res) => res.blob())
        .then((blob) => {
          // FileReaderを作成
          const fileReader = new FileReader()

          // 読み込み完了時のイベント
          fileReader.onload = function () {
            const source = fileReader.result // ArrayBuffer
            const TARGET_SAMPLE_RATE = 16000

            const offlineCtx = new OfflineAudioContext( // ここでエラー
              source.numberOfChannels,
              source.duration * TARGET_SAMPLE_RATE,
              TARGET_SAMPLE_RATE
            )

            // Play it from the beginning.
            const offlineSource = offlineCtx.createBufferSource()
            offlineSource.buffer = source
            offlineSource.connect(offlineCtx.destination)
            offlineSource.start()
            offlineCtx.startRendering().then((resampled) => {
              // `resampled` contains an AudioBuffer resampled at 16000Hz.
              // use resampled.getChannelData(x) to get an Float32Array for channel x.
              console.log(resampled)
            })
          }

          // 読み込みを実行
          fileReader.readAsArrayBuffer(blob)
        })
    },

Answer 1

ArrayBuffer に numberOfChannels というプロパティはないので、動かないのは当然です。

リサンプルしたいだけなら、16kHz の AudioContext を作って、decodeAudioData()にArrayBuffer を指定すれば16kHzの AudioBuffer が得られると思います。