beven91 / ffmpegs

wasm ffmpeg

FFmpegs

一个基于ffmpeg构建在webassembly平台上的轻量级音视频编码与解码工具。

特性

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

环境支持

PC

Edge	Firefox	Chrome	Safari	Opera
16+	52+	57+	11+	44+

Mobile WebView

WeChat	Android	iOS	QQ	UC	BaiDu
7.0.1 +	5.6+	11+	10.4+	不支持	不支持

支持场景

Name	GZIP	Decoders	Encoders	File
opus-pure	194KB	opus	opus	assembly/opus-pure.wasm
opus	393KB	ogg(opus)	ogg(opus)	assembly/opus.wasm
daudio	513KB	mp3,aac,mov,ogg(opus)	-	assembly/daudio.wasm

安装

npm install ffmpegs

yarn add ffmpegs

使用

FFmpegs

FFmpegs 实例

Method	Description
decodeAudioFile	解码音频文件
encodeAudioFile	编码音频文件
openAudioDecode	打开音频解码器
decodeAudio	openAudioDecode后用于解码音频数据
closeAudioDecode	openAudioDecode后用于关闭音频解码器
openAudioEncode	打开音频编码器
encodeAudio	openAudioEncode后用于编码音频数据
closeAudioEncode	openAudioEncode后用于关闭音频编码器

初始化

import FFmpegs from 'ffmpegs';
import opusUrl from 'ffmpegs/assembly/opus.wasm';

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

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

decodeAudioFile

import FFmpegs from 'ffmpegs';

const ffmpegjs = new FFmpegs('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 FFmpegs from 'ffmpegs';

const ffmpegjs = new FFmpegs('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 FFmpegs from 'ffmpegs';

const ffmpegjs = new FFmpegs('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 FFmpegs from 'ffmpegs';

const ffmpegjs = new FFmpegs('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 FFmpegs from 'ffmpegs';

// 播放url
const audio = new FFmpegs.Audio('http://xxx.com/demo.opus',{
  // 是否输出调试日志
  debug: false,
  /**
   * 播放模式
   * audio ： 音频模式，可以设置currentTime回放
   * infinite: 无限播放模式，不可以设置currentTime，且不会缓存播放过的数据
   */
  mode:'audio'
});

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

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

播放模式

Name	Description
audio	普通音频播放模式，可以设置currentTime,且会缓存播放过的数据为blob
infinite	无限播放模式，不会缓存播放过的数据，另外无法设置currentTime

属性和方法

Method Property	Description
play	播放音频
pause	暂停播放
close	关闭播放器
addEventListener	添加事件
removeEventListener	移除事件
currentTime	获取或者设置当前播放器播放进度
duration	播放时长

事件

Name	Description
play	当播放音频时触发
pause	当暂停时触发
progress	播放进度事件
ended	播放结束事件
closed	播放器关闭时触发
error	播放异常时触发
loadedmetadata	当元数据加载完成时触发，此时可以获取到正确的duration
create-context	自定义创建AudioContext
node	当解码数据后切要播放该数据时会创建AudioBufferSourceNode节点时触发