学会这些 API，轻松开发 UniApp 音视频功能

UniApp 音频与视频处理详解

UniApp 提供了一系列强大的 API，用于音频与视频的录制、播放和管理。这些 API 能够帮助开发者快速实现多媒体功能，适用于聊天工具、音乐播放器、短视频应用等场景。本文详细介绍音频与视频相关 API 的作用、参数及示例代码。

一、音频处理

1. 录音功能（RecorderManager）

RecorderManager 是 UniApp 提供的录音管理器，用于控制录音的开始、暂停、停止等操作。

常用方法

配置参数（start 方法）

示例代码

const recorderManager = uni.getRecorderManager();

// 开始录音
function startRecording() {
    recorderManager.start({
        duration: 10000, // 最长10秒
        format: 'mp3',   // 音频格式
    });
    console.log("录音开始");
}

// 停止录音
recorderManager.onStop((res) => {
    console.log('录音停止:', res.tempFilePath); // 返回录音文件路径
});

// 错误处理
recorderManager.onError((err) => {
    console.log('录音错误:', err);
});

2. 播放音频功能（BackgroundAudioManager & InnerAudioContext）

（1）BackgroundAudioManager

适用于需要后台播放的场景，如音乐播放器。

常用方法

属性说明

示例代码

const backgroundAudioManager = uni.getBackgroundAudioManager();

backgroundAudioManager.src = 'https://example.com/song.mp3';
backgroundAudioManager.title = '背景音乐';
backgroundAudioManager.epname = '专辑名';
backgroundAudioManager.singer = '歌手名';

// 播放
backgroundAudioManager.play();

// 暂停
backgroundAudioManager.pause();

（2）InnerAudioContext

适用于短音频播放，如提示音。

示例代码

const audioContext = uni.createInnerAudioContext();
audioContext.src = 'https://example.com/sound.mp3';
audioContext.onPlay(() => console.log('音频播放开始'));
audioContext.onError((err) => console.log('音频播放错误:', err));

// 播放
audioContext.play();

二、视频处理

1. 录制视频（chooseVideo）

chooseVideo 是一个简单的方法，用于调用系统摄像头录制视频或从相册选择视频。

参数说明

示例代码

uni.chooseVideo({
    sourceType: ['camera'], // 从摄像头录制
    maxDuration: 30,        // 最长30秒
    success: (res) => {
        console.log('录制成功，视频路径:', res.tempFilePath);
    },
    fail: (err) => {
        console.log('录制失败:', err);
    }
});

2. 播放视频（video组件 & createVideoContext）

（1）video 组件

video 组件用于页面直接嵌入视频播放。

示例代码

<template>
    <view>
        <video 
            id="myVideo"
            src="https://example.com/video.mp4"
            controls
            autoplay
            style="width: 100%; height: 300px;">
        </video>
    </view>
</template>

（2）createVideoContext

用于操作页面的 video 组件，提供控制视频播放的功能。

常用方法

示例代码

const videoContext = uni.createVideoContext('myVideo');

// 播放
videoContext.play();

// 暂停
videoContext.pause();

3. 选择本地视频（chooseVideo）

chooseVideo 方法也可以用于从相册中选择视频。

示例代码

uni.chooseVideo({
    sourceType: ['album'], // 从相册选择
    success: (res) => {
        console.log('选择的视频路径:', res.tempFilePath);
    },
    fail: (err) => {
        console.log('选择失败:', err);
    }
});

总结

UniApp 提供了灵活的音频与视频处理功能：

• 录音功能 使用 RecorderManager 实现。
• 音频播放 支持后台播放（BackgroundAudioManager）和短音频播放（InnerAudioContext）。
• 视频处理 提供了录制（chooseVideo）、播放（video组件和createVideoContext）以及选择本地视频等能力。

合理使用这些 API，可以快速开发聊天工具、音乐播放器或短视频应用等多媒体功能。