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

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

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

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({
 success: function(res) {
  var tempFilePath = res.tempFilePath 
 },
 fail: function(res) {
   //录音失败
 }
})
setTimeout(function() {
 //结束录音 
 wx.stopRecord()
}, 10000)

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

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

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

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

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

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({
  dataUrl: '',
  title: '',
  coverImgUrl: ''
})

wx.pauseBackgroundAudio()

wx.seekBackgroundAudio({
  position: 30
})

wx.stopBackgroundAudio()

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

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

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

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

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

<view class="container">
  <video src="/UploadFiles/2021-04-02/{{src}}">



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="/UploadFiles/2021-04-02/{{src}}">



// 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"//img.jbzj.com/file_images/article/201611/2016112211085222.png" alt="" />

 示例代码：


<view class="section tc">
 <video id="myVideo" src="/UploadFiles/2021-04-02/snsdyvideodownload">



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()
  })
 }
})



以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。



            
            上一篇：AngularJS中directive指令使用之事件绑定与指令交互用法示例

            下一篇：详解js中Json的语法与格式