ffmpegs v1.2.0

特性

• 轻量级,代码体积小。
• 灵活性高，可根据场景选择对应的wasm。
• 采用web-workder来进行编码与解码不影响主线程
• 方便易用，采用统一api来完成不同场景的wasm的调用。

环境支持

PC

Mobile WebView

支持场景

安装

npm install ffmpeg-js

yarn add ffmpeg-js

使用

FFmpegJs

FFmpegJs 实例

初始化

import FFmpegJs from 'ffmpeg-js';
import opusUrl from 'ffmpeg-js/assembly/opus.wasm';

// initialize....
FFmpegJs.AvariableWebAssembies = {
  'opus':opusUrl,
}

// create typed instance
const ffmpegjs = new FFmpegJs('opus');

decodeAudioFile

import FFmpegJs from 'ffmpeg-js';

const ffmpegjs = new FFmpegJs('opus');

const file = files[0];

ffmpegjs.decodeAudioFile(file).then((response)=>{
  // 当前音频编码器名称
  console.log(response.codecName);
  console.log(response.codecLongName);
  // 当前数据编码格式
  console.log(response.format);
  // 采样率
  console.log(response.sampleRate);
  // 采样位深
  console.log(response.sampleSize);
  // 音频通道数字
  console.log(response.channels);
  // 当前解码的个通道的音频数Float32Array
  console.log(response.channelsBuffer)
});

encodeAudioFile

import FFmpegJs from 'ffmpeg-js';

const ffmpegjs = new FFmpegJs('opus');

const pcmfile = files[0];

ffmpegjs.encodeAudioFile(pcmfile).then((response)=>{
  // 编码后的数据Uint8Array
  const data = response.data;
  const blob = new Blob([data], { type: 'application/octet-stream' });
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'demo.opus';
  a.click();
});

持续解码

import FFmpegJs from 'ffmpeg-js';

const ffmpegjs = new FFmpegJs('opus');

async function fetchAudio(){
  const response = await fetch('./demo.opus');
  const reader = response.getHeader();

  let partial = await reader.read();
  // 打开解码器
  await ffmpegjs.openAudioDecode({ buffer:partial.value });

  while(!partial.done) {
    partial = await reader.read();
    const data = { done:partial.done,buffer:partial.value };
    // 解码数据
    const result = await ffmpegjs.decodeAudio(data);
    // 播放....
    play(result.channels, result.channelsBuffer);
  }

  // 关闭解码器
  await ffmpegjs.closeAudioDecode();
}

持续编码

import FFmpegJs from 'ffmpeg-js';

const ffmpegjs = new FFmpegJs('opus');

const data = {
  input: {
    format: 's16',
    sampleRate: 48000,
    channels: 2,
  },
  output: {
    name: 'demo.opus',
    bitRate: 96000
  }
}

// 打开编码器
await ffmpegjs.openAudioEncode(data);

// 编码音频数据
const buffer:Uint8Array;
await ffmpegjs.encodeAudio(buffer);

// 关闭编码
await ffmpegjs.closeAudioEncode();

Audio

另外可以使用内置的Audio来进行播放

import FFmpegJs from 'ffmpeg-js';

// 播放url
const audio = new FFmpegJs.Audio('http://xxx.com/demo.opus');

// 播放File对象
const audio2 = new FFmpegJs.Audio(file);

document.querySelector('#play').addEventListener('click',()=>{
  // 播放
  audio.play();
});

属性和方法

事件