https:unpkg.com/@ffmpeg/ffmpeg@0.11.6/dist/ffmpeg.min.js
view source
JavaScript
const { createFFmpeg, fetchFile } = FFmpeg;
const ffmpeg = createFFmpeg({ log: true });
//https://unpkg.com/@ffmpeg/ffmpeg@0.11.6/dist/ffmpeg.min.js
//Uncaught (in promise) ReferenceError: SharedArrayBuffer is not defined
/*
.m4a 出力ができるのは ffmpeg.wasm
Web Audio API は PCM(非圧縮)しか出力できない
.m4aに再圧縮するには エンコーダが必要 → JS単体では不可能
*/
document.getElementById('trimBtn').addEventListener('click', async () => {
const fileInput = document.getElementById('uploader');
const start = document.getElementById('start').value;
const duration = document.getElementById('duration').value;
if (!fileInput.files[0]) {
alert('Please select a .m4a file');
return;
}
const file = fileInput.files[0];
if (!ffmpeg.isLoaded()) {
await ffmpeg.load();
}
// ファイル読み込み & 仮想FSに書き込み
ffmpeg.FS('writeFile', 'input.m4a', await fetchFile(file));
// FFmpeg コマンドでトリミング(-c copyで再エンコード回避)
await ffmpeg.run(
'-i', 'input.m4a',
'-ss', start,
'-t', duration,
'-c', 'copy',
'output.m4a'
);
// 結果を取得してBlobに
const data = ffmpeg.FS('readFile', 'output.m4a');
const blob = new Blob([data.buffer], { type: 'audio/mp4' });
// ダウンロードリンク生成
const url = URL.createObjectURL(blob);
const link = document.getElementById('downloadLink');
link.href = url;
link.download = 'trimmed.m4a';
link.textContent = 'Download Trimmed File';
link.style.display = 'inline';
});
CSS
HTML
ページのソースを表示 : Ctrl+U , DevTools : F12
view-source:https://hi0a.com/demo/-js/js-m4a-trim/
ABOUT
hi0a.com 「ひまあそび」は無料で遊べるミニゲームや便利ツールを公開しています。
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
必要な機能の関数をコピペ利用したり勉強に活用できます。
プログラムの動作サンプル結果は画面上部に出力表示されています。
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
仕様変更、API廃止等、実験途中で動かないページもあります。