媒体API

介绍

在小程序开发中，媒体API是一组用于处理音频、视频、图片等多媒体内容的接口。通过使用这些API，开发者可以轻松实现多媒体内容的播放、录制、编辑等功能。本文将详细介绍小程序中常用的媒体API，并通过代码示例和实际案例帮助你快速掌握这些功能。

音频API

音频播放

小程序提供了 wx.createInnerAudioContext 接口来创建音频上下文，用于控制音频的播放、暂停、停止等操作。

javascript

const audioContext = wx.createInnerAudioContext();
audioContext.src = 'https://example.com/audio.mp3';
audioContext.play();

audioContext.onPlay(() => {
  console.log('音频开始播放');
});

audioContext.onError((res) => {
  console.log('音频播放错误', res.errMsg);
});

提示

你可以通过 audioContext.pause() 暂停音频播放，通过 audioContext.stop() 停止播放。

音频录制

小程序还支持音频录制功能，使用 wx.getRecorderManager 接口可以获取录音管理器。

javascript

const recorderManager = wx.getRecorderManager();

recorderManager.onStart(() => {
  console.log('录音开始');
});

recorderManager.onStop((res) => {
  console.log('录音结束', res.tempFilePath);
});

recorderManager.start({
  format: 'mp3',
});

警告

录音功能需要用户授权，确保在调用 recorderManager.start() 之前已经获取了录音权限。

视频API

视频播放

小程序提供了 wx.createVideoContext 接口来创建视频上下文，用于控制视频的播放、暂停、跳转等操作。

javascript

Page({
  onReady() {
    this.videoContext = wx.createVideoContext('myVideo');
  },
  playVideo() {
    this.videoContext.play();
  },
  pauseVideo() {
    this.videoContext.pause();
  },
});

在对应的 WXML 文件中：

html

<video id="myVideo" src="https://example.com/video.mp4" controls />

备注

controls 属性可以为视频添加默认的控制条，用户可以通过控制条进行播放、暂停、音量调节等操作。

视频录制

小程序支持视频录制功能，使用 wx.createCameraContext 接口可以获取相机上下文。

javascript

const cameraContext = wx.createCameraContext();

cameraContext.startRecord({
  success(res) {
    console.log('开始录制', res.tempFilePath);
  },
  fail(res) {
    console.log('录制失败', res.errMsg);
  },
});

setTimeout(() => {
  cameraContext.stopRecord({
    success(res) {
      console.log('停止录制', res.tempFilePath);
    },
  });
}, 10000); // 10秒后停止录制

注意

视频录制功能需要用户授权，确保在调用 cameraContext.startRecord() 之前已经获取了相机权限。

图片API

选择图片

小程序提供了 wx.chooseImage 接口，允许用户从相册选择图片或使用相机拍照。

javascript

wx.chooseImage({
  count: 1, // 最多选择1张图片
  sizeType: ['original', 'compressed'], // 可以指定原图或压缩图
  sourceType: ['album', 'camera'], // 可以指定来源是相册或相机
  success(res) {
    const tempFilePaths = res.tempFilePaths;
    console.log('选择的图片路径', tempFilePaths);
  },
});

预览图片

使用 wx.previewImage 接口可以预览用户选择的图片。

javascript

wx.previewImage({
  current: 'https://example.com/image1.jpg', // 当前显示的图片链接
  urls: [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
  ], // 需要预览的图片链接列表
});

实际案例

案例1：音乐播放器

假设我们要开发一个简单的音乐播放器，用户可以选择音乐并播放。以下是实现步骤：

1. 使用 wx.chooseImage 选择音乐文件。
2. 使用 wx.createInnerAudioContext 创建音频上下文并播放音乐。
3. 提供播放、暂停、停止等控制按钮。

javascript

Page({
  data: {
    audioContext: null,
    isPlaying: false,
  },
  onLoad() {
    this.setData({
      audioContext: wx.createInnerAudioContext(),
    });
  },
  chooseMusic() {
    wx.chooseImage({
      count: 1,
      success(res) {
        const tempFilePaths = res.tempFilePaths;
        this.data.audioContext.src = tempFilePaths[0];
      },
    });
  },
  playMusic() {
    this.data.audioContext.play();
    this.setData({ isPlaying: true });
  },
  pauseMusic() {
    this.data.audioContext.pause();
    this.setData({ isPlaying: false });
  },
});

案例2：视频录制与分享

假设我们要开发一个视频录制与分享功能，用户可以录制视频并分享给好友。以下是实现步骤：

1. 使用 wx.createCameraContext 创建相机上下文并开始录制视频。
2. 录制完成后，使用 wx.shareAppMessage 分享视频。

javascript

Page({
  data: {
    cameraContext: null,
    videoPath: '',
  },
  onLoad() {
    this.setData({
      cameraContext: wx.createCameraContext(),
    });
  },
  startRecording() {
    this.data.cameraContext.startRecord({
      success(res) {
        console.log('开始录制', res.tempFilePath);
      },
    });
  },
  stopRecording() {
    this.data.cameraContext.stopRecord({
      success(res) {
        this.setData({ videoPath: res.tempFilePath });
        console.log('停止录制', res.tempFilePath);
      },
    });
  },
  shareVideo() {
    wx.shareAppMessage({
      title: '分享视频',
      path: this.data.videoPath,
    });
  },
});

总结

通过本文的学习，你应该已经掌握了小程序中常用的媒体API，包括音频、视频、图片的处理方法。这些API为开发者提供了丰富的多媒体功能，能够满足大多数应用场景的需求。

附加资源与练习

• 练习1：尝试开发一个简单的图片浏览器，用户可以浏览本地图片并放大查看。
• 练习2：实现一个音频播放器，支持播放、暂停、停止功能，并显示当前播放进度。

提示

更多关于媒体API的详细信息，可以参考小程序官方文档。