【微信小程序开发小白零基础入门】微信小程序媒体API【建议收藏】

微信小程序媒体API

---

一、图片管理

1. 选择图片

小程序使用wx.chooseImage(OBJECT)从本地相册选择图片或使用相机拍照获得图片，图片将被存放在设备的临时路径，在小程序本次启动期间可以正常使用。

参数	类型	必填	说明
count	Number	否	最多可以选择的图片张数，默认9
sizeType	StringArray	否	original 原图，compressed压缩图，默认二者都有
sourceType	StringArray	否	album 从相册选图，camera使用相机，默认二者都有
success	Function	是	成功则返回图片的本地文件路径列表tempFilePaths
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功与否都执行)

  //选择图片
  chooseImage:function(){
    
    
    var that = this
    wx.chooseImage({
    
    
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
    
    
        // 返回选定照片的路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths
        that.setData({
    
     src: tempFilePaths[0]})
      }
    })
  },

2. 预览图片

小程序使用wx.previewImage(OBJECT) 预览图片，OBJECT参数说明如表所示。

参数	类型	必填	说明
current	string	否	当前星示图片的链接。不境则默认为urls的第一张
urls	StringArray	是	需要预览的图片链接列表
suceess	Function	否	接口调用成功的回调亟数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调亟数(调用成功与否都执行)

  //预览图片
  previewImage:function(){
    
    
    var that = this
    wx.previewImage({
    
    
      urls: [this.data.src],
    })
  },

3. 获取图片信息

小程序使用wx.aetlmagelnfo(OBJECT)获取图片信息，OBJECT参数说明如表所示。

参数	类型	必填	说明
src	string	是	图片的路径，可以是相对路径，临时文件路径，存储文件路径，网络图片路径
suecess	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数(调用成功与否都执行)

success返回参数说明如表所示。

参数	类型	说明
width	Number	图片宽度，单位px
height	Number	图片高度，单位px
path	string	返回图片的本地路径
orientation	string	返回图片的方向
type	string	返回图片的格式

orientation参数说明说明如表所示。

枚举值	说明
up	默认
down	180度旋转
left	逆时针旋转90度
right	顺时针旋转90度
up-mirrored	同up，但水平翻转
down-mirrored	同down，但水平翻转
left-mirrored	同left。但垂直翻转
right-mirrored	同right，但垂直翻转

  //获取图片信息
  getImageInfo: function () {
    
    
    var that = this
    wx.getImageInfo({
    
    
      src: this.data.src,
      success:function(res){
    
    
        wx.showToast({
    
    
          icon:'none',
          title: '宽:'+res.width+',高:'+res.height,
        })
      }
    })
  },

4. 保存图片

小程序使用wx.saveImageToPhotosAlbum(OBJECT) 保存图片到系统相册，需要用户授权 scope.writePhotosAlbum。该接口从基础库 1.2.0 开始支持，低版本需做兼容处理。 OBJECT参数说明如表所示。

参数	类型	必填	说明
filePath	String	是	图片文件路径，可以是临时文件路径也可以是永久文件路径。不支持网络图片路径
success	Function	否	接口调用成功的回调函数，返回String类型参数errMsg。表示调用结果
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数〔调用成功与否都执行)

  //保存图片
  saveImage: function () {
    
    
    var that = this
    wx.saveImageToPhotosAlbum({
    
    
      filePath: that.data.src,
      success:function(){
    
    
        wx.showToast({
    
    
          title: '保存成功！',
        })
      }
    })
  },

二、录音管理

小程序使用wx.getRecorderManager()获取全局唯一的录音管理器 recorderManager，该接口从基础库 1.6.0 开始支持，低版本需做兼容处理。

方法	参数	说明
start	options	开始录音
pause		暂停录音
resume		继续录音
stop		停止录音
onStart	callback	录音开始事件
onPause	callback	录音暂停事件
onStop	callback	录音停止事件，返回String类型参数tempFilePath表示录音文件的临时路径
onFrameRecorded	callback	已录制完指定帧大小的文件，会回调录音分片结果数据。如果设置了frameSize，则会回调此事件。
onError	callback	录音错误事件，返回String类型参数errMsa表示错误信息

开始录音

  //开始录音
  start:function(){
    
    
    const options = {
    
    
      duration: 10000,
      sampleRate: 44100,
      numberOfChannels: 1,
      encodeBitRate: 192000,
      format: 'aac',
      frameSize: 50
    }
    this.rm.start(options)
  },

结束录音

  //停止录音
  stop:function(){
    
    
    this.rm.stop()
  },

1.start(options)方法的参数说明

start(options)方法的参数说明如表所示。

属性	类型	必填	说明
duration	Number	否	指定录音的时长，单位ms，如果传入了合法的duration，在到达指定的duration后会自动停止录音，最大值600000 (10分钟) ,默认值60000 (1分钟)
sampleRate	Number	否	采样率，有效值8000/16000/44100
numberOfChannels	Number	否	录音通道数，有效值1/2
encodeBitRate	Number	否	编码码率，有效值见下表格
format	String	否	音频格式，有效值aac/mp3
frameSize	Number	否	指定帧大小，单位KB。传入frameSize后，每录制指定帧大小的内容后，会回调录制的文件内容，不指定则不会回调。暂仅支持mp3格式
audioSource	String	否	指定音频输入源，默认值为’auto’

2.采样率和码率关系

采样率和码率关系如表所示

采样率	编码码率
8000	16000 ~ 48000
11025	16000 ~ 48000
12000	24000 ~64000
16000	24000 ~96000
22050	32000 ~ 128000
24000	32000 ~ 128000
32000	48000 ~ 192000
44100	64000~ 320000
48000	64000 ~ 320000

三、音频管理

音频根据其播放性质可以分为背景音频和前台音频。 背景音频在小程序最小化之后还可以继续在后台播放。

1. 背景音频管理

小程序使用wx.getBackgroundAudioManager()获取全局唯一的背景音频管理器 backgroundAudioManager。backgroundAudioManager对象的属性说明如表所示。

属性	类型	说明	只读
duration	Number	当前音频的长度(单位: s)，只有在当前有合法的src时返回	是
currentTime	Number	当前音频的播放位置（单位: s)，只有在当前有合法的src时返回	是
paused	Boolean	当前是是否暂停或停止状态，true表示暂停或停止， false表示正在播放	是
src	string	音频的数据源，默认为空字符串，当设置了新的src 时，会自动开始否播放，目前支持的格式有m4a, aac, mp3, wav	否
startTime	Number	音频开始播放的位置(单位: s)	否
buffered	Number	音频缓冲的时间点，仅保证当前播放时间点到此时间点内容已缓冲。	是
title	String	音频标题，用于做原生音频播放器音频标题。原生音频播放器中的分享功能，分享出去的卡片标题，也将使用该值。	否
epname	string	专辑名，原生音频播放器中的分享功能，分享出去的卡片简介，也将否使用该值。	否
singer	String	歌手名，原生音频播放器中的分享功能，分享出去的卡片简介，也将使用该值。	否
coverlmgUrl	String	封面图url，用于做原生音频播放器背景图。原生音频播放器中的分享功能，分享出去的卡片配图及背景也将使用该图。	否
webUrl	string	页面链接，原生音频播放器中的分享功能，分享出去的卡片简介，也将使用该值。	否
protocol	string	音频协议。默认值为’http’，设置’hls’可以支持播放HLS协议的直播音频	否

backgroundAudioManager 对象的方法说明如表所示。

方法	参数	说明
play		播放
pause		暂停
stop		停止
seek	position	跳转到指定位置，单位s
onCanplay	callback	背景音频进入可以播放状态，但不保证后面可以流畅播放
onPlay	callback	背景音频播放事件
onPause	callback	背景音频暂停事件
onStop	callback	背景音频停止事件
onEnded	callback	背景音频自然播放结束事件
onTimeUpdate	callback	背景音频播放进度更新事件
onPrev	callback	用户在系统音乐播放面板点击上一曲事件(iOS only)
onNext	callback	用户在系统音乐播放面板点击下一曲事件(iOs only)
onError	callback	背景音频播放错误事件，返回errCode
onWaiting	callbac	k音频加载中事件，当音频因为数据不足需要停下来加载时会触发

errCode 说明解释如下： 10001：系统错误 10002：网络错误 10003：文件错误 10004：格式错误 -1：未知错误

  //初始化背景音频
  initialAudio:function(){
    
    
    let bgAudioManager = this.bgAudioManager
    bgAudioManager.title = '******'
    bgAudioManager.epname = '******'
    bgAudioManager.singer = '******'
    bgAudioManager.coverImgUrl = '******'
    bgAudioManager.src = '******' // 设置了 src 之后会自动播放
  },
  //开始播放
  play: function () {
    
    
    this.bgAudioManager.play()
  },
  //暂停播放
  pause: function () {
    
    
    this.bgAudioManager.pause()
  },

2. 音频组件控制

小程序使用wx.createInnerAudioContext()创建并返回内部 audio 上下文对象innerAudioContext，该接口从基础库 1.6.0 开始支持，低版本需做兼容处理。

属性	类型	说明	只读
src	String	音频的数据链接，用于直接播放。	否
startTime	Number	开始播放的位置(单位: s)，默认0	否
autoplay	Boolean	是否自动开始播放，默认false	否
loop	Boolean	是否循环播放，默认false	否
obeyMuteSwitch	Boolean	是否遵循系统静音开关，当此参数为false时，即使用户打开了静音开关，也能继续发出声音，默认值true	否
duration	Number	当前音频的长度(单位: s)，只有在当前有合法的src时返回	是
currentTime	Number	当前音频的播放位置(单位:s)，只有在当前有合法的src 时返回，时间不取整，保留小数点后6位	是
paused	Boolean	当前是是否暂停或停止状态，true表示暂停或停止，false表示正在播放	是
buffered	Number	音频缓冲的时间点，仅保证当前播放时间点到此时间点内容已缓冲	是
volume	Number	音量。范围0~1	否

innerAudioContext对象的方法说明如表所示。

方法	参数	说明
play	无	播放
pause	无	暂停
stop	无	停止
seek	position	跳转到指定位置，单位s
destroy	无	销毁当前实例
onCanplay	callback	音频进入可以播放状态，但不保证后面可以流畅播放
onPlay	callback	音频播放事件
onPause	callback	音频暂停事件
onstop	callback	音频停止事件
onEnded	callback	音频自然播放结束事件
onTimeUpdate	callback	音频播放进度更新事件
onError	callback	音频播放错误事件
onWaiting	callback	音频加载中事件，当音频因为数据不足，需要停下来加载时会触发
onSeeking	callback	音频进行seek操作事件
onseeked	callback	音频完成seek操作事件
offCanplay	callback	取消监听onCanplay 事件
offPlay	callback	取消监听onPlay事件
offPause	callback	取消监听onPause事件
offStop	callback	取消监听onStop 事件
offEnded	callback	取消监听onEnded事件
offTimeUpdate	callback	取消监听onTimeUpdate 事件
offError	callback	取消监听onError 事件，并返回errCode
offWaiting	callback	取消监听onWaiting事件
offSeeking	callback	取背监听onSeeking 事件
offSeeked	callback	取消监听onSeeked事件

//初始化音频
  initialAudio:function(){
    
    
    let audioCtx = this.audioCtx
    audioCtx.autoplay = true //允许自动播放
    audioCtx.src = '******'
    audioCtx.onPlay(() => {
    
    
      console.log('开始播放')
    })
    audioCtx.onPause((res) => {
    
    
      console.log('暂停播放')
    })
    audioCtx.onStop((res) => {
    
    
      console.log('停止播放')
    })
  },
  //开始播放
  play:function(){
    
    
    this.audioCtx.play()
  },
  //暂停播放
  pause: function () {
    
    
    this.audioCtx.pause()
  },
  //停止播放
  stop:function(){
    
    
    this.audioCtx.stop()
  },

四、视频管理

1. 选择视频

小程序使用wx.chooseVideo(OBJECT) 拍摄视频或从手机相册中选视频，返回视频的临时文件路径。OBJECT参数说明如表所示。

属性	类型	必填	只读
sourceType	StringArray	否	album从相册选视频,camera使用相机拍摄，默认为:[‘album’ , ‘camera’]
compressed	Boolead	否	是否压缩所选的视频源文件，默认值为true,需要压缩
maxDuration	Number	否	拍摄视频最长拍摄时间。单位秒。最长支持60秒
success	Function	否	接口调用成功，返回视频文件的临时文件路径
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数〔调用成功与否都执行)

success返回参数说明如下： tempFilePath：选定视频的临时文件路径； duration：选定视频的时间长度； size：选定视频的数据量大小； height：返回选定视频的长； width：返回选定视频的宽。 需要注意是，wx.chooseVideo获得的视频仅能在小程序启动期间临时使用。 如需持久保存，需在主动调用 wx.saveFile进行保存，在小程序下次启动时才能访问得到。

  //选择视频
  chooseVideo: function () {
    
    
    var that = this
    wx.chooseVideo({
    
    
      sourceType: ['album', 'camera'],
      maxDuration: 60,
      camera: 'back',
      success: function (res) {
    
    
        that.setData({
    
    
          src: res.tempFilePath
        })
      }
    })
  },

2. 保存视频

小程序使用wx.saveVideoToPhotosAlbum(OBJECT) 保存视频到系统相册，需要用户授权 scope.writePhotosAlbum。该接口从基础库 1.2.0 开始支持，低版本需做兼容处理。 OBJECT参数说明如表所示。

参数名	类型	必填	说明
filePath	String	是	视频文件路径，可以是临时文件路径或永久文件路径
success	Function	否	接口调用成功的回调函数，返回String类型参数errMsg，表示调用结果
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数(调用成功与否都执行)

  //保存视频
  saveVideo: function () {
    
    
    var src = this.data.src
    wx.saveVideoToPhotosAlbum({
    
    
      filePath: src,
      success: function (res) {
    
    
        wx.showToast({
    
    
          title: '保存成功！',
        })
      }
    })
  },

3. 视频组件控制

小程序使用wx.createVideoContext(videoId,this) 创建并返回视频上下文videoContext对象。videoContext 通过 videoId 跟一个 video 组件绑定，通过它可以操作一个 video 组件。 在自定义组件下，第二个参数传入组件实例this，以操作组件内组件。 videoContext 对象的方法说明如表所示。

方法	参数	说明
play	无	播放
pause	无	暂停
seek	position	跳转到指定位置，单位s
sendDanmu	danmu	发送弹幕，danmu包含两个属性: text和color
playbackRate	rate	设置倍速播放,支持的倍率有0.5/0.8/1.0/1.25/1.5
requestFullScreen	无	进入全屏，可传入{direction}参数(1.7.0起支持)
exitFullScreen	无	退出全屏

  //开始播放
  play: function () {
    
    
    this.videoContext.play()
  },
  //暂停播放
  pause: function () {
    
    
    this.videoContext.pause()
  },
  inputValue: '',//弹幕文本内容
  //更新弹幕文本
  bindInputBlur: function (e) {
    
    
    this.inputValue = e.detail.value
  },
  //发送弹幕
  bindSendDanmu: function () {
    
    
    this.videoContext.sendDanmu({
    
    
      text: this.inputValue,
      color: getRandomColor()
    })
  },

五、相机管理

 //开始录像
  startRecord: function () {
    
    
    var that = this
    that.setData({
    
     isRecording: true, isHidden: true })
    this.ctx.startRecord({
    
    
      //超时自动结束
      timeoutCallback(res) {
    
    
        that.setData({
    
    
          isRecording: false,
          src: res.tempVideoPath, //更新视频路径地址
          isHidden: false //显示video组件
        })
      }
    })
  },

  //停止录像
  stopRecord: function () {
    
    
    var that = this
    this.ctx.stopRecord({
    
    
      success: function (res) {
    
    
        that.setData({
    
    
          isRecording: false,
          src: res.tempVideoPath, //更新视频路径地址
          isHidden: false //显示video组件
        })
      }


    })

  },

1. cameraContext对象的方法

cameraContext对象的方法列表如下表所示。

方法	参数	说明
takePhoto	OBJECT	拍照，可指定质量，成功则返回图片
startRecord	OBJECT	开始录像
stopRecord	OBJECT	结束录像，成功则返回封面与视频

2. takePhoto的OBJECT参数

takePhoto的OBJECT参数列表如下表所示。

参数	类型	必填	说明
quality	string	否	成像质量,值为high, normal, low，默认normal
success	Function	否	接口调用成功的回调函数,res = f templmagePath }
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功与否都执行)

3. startRecord的OBJECT参数

startRecord的OBJECT参数列表如下表所示。

参数	类型	必填	说明
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功与否都执行)
timeoutCallback	Function	否	超过30s或页面onHide时会结束录像，res = { tempThumbPath, tempVideoPath }

4. stopRecord的OBJECT参数

stopRecord的OBJECT参数列表如下表所示。

参数	类型	必填	说明
success	Function	否	接口调用成功的回调函数，res = { tempThumbPath, tempVideoPath }
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数(调用成功与否都执行)

六、推荐小程序（欢迎各位大佬指导）