kintoneで録音してMP3ファイルを保存する

前回、kintoneで録音してWAVファイルを保存するという記事を書きましたが、

WAVだとファイルサイズが大きいからMP3で保存したいなぁと思って色々と試行錯誤していたら成功したので紹介します。（変更点のみ書きます。）

JavaScript

こちらから

lame.all.js

をダウンロードしてアプリの設定のJavaScript / CSSでカスタマイズにアップロードしておきます。

WAVをMP3にエンコードする

github内のREADME.mdやexample.htmlをほぼコピーいや、参考にしてESLintに怒られたところを直していきました。

// wav to mp3 エンコード
const encodeMono = (channels, sampleRate, samples) => {
  const buf = [];
  const mp3enc = new lamejs.Mp3Encoder(channels, sampleRate, 128);
  let remaining = samples.length;
  const maxSamples = 1152;
  for (let i = 0; remaining >= maxSamples; i += maxSamples) {
    const mono = samples.subarray(i, i + maxSamples);
    const mp3buf = mp3enc.encodeBuffer(mono);
    if (mp3buf.length > 0) {
      buf.push(new Int8Array(mp3buf));
    }
    remaining -= maxSamples;
  }
  const d = mp3enc.flush();
  if (d.length > 0) {
    buf.push(new Int8Array(d));
  }
  return new Blob(buf, { type: "audio/mp3" });
};

WAVデータをmp3化したものをkintoneにアップする

FILEのnameの拡張子を.mp3にするのもお忘れなく。

// PCM 16bit なので、1要素あたり 16bit = 2byte つまり要素数*2でwavのチャンクサイズを計算する
const wavsize = samples.length * 2;
～略～
view.setUint32(40, wavsize, true); // サブチャンクサイズ 波形データのバイト数 4byte
floatTo16BitPCM(view, 44, samples); // 波形データ

// wavファイルデータを作ってmp3にエンコードする
const wav = lamejs.WavHeader.readHeader(new DataView(buffer));
const samples_mp3 = new Int16Array(
  buffer,
  wav.dataOffset,
  wav.dataLen / 2
);
const blob = encodeMono(wav.channels, wav.sampleRate, samples_mp3);

// kintoneの添付ファイルフィールドに添付する
const client = new KintoneRestAPIClient();
const date = luxon.DateTime.local();
const FILE = {
  name: fname.value
    ? fname.value + "_" + date.toFormat("yyyyMMddHHmmss") + ".mp3"
    : "音声_" + date.toFormat("yyyyMMddHHmmss") + ".mp3",
  data: blob,
};

全体的なコードはコチラ

これでファイルサイズの大きさも気にしなくて良くなりました✨✨

mp3で保存したときの動画

mp3で保存できますっ！うれしい！