博客站

在 UniApp 中，音频裁剪是常见的需求之一，例如用户上传音频、音频编辑等场景。UniApp 本身没有直接提供音频裁剪功能，但可以通过结合第三方库或手动实现音频裁剪。以下是 UniApp 处理音频裁剪的常用方法：

一、使用第三方音频裁剪库

如果需要实现音频裁剪功能，可以使用第三方音频处理库，如 ffmpeg.js。

1. 安装 ffmpeg.js

• 安装 ffmpeg.js：

  npm install @ffmpeg/ffmpeg @ffmpeg/core
  

2. 在 UniApp 中使用

• 示例：

  import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
  
  const ffmpeg = createFFmpeg({ log: true });
  
  async function cropAudio(file, startTime, duration) {
    await ffmpeg.load();
    ffmpeg.FS('writeFile', 'input.mp3', await fetchFile(file));
    await ffmpeg.run(
      '-i', 'input.mp3',
      '-ss', startTime, // 开始时间
      '-t', duration, // 持续时间
      '-c', 'copy',
      'output.mp3'
    );
    const data = ffmpeg.FS('readFile', 'output.mp3');
    return new Blob([data.buffer], { type: 'audio/mp3' });
  }
  
  uni.chooseAudio({
    success: async (res) => {
      const tempFilePath = res.tempFilePath;
      const croppedAudio = await cropAudio(tempFilePath, '00:00:05', '00:00:10');
      console.log('裁剪后的音频：', croppedAudio);
    }
  });
  

二、手动实现音频裁剪

如果需要更灵活的控制，可以手动实现音频裁剪。

1. 使用 AudioContext 裁剪音频

• 示例：

  function cropAudio(file, startTime, duration) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = (e) => {
        const audioContext = new AudioContext();
        const buffer = e.target.result;
        audioContext.decodeAudioData(buffer, (audioBuffer) => {
          const offlineContext = new OfflineAudioContext(
            audioBuffer.numberOfChannels,
            duration * audioBuffer.sampleRate,
            audioBuffer.sampleRate
          );
          const source = offlineContext.createBufferSource();
          source.buffer = audioBuffer;
          source.connect(offlineContext.destination);
          source.start(0, startTime, duration);
          offlineContext.startRendering().then((renderedBuffer) => {
            const blob = new Blob([renderedBuffer.getChannelData(0)], {
              type: 'audio/wav'
            });
            resolve(blob);
          });
        });
      };
      reader.onerror = (err) => {
        reject(err);
      };
      reader.readAsArrayBuffer(file);
    });
  }
  
  uni.chooseAudio({
    success: (res) => {
      const tempFilePath = res.tempFilePath;
      cropAudio(tempFilePath, 5, 10).then((blob) => {
        console.log('裁剪后的音频：', blob);
      });
    }
  });
  

三、总结

UniApp 处理音频裁剪的步骤如下：

1. 使用第三方音频裁剪库：通过 ffmpeg.js 实现音频裁剪功能。
2. 手动实现音频裁剪：通过 AudioContext 实现灵活的音频裁剪。

以下是一个完整的 ffmpeg.js 示例：

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

const ffmpeg = createFFmpeg({ log: true });

async function cropAudio(file, startTime, duration) {
  await ffmpeg.load();
  ffmpeg.FS('writeFile', 'input.mp3', await fetchFile(file));
  await ffmpeg.run(
    '-i', 'input.mp3',
    '-ss', startTime, // 开始时间
    '-t', duration, // 持续时间
    '-c', 'copy',
    'output.mp3'
  );
  const data = ffmpeg.FS('readFile', 'output.mp3');
  return new Blob([data.buffer], { type: 'audio/mp3' });
}

uni.chooseAudio({
  success: async (res) => {
    const tempFilePath = res.tempFilePath;
    const croppedAudio = await cropAudio(tempFilePath, '00:00:05', '00:00:10');
    console.log('裁剪后的音频：', croppedAudio);
  }
});

通过合理使用这些方法，可以轻松实现 UniApp 中的音频裁剪功能，满足应用的需求。