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で保存できますっ！うれしい！