微信小程序开发笔记⑩——音频与录音api、背景音频组件api、图片api、加载外部字体和文件api

音频和录音

官方描述
https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/api-limit.html#录音
https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/api-limit.html#音频播放控制

下面实现了一个简单的ktv的功能

<view>
  <button bindtap="record">录制5秒音频</button>
  <button bindtap="playVoice">播放录音</button>
  <button bindtap="pauseVoice">暂停音频</button>
</view>

其中record、pauseVoice和playVoice函数实现了录音、暂停音频和播放音频的功能，在onReady生命周期函数中我们可以选择需要播放的背景音乐。

// pages/record/record.js
var tempFilePath = ""
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  record:function(){
    console.log("录制音频开始")
    // 录制音频
    wx.startRecord({
      complete: (res) => {
        tempFilePath = res.tempFilePath
      },
    })

    setTimeout(() => {
      console.log("停止录音")
      wx.stopRecord()
    }, 5000)
  },

  pauseVoice:function(){
    wx.pauseVoice()
  },

  playVoice:function(){
    wx.playVoice({
      filePath: tempFilePath
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    const bgm = wx.getBackgroundAudioManager()
    bgm.title = "卞夫人"
    bgm.src = "http://58.49.111.144/amobile.music.tc.qq.com/C4000004ketw0EuOct.m4a?guid=7854139360&vkey=719D81280B576BADF4653F5ACD46F9366662770AE3B2C15D77DCDF7BC843699A8D377CE15F7DFEC1EC225E221FF3FB9E470A2A837645D8CC&uin=6148&fromtag=66"
  }
})

背景音频

官网描述
https://developers.weixin.qq.com/miniprogram/dev/api/media/background-audio/wx.stopBackgroundAudio.html

下面制作了一个简单的音乐播放器

<view class="cantainer">
  <text class="music-category-text">最近添加></text>
  <view class="big-photo-list">
    <view class="big-photo-item" wx:for="{{songsList}}" bindtap="play" data-num="{{index}}">
      <image class="photo" src="{{item.coverImageUrl}}"></image>
      <text class="music-name">{{item.name}}</text>
      <text class="music-singer">{{item.singer}}</text>
    </view>
  </view>

  <!-- 选择列表 -->
  <view class="music-group-selector" bindtap="actionSheetTap">
    <text class="music-group-selector-text">{{musicGroupName}}</text>
    <image class="music-group-selector-jiantou" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1882956170,2456620087&fm=26&gp=0.jpg"></image>
  </view>
</view>

<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">
  <block wx:for="{{actionSheetItems}}">
    <action-sheet-item bindtap="bindItemTap" data-sheetitem="{{item}}">
      {{item}}
    </action-sheet-item>
  </block>
  <action-sheet-cancel class="cancel">取消</action-sheet-cancel>
</action-sheet>

<view class="play-bar">
  <view class="play-bar-image-container">
    <image class="play-bar-image" src="{{playBar.coverImageUrl}}"></image>
  </view>
  <text class="play-bar-text">{{playBar.name}}</text>
  <block wx:if="{{playing == true}}">
    <image bindtap="pausemusic" data-num="PlayingSongNum" class="play-bar-button" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2235818550,2387407991&fm=26&gp=0.jpg"></image>
  </block>
  <block wx:else>
    <image bindtap="playmusic" data-num="PlayingSongNum" class="play-bar-button" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1725499555,1386603315&fm=26&gp=0.jpg"></image>
  </block>
</view>

/**index.wxss**/
.cantainer{
  align-items: flex-start;
}

.music-category-text{
  font-size: 28rpx;
  line-height: 30rpx;
}

.big-photo-list{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.big-photo-item{
  width: 280rpx;
  display: flex;
  flex-direction: column;
  padding: 5rpx 0;
}

.photo{
  width: 280rpx;
  height: 280rpx;
  border-radius: 10rpx;
  background: #aaa;
}

.music-name{
  font-size: 24rpx;
  line-height: 32rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.music-singer{
  font-size: 24rpx;
  color: #929292;
  line-height: 32rpx;
}

.music-group-selector{
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 10rpx 0;
}

.music-group-selector-text{
  font-size: 28rpx;
}

.music-group-selector-jiantou{
  width: 28rpx;
  height: 28rpx;
}

.play-bar{
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  background: #f9f9f9;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.play-bar-image-container{
  width: 75rpx;
  height: 75rpx;
  padding-left: 30rpx;
}

.play-bar-image{
  width: 75rpx;
  height: 75rpx;
  border-radius: 30rpx;
}

.play-bar-button{
  width: 40rpx;
  height: 40rpx;
  padding-right: 30rpx;
}

var _items = ['播放列表','歌曲','专辑','演唱者']

var _songsList = [
  {
    dataUrl:"http://58.49.111.144/amobile.music.tc.qq.com/C4000004ketw0EuOct.m4a?guid=7854139360&vkey=719D81280B576BADF4653F5ACD46F9366662770AE3B2C15D77DCDF7BC843699A8D377CE15F7DFEC1EC225E221FF3FB9E470A2A837645D8CC&uin=6148&fromtag=66",
    name:"卞夫人",
    singer:"星辰",
    coverImageUrl:"https://y.gtimg.cn/music/photo_new/T002R300x300M000000hMsw84HkGxz.jpg?max_age=2592000"
  },
  {
    dataUrl:"http://119.96.180.17/amobile.music.tc.qq.com/C400000CW4IE1luDkT.m4a?guid=7854139360&vkey=EE885F8D1BAD90CD5C8491E42DB8049DD1F51849196C50CEFD5EF9934A6680D4BEDBFD1168AA06D090BDB41F1743D06B4E4375F052DDCE8F&uin=6148&fromtag=66",
    name:"深海少女",
    singer:"初音未来",
    coverImageUrl:"https://y.gtimg.cn/music/photo_new/T002R300x300M000000FshwT4RbKr0.jpg?max_age=2592000"
  },
  {
    dataUrl:"http://119.96.180.25/amobile.music.tc.qq.com/C400002MtSZF48Jr4M.m4a?guid=7854139360&vkey=733FD99C2886EC9BFA5937DA5267CF72242B7AF9981709759154E5CDB878F234F3B41F8D754A5876F0EC39750E7E8EE357F1B9AF2C48A637&uin=6148&fromtag=66",
    name:"权御天下",
    singer:"洛天依",
    coverImageUrl:"https://y.gtimg.cn/music/photo_new/T002R300x300M000001gQ5oZ3ZIbAw.jpg?max_age=2592000"
  },
  {
    dataUrl:"http://119.96.180.20/amobile.music.tc.qq.com/C400001z0bju29OAAs.m4a?guid=7854139360&vkey=FD18B20E45383B548C60849BDE03C04F966B352D113F0AEC3AEDF89D1EC2C1AF58280953B8ACF00A162CB85D1A7951DBB03ECA741B2D926E&uin=6148&fromtag=66",
    name:"Tell Your World ",
    singer:"初音未来",
    coverImageUrl:"https://y.gtimg.cn/music/photo_new/T002R300x300M000001R5v862slmjl.jpg?max_age=2592000"
  }
]
Page({
  data: {
    songsList:_songsList,
    musicGroupName:_items[0],
    actionSheetHidden:true,
    actionSheetItems:_items,
    playing:false,
    playBar:{
      dataUrl:"",
      name:"",
      singer:"",
      coverImgUrl:""
    }
  },

  // 音乐排行选择
  actionSheetTap:function(){
    // 显示已经隐藏的对话框
    this.setData({
      actionSheetHidden: !this.data.actionSheetHidden
    })
  },

  // 隐藏或取消选择框
  actionSheetChange:function(){
    this.setData({
      actionSheetHidden: !this.data.actionSheetHidden
    })
  },

  // 选择音乐排行的条件
  bindItemTap:function(e){
    this.setData({
      musicGroupName:e.currentTarget.dataset.sheetitem,
      actionSheetHidden: !this.data.actionSheetHidden
    })
  },

  /**
   * 播放
   * @param {*} e 
   */
  play:function(e){
    //获取现在所点击的歌曲
    var num = e.currentTarget.dataset.num
    var res = this.data.songsList[num]

    this.setData({
      playBar:res,
      playing:true,
      PlayingSongNum:num
    })

    wx.playBackgroundAudio({
      dataUrl: res.dataUrl,
      name: res.name,
      singer: res.singer,
      coverImgUrl: res.coverImageUrl,
      complate:function(res){
        this.setData({
          playing:true
        })
      }
    })
  },

  pausemusic:function(){
    var that = this;
    wx.pauseBackgroundAudio({
      success:function(){
        that.setData({
          playing:false
        })
      }
    });
  },

  playmusic:function(){
    var that = this;
    wx.playBackgroundAudio({
      success:function(){
        that.setData({
          playing:true
        })
      }
    })
  }
})

图片操作

官方描述
https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.saveImageToPhotosAlbum.html

下面实现了图片的选择操作，并且获取了图片的信息，进行了图片的预览和图片的保存

<view>
  <button bindtap="chooseImage">选择图片</button>
</view>

chooseImage:function(){
  // 选择图片
  wx.chooseImage({
    count:9,
    sizeType:['original','compressed'],
    sourceType:['album','camera'],
    complete: (res) => {
      console.log(res);
      const tempFilePaths = res.tempFilePaths;
      // 获得图片的信息
      wx.getImageInfo({
        src: tempFilePaths[0],
        success:function(res){
          console.log(res)
          //预览图片
          wx.previewImage({
            urls: [tempFilePaths[0]]
          })
          //保存图片
          wx.saveImageToPhotosAlbum({
            filePath: tempFilePaths[0],
            success:function(res){
              console.log("保存成功")
              console.log(res)
            }
          })
        }
      })
    },
  })
},

下面是真机调试的结果

下面则实现了图片的压缩，图片的压缩能节省带宽和内存的使用，其中quality为压缩后图片的质量，范围0～100，数值越小，质量越低，压缩率越高（仅对jpg有效）。

<button bindtap="compressImage">压缩图片</button>

/**
 * 压缩图片
 */
compressImage:function(){
  wx.compressImage({
    src: 'src',
    quality:70,
    success:function(res){
      console.log(res)
    }
  })
},

外部字体加载

官方描述
https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html

注意：

1. 字体文件返回的 contet-type 参考 font，格式不正确时会解析失败。
2. 字体链接必须是https（ios不支持http)
3. 字体链接必须是同源下的，或开启了cors支持，小程序的域名是servicewechat.com
4. canvas等原生组件不支持使用接口添加的字体
5. 工具里提示 Faild to load font可以忽略
6. ‘2.10.0’ 以前仅在调用页面生效。

下面实现了加载外部字体

<view class="container">
  <button bindtap="downloadFont">加载网络字体</button>
  <view class="font-load">{{fontShow}}</view>
</view> 

这里的字体就是我们在下面加载的字体，font-family就是loadFontFace中设置的family的值

.font-load{
  font-family: "Bitstream Vera Serif Bold";
}

data: {
  fontShow:"Bitstream Vera Serif Bold"
},

downloadFont:function(){
  wx.loadFontFace({
    family: this.data.fontShow,
    source: 'url("https://sungd.github.io/Pacifico.ttf")',
    success:function(res){
      console.log(res)
    }
  })
},

加载之前

加载之后

文件操作

官方描述
https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.saveFile.html

下面演示了对拍照后的照片文件的各种操作

<view>
  <camera device-position="back" flash="off" style="width:100%;height:300px"></camera>
  <button type="primary" bindtap="takePhoto">拍照</button>
  <button bindtap="save">保存照片</button>
  <button bindtap="saveList">查看已经存储在本地的文件列表</button>
  <button bindtap="saveFileInfo">已经存储在本地的一个文件的信息</button>
</view>

// pages/file/file.js
var tempPath = ""
var savedFileList = []
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  takePhoto:function(){
    // 使用拍照对象拍照
    this.ctx.takePhoto({
      quality:"high",
      success:function(res){
        tempPath = res.tempImagePath
        console.log(tempPath)
        // 读取临时缓存文件的信息
        wx.getFileInfo({
          filePath: tempPath,
          success(e){
            console.log(e)
          }
        })
      }
    })
  },

  /**
   * 保存文件
   */
  save:function(){
    //保存我们刚刚拍的照片
    wx.saveFile({
      tempFilePath: tempPath,
      success(res){
        console.log(res)
      },
      fail(res){
        console.log(res)
      }
    })
  },

  /**
   * 已经存储的文件列表
   */
  saveList:function(){
    wx.getSavedFileList({
      complete: (res) => {
        console.log(res.fileList)
        savedFileList = res.fileList
      },
    })
  },

  /**
   * 单独文件信息
   */
  saveFileInfo:function(){
    //获得最近的一个文件的信息
    wx.getSavedFileInfo({
      filePath: savedFileList[0].filePath,
      success:function(res){
        console.log(res)
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    // 创建拍照对象
    this.ctx = wx.createCameraContext()
  }
})

下面是一系列操作的调试结果

来源：CSDN

作者：ww0peo

链接：https://blog.csdn.net/qq_35262405/article/details/104049301