微信小程序开发笔记⑩——音频与录音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.numvar 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

注意：

字体文件返回的 contet-type 参考 font，格式不正确时会解析失败。
字体链接必须是https（ios不支持http)
字体链接必须是同源下的，或开启了cors支持，小程序的域名是servicewechat.com
canvas等原生组件不支持使用接口添加的字体
工具里提示 Faild to load font可以忽略
‘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.tempImagePathconsole.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()}
})

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

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

微信小程序开发笔记——wsdchong
微信小程序开发笔记一.小程序简介小程序起源于微信的webview:此类API最初是提供给腾讯内部一些业务使用,很多外部开发者发现后,照葫芦画瓢,逐渐成为微信中网页的事实标准.2015年初,微信发布 ...
微信小程序开发笔记，你收藏了吗？
** 微信小程序开发笔记,你收藏了吗? ** 最近在开发微信小程序,把自己在项目中经常遇到的知识点记录下来,以便下次开发的时候查看. 开发小程序开发工具推荐vscode写代码,微信开发工具用于查看效果 ...
微信小程序开发笔记进阶篇④——getPhoneNumber 获取用户手机号码（小程序云）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.云函数五.程序流程一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机号码. 但是,因 ...
微信小程序开发笔记进阶篇⑤——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之前）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程六.参考一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...
微信小程序开发笔记二（WXSS和CSS样式美化）
微信小程序开发笔记二(WXSS和CSS样式美化) 一.CSS基本知识 1.Class选择器的定义 2.ID选择器的定义 3.ID选择器和class选择器的区别 4.CSS中设置颜色 5.CSS中的文本 ...
微信小程序开发笔记进阶篇③——onfire.js事件订阅和发布在微信小程序中的使用
文章目录一.前言二.onfire.js介绍三.API介绍四.实例应用五.onfire源码六.实例源码一.前言微信小程序开发笔记--导读二.onfire.js介绍一个简单实用的事件订 ...
微信小程序开发笔记进阶篇⑥——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之后）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程六.参考一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...
微信小程序开发笔记支付篇②——微信小程序通过小程序云实现微信支付功能
文章目录一.前言二.开通微信支付 2.1 关联商户号 2.2 添加商户号 2.3 管理员授权三.云函数开发 3.1 新建云函数 3.2 云函数代码 3.3 云函数上传并部署四.小程序调用 4. ...
微信小程序开发笔记（1.1）滚动选择器picker的使用
微信小程序开发笔记(1.1)滚动选择器picker的使用前言滚动选择器picker 普通选择器多列选择器时间选择器日期选择器省市区选择器前言最近被拉来做小程序,因为时间比较赶,其他方面 ...