微信小程序媒体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,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
var tempFilePaths = res.tempFilePaths
that.setData({ src: tempFilePaths[0]})
}
})
},
![在这里插入图片描述](https://img-blog.csdnimg.cn/f02ab59cfeb34b2d969b685e6fd1302c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pm65oWn5LqR5bel5YW3566x,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
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],
})
},
![在这里插入图片描述](https://img-blog.csdnimg.cn/47df791a5b054094a15431e6be74710a.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pm65oWn5LqR5bel5YW3566x,size_10,color_FFFFFF,t_70,g_se,x_16#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/8f5b234e5c8e49c0aa51142c73eaa1cb.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pm65oWn5LqR5bel5YW3566x,size_9,color_FFFFFF,t_70,g_se,x_16#pic_center)
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,
})
}
})
},
![在这里插入图片描述](https://img-blog.csdnimg.cn/2f7ead3b0026449591305196792d9bdc.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pm65oWn5LqR5bel5YW3566x,size_9,color_FFFFFF,t_70,g_se,x_16#pic_center)
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: '保存成功!',
})
}
})
},
![在这里插入图片描述](https://img-blog.csdnimg.cn/8ba8c6119fea4ee9b490ffbecfa1f40f.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pm65oWn5LqR5bel5YW3566x,size_10,color_FFFFFF,t_70,g_se,x_16#pic_center)
二、录音管理
小程序使用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)
},
![在这里插入图片描述](https://img-blog.csdnimg.cn/7196c86546414eb09ec6ab68ebf8b3fa.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pm65oWn5LqR5bel5YW3566x,size_9,color_FFFFFF,t_70,g_se,x_16#pic_center)
结束录音
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 = '******'
},
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
})
}
})
},
![在这里插入图片描述](https://img-blog.csdnimg.cn/7c25aa4c7eb94404952113e5fc0d0465.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pm65oWn5LqR5bel5YW3566x,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
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: '保存成功!',
})
}
})
},
![在这里插入图片描述](https://img-blog.csdnimg.cn/b02c79e1631a46f78f07dba957fc4627.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pm65oWn5LqR5bel5YW3566x,size_10,color_FFFFFF,t_70,g_se,x_16#pic_center)
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()
})
},
![在这里插入图片描述](https://img-blog.csdnimg.cn/a888831da433472d9b7760f2de3dfe94.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pm65oWn5LqR5bel5YW3566x,size_10,color_FFFFFF,t_70,g_se,x_16#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/e9e114c623b14520865c169d0f5cd009.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pm65oWn5LqR5bel5YW3566x,size_10,color_FFFFFF,t_70,g_se,x_16#pic_center)
五、相机管理
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
})
}
})
},
![在这里插入图片描述](https://img-blog.csdnimg.cn/a25162846f204b7190aad3b63c1292d9.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pm65oWn5LqR5bel5YW3566x,size_9,color_FFFFFF,t_70,g_se,x_16#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/e5fe8d5558094a87a18293406605d3e9.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pm65oWn5LqR5bel5YW3566x,size_9,color_FFFFFF,t_70,g_se,x_16#pic_center)
stopRecord: function () {
var that = this
this.ctx.stopRecord({
success: function (res) {
that.setData({
isRecording: false,
src: res.tempVideoPath,
isHidden: false
})
}
})
},
![在这里插入图片描述](https://img-blog.csdnimg.cn/1360dcd20f7e4bf2827e0152d5560760.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pm65oWn5LqR5bel5YW3566x,size_10,color_FFFFFF,t_70,g_se,x_16#pic_center)
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 | 否 | 接口调用结束的回调函数(调用成功与否都执行) |
六、推荐小程序(欢迎各位大佬指导)
![在这里插入图片描述](https://img-blog.csdnimg.cn/8f69481687a04921a90dd91c3b43c1d5.jpg#pic_center)