最近很火的 倒放挑战 - ReverseVoice (微信小程序版 前后端源码) Ts Node Taro

项目地址: https://github.com/smackgg/reversevoice

整个项目其实很简单，从本人在抖音和 B 站看到火起来到最终小程序上线也就几天的下班时间就搞定了，11月16日上线至今用户量还是蛮多的(主要当时做的快此类 app 比较少😂)，现在已经出现了大量的更简约更好的倒放挑战 app，本项目开源仅供大家学习~

拥抱 TypeScript ~

顺便小声吐槽一下 Taro 对 Ts 的支持还是不够啊，希望大家多去给 Taro 提 dts 的 PR ~

体验

小程序二维码

挑战分享海报 (这个海报暂时有问题，修复代码因为资质问题还没有提交审核)

功能介绍/实现原理

• 功能及实现原理简述

1. 小程序端用户录音并保存本地
2. 录音后将录音文件上传至后端进行倒放处理，并返回处理后的音频 url
3. 小程序端下载 url 文件，提示用户反转成功，将数据做本地 map
4. 用户点击分享，生成分享链接，并将该分享正放、倒放视频均传至后端保存至七牛云
5. 同时新建分享 room 保存用户信息，返回 roomId
6. 用户分享（海报分享 canvas 动态生成分享码海报）
7. 其它用户参加挑战，存储原理同 4，只是增加将挑战者信息了存入 room 的逻辑

• 音频倒放
  使用 ffmpeg 进行音频倒放，核心代码：

// 详见 ./server/src/controllers/file.ts => function reverseVoice
import ffmpegPath from '@ffmpeg-installer/ffmpeg'
import ffprobePath from '@ffprobe-installer/ffprobe'
import ffmpeg from 'fluent-ffmpeg'
ffmpeg.setFfprobePath(ffprobePath.path)
ffmpeg.setFfmpegPath(ffmpegPath.path)

ffmpeg(filepath)
    .format('mp4')
    // 反转
    .outputOptions([
      '-vf reverse',
      '-af areverse',
      '-preset',
      'superfast',
      '-y',
    ])
    .on('progress', (progress) => {
   
      // send upload progress
      console.log('upload-file-progress', progress.percent)
    })
    .on('error', (err) => {
   
      console.log(`Ffmpeg has been killed${
     err.message}`)
    })
    .toFormat