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


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 相关文章推荐
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 Javascript
Javascript &amp; DHTML 实例编程(教程)基础知识
Jun 02 Javascript
javascript json2 使用方法
Mar 16 Javascript
js如何获取file控件的完整路径具体实现代码
May 15 Javascript
js制作简易年历完整实例
Jan 28 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
Jquery基础教程之DOM操作
Aug 19 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
jQuery继承extend用法详解
Oct 10 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
vue devtools的安装与使用教程
Aug 08 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中PDO基础教程 入门级
2011/09/04 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
简单快速的实现js计算器功能
2017/08/17 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python文件处理
2016/02/29 Python
深入浅析python 中的匿名函数
2018/05/21 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
电子商务专业学生的学习自我评价
2013/10/27 职场文书
《胡杨》教学反思
2014/02/16 职场文书
单位委托书怎么写
2014/09/21 职场文书
婚前财产协议书范本
2014/10/19 职场文书
2015大学生求职信范文
2015/03/20 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
院系推荐意见
2015/06/05 职场文书
2016年劳模先进事迹材料
2016/02/25 职场文书
利用 JavaScript 构建命令行应用
2021/11/17 Javascript