微信小程序媒体API
文章目录
微信小程序媒体API
一、图片管理
1. 选择图片
2. 预览图片
3. 获取图片信息
4. 保存图片
二、录音管理
1.start(options)方法的参数说明
2.采样率和码率关系
三、音频管理
1. 背景音频管理
2. 音频组件控制
四、视频管理
1. 选择视频
2. 保存视频
3. 视频组件控制
五、相机管理
1. cameraContext对象的方法
2. takePhoto的OBJECT参数
3. startRecord的OBJECT参数
4. stopRecord的OBJECT参数
六、推荐小程序(欢迎各位大佬指导)
一、图片管理
1. 选择图片
小程序使用wx.chooseImage(OBJECT)从本地相册选择图片或使用相机拍照获得图片,图片将被存放在设备的临时路径,在小程序本次启动期间可以正常使用。
//选择图片 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参数说明如表所示。
//预览图片 previewImage:function(){ var that = this wx.previewImage({ urls: [this.data.src], }) },
3. 获取图片信息
小程序使用wx.aetlmagelnfo(OBJECT)获取图片信息,OBJECT参数说明如表所示。
success返回参数说明如表所示。
orientation参数说明说明如表所示。
//获取图片信息 getImageInfo: function () { var that = this wx.getImageInfo({ src: this.data.src, success:function(res){ wx.showToast({ icon:'none', title: '宽:'+res.width+',高:'+res.height, }) } }) }, ———————————————— 版权声明:本文为CSDN博主「智慧云工具箱」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/qq_44967475/article/details/120683351
4. 保存图片
小程序使用wx.saveImageToPhotosAlbum(OBJECT) 保存图片到系统相册,需要用户授权 scope.writePhotosAlbum。该接口从基础库 1.2.0 开始支持,低版本需做兼容处理。 OBJECT参数说明如表所示。
//保存图片 saveImage: function () { var that = this wx.saveImageToPhotosAlbum({ filePath: that.data.src, success:function(){ wx.showToast({ title: '保存成功!', }) } }) }, ———————————————— 版权声明:本文为CSDN博主「智慧云工具箱」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/qq_44967475/article/details/120683351
二、录音管理
小程序使用wx.getRecorderManager()获取全局唯一的录音管理器 recorderManager,该接口从基础库 1.6.0 开始支持,低版本需做兼容处理。
开始录音
//开始录音 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)方法的参数说明如表所示。
2.采样率和码率关系
采样率和码率关系如表所示
三、音频管理
音频根据其播放性质可以分为背景音频和前台音频。 背景音频在小程序最小化之后还可以继续在后台播放。
1. 背景音频管理
小程序使用wx.getBackgroundAudioManager()获取全局唯一的背景音频管理器 backgroundAudioManager。backgroundAudioManager对象的属性说明如表所示。
backgroundAudioManager 对象的方法说明如表所示。
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 开始支持,低版本需做兼容处理。
innerAudioContext对象的方法说明如表所示。
//初始化音频 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参数说明如表所示。
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参数说明如表所示。
//保存视频 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: 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对象的方法列表如下表所示。
2. takePhoto的OBJECT参数
takePhoto的OBJECT参数列表如下表所示。
3. startRecord的OBJECT参数
startRecord的OBJECT参数列表如下表所示。
4. stopRecord的OBJECT参数
stopRecord的OBJECT参数列表如下表所示。