FFmpeg.wasm使い方: 動画をアップロードして音声を抽出する

投稿日：2022年1月6日

FFmpeg.wasmの使い方の一例として、動画をアップロードしてその音声を抽出したmp3を出力してみます。
処理が終わると音声が自動で再生されます。音声のプレイヤー上で右クリックするとファイルの保存選択ができます。

コード
getAudio.php

<?php
ini_set('mbstring.internal_encoding' , 'UTF-8');

header('Cross-Origin-Opener-Policy: same-origin');
header('Cross-Origin-Embedder-Policy: require-corp');
?>

<html>
<head>
  <script>
    if (crossOriginIsolated) {
      // Post SharedArrayBuffer
      console.log('crossOriginIsolated');
    } else {
      // Do something else
      console.log('NOT crossOriginIsolated');
    }
  </script>
  <script src="ffmpeg.min.js" ></script>
 </head>

  <body>
    <input type="file" id="fileInput">
    </input><br>

    <video id="my-video" controls="true" crossorigin="anonymous">
    </video>

    <audio id="my-audio" controls="true" crossorigin="anonymous">
    </audio>

    <script src="app4.js"></script>
  </body>
</html>

app4.js

(async () => {
  console.log('app.js');
  const { createFFmpeg, fetchFile } = FFmpeg

  const ffmpeg = createFFmpeg({
    corePath: 'ffmpeg-core.js',
    log: true
  });

  await ffmpeg.load()

  const sizeLimit = 1024 * 1024 * 10;　// 制限サイズ
  const fileInput = document.getElementById('fileInput'); // input要素
  
  const handleFileSelect = async () => {
    const files = fileInput.files;
    for (let i = 0; i < files.length; i++) {
      if (files[i].size > sizeLimit) {
        alert('ファイルサイズは10MB以下にしてください'); 
        fileInput.value = ''; // inputの中身をリセット
        return; 
      }//if
    }//for

    const t_start = performance.now();

    console.log('size:'+files[0].size );
    console.log('name:'+files[0].name );
    console.log('URL:'+URL.createObjectURL(files[0]) );

    //var mVideo = document.createElement("video");
    var mVideo = document.getElementById("my-video");
    mVideo.src = URL.createObjectURL(files[0]);
    mVideo.addEventListener("play", function() {

    }, false);

    const { name } = files[0];
    console.log('name:'+name);

    await ffmpeg.write(name, files[0] );
    var strCmd = '-i '+ name + ' -f mp3 -ab 192000 -vn output.mp3';
    console.log('strCmd:'+strCmd);
    await ffmpeg.run(strCmd);

    const data = ffmpeg.read('output.mp3')
    //var mAudio = new Audio( URL.createObjectURL(new Blob([data.buffer], { type: 'audio/mp3' })) );
    var mAudio = document.getElementById("my-audio");
    mAudio.src = URL.createObjectURL(new Blob([data.buffer], { type: 'audio/mp3' }));
    mAudio.play();  

    const t_end = performance.now();
    console.log('time:'+ (t_end - t_start) +'[ms]' );

  }//
  
  fileInput.addEventListener('change', handleFileSelect);
  
})()

こちらで動作確認できます。

https://g-llc.co.jp/getAudio.php

執筆者：G LLC