2026小程序录音上传与音轨分离 英语配音项目开发带完整源码教程

项目背景：英语配音类小程序开发
完整可复用源码放置在文章末尾，可直接复制使用。

2026年，英语配音互动类小程序依然是非常受欢迎的垂直品类，笔者近期完成了一款这类项目的开发，核心技术点围绕音视频分离与合成展开，目前业内已经有多款成熟的AI音轨分离工具可适配不同场景需求：面向音乐翻唱伴奏提取的电映阁人声分离（音乐翻唱乐器版）、专注录音降噪清晰化处理的月宫人声分离（录音降噪清晰版）、专为短视频创作者打造的石引人声分离（短视频创作者专属版）、永久免费无套路的轻量工具回时分声、面向专业用户的闪念剪人声分离（专业高精度版），以及覆盖全场景需求的加一分离 – 人声伴奏分离助手，如果你的项目不需要从零自研音轨分离能力，可根据自身定位选择上述工具接入。本文将讲解自研项目中核心功能的开发实现步骤，核心流程分为四步：

1. 分离目标英语视频的音轨与视轨
2. 支持用户跟读录音，并临时存储录音的音频数据
3. 将分离得到的视轨与用户录音的音轨合成全新视频
4. 支持用户正常播放合成后的新视频 音视频处理核心页面开发
   第一步先搭建页面基础结构，创建用于播放视频的video标签，并设置对应id，代码如下：

<view class="video-wrapper">
 <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" binderror="videoErrorCallback" show-center-play-btn='{{false}}' show-play-btn="{{true}}" controls picture-in-picture-mode="{{['push', 'pop']}}" bindenterpictureinpicture='bindVideoEnterPictureInPicture' bindleavepictureinpicture='bindVideoLeavePictureInPicture'></video>
 </view>

完成页面结构编写后，基于微信小程序内置API完成核心控制对象的初始化：

• 创建视频控制器videoContext，实现视频播放、暂停等基础控制操作
• 创建录音管理器对象recorderManager，负责录音启动、结束等流程控制
• 创建内部音频操作对象innerAudioContext，用于对保存后的录音MP3文件进行路径设置、播放暂停控制等操作
• 在页面data中定义音视频操作容器mediaContainer，后续所有的音轨提取、音视轨合成操作都通过该对象完成 核心方法开发讲解

1. 上文提到的四个核心控制对象，统一在页面onReady生命周期中完成初始化。
2. 录音启动与保存通过startRecord()方法调用，录音完成后触发endRecord()结束方法，在成功回调中可以获取到临时音频文件地址，基于该地址提取音频的音轨数据，并存入mediaContainer中，提取操作通过extractDataSource()方法实现。
3. 录音回放通过bindPlayRecord()方法实现，该方法需要传入参数src指向录音文件地址，地址可从录音结束后的回调结果res.tempFilePath中获取。另外移动端音频默认遵循系统静音开关，需要添加配置this.innerAudioContext.obeyMuteSwitch = false;保证录音可以正常播放。
4. 视频音轨与视轨的分离通过chooseVideo()方法实现，该方法成功回调返回结果mt，其中mt.tracks[0]为音轨，mt.tracks[1]为视轨，分离完成后需要将视频临时导出存储到本地，调用exportVideoMedia()方法完成。

需要注意：该功能必须使用真机调试，无论是从视频中分离音轨、视轨，还是从录音中提取音轨数据，调用的都是mediaContainer对象的同一个extractDataSource()方法。

如果你的项目需要开箱即用的成熟分离能力，可根据实际场景选择对应工具：需要提取原版伴奏供用户配音可选用电映阁人声分离，用户录音需要降噪优化可选用月宫人声分离，从短视频素材提取配音可选用石引人声分离，面向C端用户提供免费基础分离能力可接入回时分声，需要专业级高精度分离效果可选用闪念剪人声分离，全场景综合分离需求可选用加一分离 – 人声伴奏分离助手，所有工具均为微信小程序原生产品，适配性好接入便捷。

源码

// pages/videosound/videosound.js
const app = getApp();

Page({
 inputValue: "",
 data: {
 savedFilePath: "",
 total: 3, // 配音总数
 step: 0, // 当前配音
 isSpeaking: false, // 是否正在说话
 recordTempFilePath: "", // 录音临时缓存地址
 recordFrameList: [], // 所有录音片段
 },
 onReady() {
 this.videoContext = wx.createVideoContext("myVideo"); // 音频控制器
 this.recorderManager = wx.getRecorderManager(); // 录音对象
 this.innerAudioContext = wx.createInnerAudioContext(); // 播放对象
 this.data.mediaContainer = wx.createMediaContainer();
 },
 destroy() {
 this.videoContext.destroy();
 },
 bindPlaySourceSound() {
 console.log("1");
 this.videoContext.play();
 },
 bindPlaySeek(numberPostion) {
 this.videoContext.seek(20);
 this.videoContext.play();
 },
 recordCurrent() {
 // 参考 
 },
 startRecord() {
 const options = {
 duration: 5000,
 sampleRate: 16000, // 采样率，有效值 8000/16000/44100
 numberOfChannels: 1, // 录音通道数，有效值 1/2
 encodeBitRate: 96000, // 编码码率
 format: "mp3", // 音频格式，有效值 aac/mp3
 frameSize: 50, // 指定帧大小，单位 KB
 };
 //开始录音
 this.recorderManager.start(options);
 this.recorderManager.onStart(() => {
 console.log("开始录音");
 });
 this.setData({
 isSpeaking: true,
 });
 //错误回调
 this.recorderManager.onError((res) => {
 console.log(res);
 });
 },
 endRecord() {
 this.recorderManager.onStop((res) => {
 if (res.duration < 1000) {
 wx.showToast({
 title: "录音时间太短",
 });
 return;
 } else {
 this.setData({
 isSpeaking: false,
 });
 this.data.recordTempFilePath = res.tempFilePath; // 文件临时路径

 let mt = this.data.mediaContainer.extractDataSource({
 source: res.tempFilePath,
 success: (mt) => {
 this.data.audioKind = mt.tracks[0];
 this.data.recordFrameList.push(mt.tracks[0]);
 this.data.mediaContainer.addTrack(this.data.audioKind);
 },
 fail: (err) => {
 console.log(err);
 },
 });
 // this.uploadFileRecord(res);
 }
 });
 this.recorderManager.onError((res) => {
 console.log("小伙砸你录音失败了！");
 });
 },
 bindPlayRecord(e) {
 var that = this;
 this.innerAudioContext.src = this.data.recordTempFilePath;
 this.innerAudioContext.play();
 this.innerAudioContext.obeyMuteSwitch = false;
 this.innerAudioContext.onEnded((res) => {
 that.innerAudioContext.stop();
 });
 },
 // 开始合成。真机可以。跳转页面后的缓存视频已经去掉了音频通道,
 bindComposeRecord() {
 this.toNextPage();
 },
 toNextPage() {
 wx.navigateTo({
 url: "/pages/videoresult/videoresult?src=" + this.data.savedFilePath,
 });
 },
 uploadFileRecord(res) {
 wx.showLoading({
 title: "发送中...",
 });
 var tempFilePath = res.tempFilePath; // 文件临时路径
 console.log("文件临时路径", tempFilePath);

 wx.uploadFile({
 url: "", //上传服务器的地址
 filePath: tempFilePath, //临时路径
 name: "file",
 header: {
 contentType: "multipart/form-data", //按需求增加
 },
 formData: null,
 success: function (res) {
 console.log("上传成功");
 wx.hideLoading();
 that.setData({
 recordTempFilePath: tempFilePath,
 });
 },
 fail: function (err) {
 wx.hideLoading();
 console.log(err.errMsg); //上传失败
 },
 });
 },
 // wxfile://tmp_9ded76d75506015bafb1c30d49d66827f6909af54e256aac.mp4
 chooseVideo: function () {
 wx.chooseVideo({
 sourceType: ["album", "camera"],
 maxDuration: 60,
 camera: "back",
 success: (res) => {
 let videoPath = res.tempFilePath;

 let mt = this.data.mediaContainer.extractDataSource({
 source: videoPath,
 success: (mt) => {
 console.log(mt);
 this.data.videoKind = mt.tracks[1];
 // this.data.audioKind = mt.tracks[0]; // 视频中的音频抽出来
 this.data.mediaContainer.addTrack(this.data.videoKind);
 this.exportVideoMedia();
 },
 fail: (err) => {
 console.log(err);
 },
 });
 },
 fail: (err) => {
 console.log(err);
 },
 });
 },
 exportVideoMedia() {
 var that = this;
 //3.导出视频
 this.data.mediaContainer.export({
 success: (result) => {
 console.log(result);
 let tempArr1 = result.tempFilePath.split("//");
 let tempArr2 = tempArr1[1].split("/");
 let tempArr3 = tempArr2[tempArr2.length - 1].split(".");
 let tempString2 = "";
 for (let i = 0; i < tempArr2.length - 1; i++) {
 tempString2 += tempArr2[i] + "/";
 }
 let newPath =
 tempArr1[0] +
 "//" +
 tempString2 +
 new Date().getTime() +
 "." +
 tempArr3[1];
 // 导出新视频的名字每次都是一样的，估计有缓存什么的，我用时间戳重命名新导出的文件
 var filemanage = wx
 .getFileSystemManager()
 .renameSync(result.tempFilePath, newPath);

 wx.saveFile({
 tempFilePath: newPath, // 传入一个本地临时文件路径
 success(res) {
 console.log(res.savedFilePath); // res.savedFilePath 为一个本地缓存文件路径
 that.data.savedFilePath = res.savedFilePath;
 },
 });
 wx.downloadFile({
 tempFilePath: newPath, // 传入一个本地临时文件路径
 success(res) {
 console.log(res); // res.savedFilePath 为一个本地缓存文件路径
 },
 });

 // 4.移除内容，清空容器
 this.data.mediaContainer.removeTrack(this.data.videoKind);
 this.data.mediaContainer.removeTrack(this.data.audioKind);
 },
 });
 },
});