微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例


Posted in Javascript onNovember 22, 2016

本文介绍了微信小程序的开发,主要包括图片、录音、音频播放、音乐播放、视频、文件,具体如下:

图片:

wx.chooseImage(OBJECT)

从本地相册选择图片或使用相机拍照。

OBJECT参数说明:微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

注:文件的临时路径,在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 wx.saveFile,在小程序下次启动时才能访问得到。

示例代码:

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

wx.previewImage(OBJECT)

预览图片。

OBJECT参数说明:微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

示例代码:

wx.previewImage({
 current: '', // 当前显示图片的http链接
 urls: [] // 需要预览的图片http链接列表
})

wx.getImageInfo(OBJECT)

获取图片信息

OBJECT参数说明:微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

success返回参数说明:微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

示例代码:

wx.getImageInfo({
 src: 'images/a.jpg',
 success: function (res) {
  console.log(res.width)
  console.log(res.height)
 }
})

wx.chooseImage({
 success: function (res) {
  wx.getImageInfo({
   src: res.tempFilePaths[0],
   success: function (res) {
    console.log(res.width)
    console.log(res.height)
   }
  })
 }
})

录音:

wx.startRecord(OBJECT)

开始录音。当主动调用wx.stopRecord,或者录音超过1分钟时自动结束录音,返回录音文件的临时文件路径。

OBJECT参数说明:微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

注:文件的临时路径,在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用wx.saveFile,在小程序下次启动时才能访问得到。

wx.stopRecord()

主动调用停止录音。

示例代码:

wx.startRecord({
 success: function(res) {
  var tempFilePath = res.tempFilePath 
 },
 fail: function(res) {
   //录音失败
 }
})
setTimeout(function() {
 //结束录音 
 wx.stopRecord()
}, 10000)

音频播放控制:

wx.playVoice(OBJECT)

开始播放语音,同时只允许一个语音文件正在播放,如果前一个语音文件还没播放完,将中断前一个语音播放。

OBJECT参数说明:微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

示例代码:

wx.startRecord({
 success: function(res) {
  var tempFilePath = res.tempFilePath
  wx.playVoice({
   filePath: tempFilePath,
   complete: function(){
   }
  })
 }
})

wx.pauseVoice()

暂停正在播放的语音。再次调用wx.playVoice播放同一个文件时,会从暂停处开始播放。如果想从头开始播放,需要先调用 wx.stopVoice。

示例代码:

wx.startRecord({
 success: function(res) {
  var tempFilePath = res.tempFilePath
   wx.playVoice({
   filePath: tempFilePath
  })

  setTimeout(function() {
    //暂停播放
   wx.pauseVoice()
  }, 5000)
 }
})

wx.stopVoice()

结束播放语音。

示例代码:

wx.startRecord({
 success: function(res) {
  var tempFilePath = res.tempFilePath
  wx.playVoice({
   filePath:tempFilePath
  })

  setTimeout(function(){
   wx.stopVoice()
  }, 5000)
 }
})

音乐播放控制:

wx.getBackgroundAudioPlayerState(OBJECT)
获取音乐播放状态。

OBJECT参数说明:微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

 success返回参数说明:微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

 示例代码:

wx.getBackgroundAudioPlayerState({
  success: function(res) {
    var status = res.status
    var dataUrl = res.dataUrl
    var currentPosition = res.currentPosition
    var duration = res.duration
    var downloadPercent = res.downloadPercent
  }
})

wx.playBackgroundAudio(OBJECT)

播放音乐,同时只能有一首音乐正在播放。

OBJECT参数说明微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

示例代码

wx.playBackgroundAudio({
  dataUrl: '',
  title: '',
  coverImgUrl: ''
})

wx.pauseBackgroundAudio()
暂停播放音乐。

示例代码

wx.pauseBackgroundAudio()

wx.seekBackgroundAudio(OBJECT)
控制音乐播放进度。

OBJECT参数说明微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

示例代码

wx.seekBackgroundAudio({
  position: 30
})

wx.stopBackgroundAudio()

停止播放音乐。

示例代码

wx.stopBackgroundAudio()

wx.onBackgroundAudioPlay(CALLBACK)

监听音乐播放。

wx.onBackgroundAudioPause(CALLBACK)
监听音乐暂停。

wx.onBackgroundAudioStop(CALLBACK)

监听音乐停止。

文件:

wx.saveFile(OBJECT)

保存文件到本地。

OBJECT参数说明:微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

示例代码:

wx.startRecord({
 success: function(res) {
  var tempFilePath = res.tempFilePath
  wx.saveFile({
   tempFilePath: tempFilePath,
   success: function(res) {
    var savedFilePath = res.savedFilePath
   }
  })
 }
})

wx.getSavedFileList(OBJECT)

获取本地已保存的文件列表

OBJECT参数说明:微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

 success返回参数说明:微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

 fileList中的项目说明:微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

 示例代码:

wx.getSavedFileList({
 success: function(res) {
  console.log(res.fileList)
 }
})

wx.getSavedFileInfo(OBJECT)

获取本地文件的文件信息

OBJECT参数说明:微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

 success返回参数说明:微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

 示例代码:

wx.getSavedFileInfo({
 filePath: 'wxfile://somefile', //仅做示例用,非真正的文件路径
 success: function(res) {
  console.log(res.size)
  console.log(res.createTime)
 }
})

wx.removeSavedFile(OBJECT)

删除本地存储的文件

OBJECT参数说明:微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

 示例代码:

wx.getSavedFileList({
 success: function(res) {
  if (res.fileList.length > 0){
   wx.removeSavedFile({
    filePath: res.fileList[0].filePath,
    complete: function(res) {
     console.log(res)
    }
   })
  }
 }
})

wx.openDocument(OBJECT)

新开页面打开文档,支持格式:doc, xls, ppt, pdf, docx, xlsx, pptx

OBJECT参数说明:微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例 

示例代码

wx.downloadFile({
 url: 'http://example.com/somefile.pdf',
 success: function (res) {
  var filePath = res.tempFilePath 
  wx.openDocument({
   filePath: filePath,
   success: function (res) {
    console.log('打开文档成功')
   }
  })
 }
})

视频:

wx.chooseVideo(OBJECT)

拍摄视频或从手机相册中选视频,返回视频的临时文件路径。

OBJECT参数说明:微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

返回参数说明:微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

注:文件的临时路径,在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 wx.saveFile,在小程序下次启动时才能访问得到。

示例代码:

<view class="container">
  <video src="{{src}}"></video>
  <button bindtap="bindButtonTap">获取视频</button>
</view>
Page({
  bindButtonTap: function() {
    var that = this
    wx.chooseVideo({
      sourceType: ['album','camera'],
      maxDuration: 60,
      camera: ['front','back'],
      success: function(res) {
        that.setData({
          src: res.tempFilePath
        })
      }
    })
  }
})

音频组件控制:

wx.createAudioContext(audioId)

创建并返回 audio 上下文 audioContext 对象

audioContext

audioContext 通过 audioId 跟一个 audio 组件绑定,通过它可以操作一个 audio 组件。

audioContext对象的方法列表:微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

 示例代码:

<!-- audio.wxml -->
<audio src="{{src}}" id="myAudio" ></audio>

<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暂停</button>
<button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>
<button type="primary" bindtap="audioStart">回到开头</button>
// audio.js
Page({
 onReady: function (e) {
  // 使用 wx.createAudioContext 获取 audio 上下文 context
  this.audioCtx = wx.createAudioContext('myAudio')
 },
 data: {
  src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
 },
 audioPlay: function () {
  this.audioCtx.play()
 },
 audioPause: function () {
  this.audioCtx.pause()
 },
 audio14: function () {
  this.audioCtx.seek(14)
 },
 audioStart: function () {
  this.audioCtx.seek(0)
 }
})

视频组件控制:

wx.createVideoContext(videoId)

创建并返回 video 上下文 videoContext 对象

videoContext

videoContext 通过 videoId 跟一个 video 组件绑定,通过它可以操作一个 video 组件。

videoContext对象的方法列表:微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

 示例代码:

<view class="section tc">
 <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"  enable-danmu danmu-btn controls></video>
 <view class="btn-area">
  <input bindblur="bindInputBlur"/>
  <button bindtap="bindSendDanmu">发送弹幕</button>
 </view>
</view>
function getRandomColor () {
 let rgb = []
 for (let i = 0 ; i < 3; ++i){
  let color = Math.floor(Math.random() * 256).toString(16)
  color = color.length == 1 ? '0' + color : color
  rgb.push(color)
 }
 return '#' + rgb.join('')
}

Page({
 onReady: function (res) {
  this.videoContext = wx.createVideoContext('myVideo')
 },
 inputValue: '',
 bindInputBlur: function(e) {
  this.inputValue = e.detail.value
 },
 bindSendDanmu: function () {
  this.videoContext.sendDanmu({
   text: this.inputValue,
   color: getRandomColor()
  })
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javaScript对象和属性的创建方法
Jan 15 Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
js脚本实现数据去重
Nov 27 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
图文详解JavaScript的原型对象及原型链
Aug 02 Javascript
简单实现js浮动框
Dec 13 Javascript
Ajax基础知识详解
Feb 17 Javascript
微信小程序tabBar用法实例详解
Dec 04 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 Javascript
详解js中Json的语法与格式
Nov 22 #Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 #Javascript
javascript入门之string对象【新手必看】
Nov 22 #Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 #Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 #Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 #Javascript
jQuery中$.grep() 过滤函数 数组过滤
Nov 22 #Javascript
You might like
Php+SqlServer实现分页显示
2006/10/09 PHP
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
JavaScript null和undefined区别分析
2009/10/14 Javascript
dropdownlist之间的互相联动实现(显示与隐藏)
2009/11/24 Javascript
再论Javascript下字符串连接的性能
2011/03/05 Javascript
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
分享一个插件实现水珠自动下落效果
2016/06/01 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
深入探讨Vue.js组件和组件通信
2016/09/12 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
解决vue-router进行build无法正常显示路由页面的问题
2018/03/06 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
python遍历目录的方法小结
2016/04/28 Python
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
python opencv摄像头的简单应用
2019/06/06 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
交通文明倡议书
2014/05/16 职场文书
摄影展策划方案
2014/06/02 职场文书
市委常委会班子党的群众路线教育实践活动整改方案
2014/10/25 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
健康证明
2015/06/19 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书
高中信息技术教学反思
2016/02/16 职场文书
python爬取某网站原图作为壁纸
2021/06/02 Python
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android