この記事では、主にレコーダー、オーディオ再生、アニメーションの WeChat アプレット開発について説明します。お役に立てれば幸いです。
1. 音声リストは最初はロードされていません
は実際に画像の表示と非表示を制御するために使用されます。ここで言うべきことは何もありません。録音APIでは、録音時間が短すぎると録音に失敗するため、録音時間の制限はWeChat音声と同じ60秒です。
3. 録音が完了したらリストをロードするだけです
下の写真はWeChatに保存されているファイルから取得したリスト情報です
。ここでのファイルはオーディオだけではない可能性があります。次のパスはすべて wx:file//store_...
Tencent/micromsg にもあります。 /wxafiles/wx..../ディレクトリ。
時間はフォーマット後のファイルサイズで、KBに換算するとBです。
モバイルディレクトリは以下の通りです。
以下はファイルのフルネームです
2.savedFilePath: WeChat では 100M のストレージ容量しか提供されないことに注意してください。できるだけ早く
騙されないでください。
コードをアップロードします:
1.index.wxml
<!--index.wxml--> <scroll-view> <view wx:if="{{voices}}" class="common-list" style="margin-bottom:120rpx;"> <block wx:for="{{voices}}"> <view class="board"> <view class="cell" > <view class="cell-bd" data-key="{{item.filePath}}" bindtap="gotoPlay" > <view class="date">存储路径:{{item.filePath}}</view> <view class="date" >存储时间:{{item.createTime}}</view> <view class="date">音频大小:{{item.size}}KB</view> </view> </view> </view> </block> </view> </scroll-view> <view wx:if="{{isSpeaking}}" class="speak-style"> <image class="sound-style" src="../../images/voice_icon_speech_sound_1.png" ></image> <image wx:if="{{j==2}}" class="sound-style" src="../images/voice_icon_speech_sound_2.png" ></image> <image wx:if="{{j==3}}" class="sound-style" src="../images/voice_icon_speech_sound_3.png" ></image> <image wx:if="{{j==4}}" class="sound-style" src="../images/voice_icon_speech_sound_4.png" ></image> <image wx:if="{{j==5}}"class="sound-style" src="../images/voice_icon_speech_sound_5.png" ></image> </view> <view class="record-style"> <button class="btn-style" bindtouchstart="touchdown" bindtouchend="touchup">按住 录音</button> </view>
2.index.wxss
/**index.wxss**/ .speak-style{ position: relative; height: 240rpx; width: 240rpx; border-radius: 20rpx; margin: 50% auto; background: #26A5FF; } .item-style{ margin-top: 30rpx; margin-bottom: 30rpx; } .text-style{ text-align: center; } .record-style{ position: fixed; bottom: 0; left: 0; height: 120rpx; width: 100%; } .btn-style{ margin-left: 30rpx; margin-right: 30rpx; } .sound-style{ position: absolute; width: 74rpx; height:150rpx; margin-top: 45rpx; margin-left: 83rpx; } .board { overflow: hidden; border-bottom: 2rpx solid #26A5FF; } /*列布局*/ .cell{ display: flex; margin: 20rpx; } .cell-hd{ margin-left: 10rpx; color: #885A38; } .cell .cell-bd{ flex:1; position: relative; } /**只显示一行*/ .date{ font-size: 30rpx; text-overflow: ellipsis; white-space:nowrap; overflow:hidden; }
3 .index.js
//index.js //获取应用实例 var app = getApp() Page({ data: { j: 1,//帧动画初始图片 isSpeaking: false,//是否正在说话 voices: [],//音频数组 }, onLoad: function () { }, //手指按下 touchdown: function () { console.log("手指按下了...") console.log("new date : " + new Date) var _this = this; speaking.call(this); this.setData({ isSpeaking: true }) //开始录音 wx.startRecord({ success: function (res) { //临时路径,下次进入小程序时无法正常使用 var tempFilePath = res.tempFilePath console.log("tempFilePath: " + tempFilePath) //持久保存 wx.saveFile({ tempFilePath: tempFilePath, success: function (res) { //持久路径 //本地文件存储的大小限制为 100M var savedFilePath = res.savedFilePath console.log("savedFilePath: " + savedFilePath) } }) wx.showToast({ title: '恭喜!录音成功', icon: 'success', duration: 1000 }) //获取录音音频列表 wx.getSavedFileList({ success: function (res) { var voices = []; for (var i = 0; i < res.fileList.length; i++) { //格式化时间 var createTime = new Date(res.fileList[i].createTime) //将音频大小B转为KB var size = (res.fileList[i].size / 1024).toFixed(2); var voice = { filePath: res.fileList[i].filePath, createTime: createTime, size: size }; console.log("文件路径: " + res.fileList[i].filePath) console.log("文件时间: " + createTime) console.log("文件大小: " + size) voices = voices.concat(voice); } _this.setData({ voices: voices }) } }) }, fail: function (res) { //录音失败 wx.showModal({ title: '提示', content: '录音的姿势不对!', showCancel: false, success: function (res) { if (res.confirm) { console.log('用户点击确定') return } } }) } }) }, //手指抬起 touchup: function () { console.log("手指抬起了...") this.setData({ isSpeaking: false, }) clearInterval(this.timer) wx.stopRecord() }, //点击播放录音 gotoPlay: function (e) { var filePath = e.currentTarget.dataset.key; //点击开始播放 wx.showToast({ title: '开始播放', icon: 'success', duration: 1000 }) wx.playVoice({ filePath: filePath, success: function () { wx.showToast({ title: '播放结束', icon: 'success', duration: 1000 }) } }) } }) //麦克风帧动画 function speaking() { var _this = this; //话筒帧动画 var i = 1; this.timer = setInterval(function () { i++; i = i % 5; _this.setData({ j: i }) }, 200); }
注:
1. 録音された音声はデフォルトではローカルの一時パスに保存されますが、2 回目に入力すると永続的に保存できます。ローカルファイルのサイズ制限は100Mです。バックグラウンドにアップロードするのが最善です。
2.录音的时间不能太短.否则会失败;也不能超过60秒.到了60秒会自动停止录音. 3.音频播放不能同时播放多个音频.看文档.微信小程序 播放音频文档 1.为了进来看得清楚.刚开始没有加载音频列表.代码往前挪一挪即可. 2.按住 录音按钮的时候会出现麦克风.中间的麦克风是个帧动画. 其实就是用js控制图片显示隐藏.没啥好说的.这里值得说一说的是录音.微信的录音API后,如果录音时间太短,会录音失败.所以fail的时候还是需要处理一下.录音时间的限制和微信语音是一样的.60秒. 3.我在录音完成后才加载列表. 下图就是从微信存储的文件里获取到的列表信息.有储存路径,创建时间,文件大小. 这里的文件可能不只是音频.这里我没做判断.下面的路径都是wx:file//store_... 我也去找了下.在Tencent/micromsg/wxafiles/wx..../这一级目录就能找到了. 时间是格式化之后的.文件大小是B,转成KB如下. 手机目录如下.但是打开之后播放不了.目前原因不明. 下面是文件全名称. 1.tempFilePath : 录音之后的临时文件.第二次进入小程序就不能正常使用了. 2.savedFilePath :持久保存的文件路径.值得注意的是微信只给100M的储存空间.还是尽早上传到后台吧. 4.播放录音音频. 点击item就能听到你的声音了.别被自己吓住.哈哈. 上代码: 1.index.wxml 2.index.wxss 注意: 1. 録音されたオーディオは、デフォルトでローカルの一時パスに保存されます。アプレットに再度入るときは、通常は使用できません。ただし、ローカル ファイルのサイズ制限は 100M です。バックグラウンドにアップロードします。 2 .録音時間が 60 秒を超えると失敗します。 WeChat アプレットは、記録後にファイルをアップロードする詳細な方法を実装します 以上がWeChat アプレット開発レコーダー、オーディオ再生、アニメーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。<!--index.wxml-->
<scroll-view>
<view wx:if="{{voices}}" class="common-list" style="margin-bottom:120rpx;">
<block wx:for="{{voices}}">
<view class="board">
<view class="cell" >
<view class="cell-bd" data-key="{{item.filePath}}" bindtap="gotoPlay" >
<view class="date">存储路径:{{item.filePath}}</view>
<view class="date" >存储时间:{{item.createTime}}</view>
<view class="date">音频大小:{{item.size}}KB</view>
</view>
</view>
</view>
</block>
</view>
</scroll-view>
<view wx:if="{{isSpeaking}}" class="speak-style">
<image class="sound-style" src="../../images/voice_icon_speech_sound_1.png" ></image>
<image wx:if="{{j==2}}" class="sound-style" src="../images/voice_icon_speech_sound_2.png" ></image>
<image wx:if="{{j==3}}" class="sound-style" src="../images/voice_icon_speech_sound_3.png" ></image>
<image wx:if="{{j==4}}" class="sound-style" src="../images/voice_icon_speech_sound_4.png" ></image>
<image wx:if="{{j==5}}"class="sound-style" src="../images/voice_icon_speech_sound_5.png" ></image>
</view>
<view class="record-style">
<button class="btn-style" bindtouchstart="touchdown" bindtouchend="touchup">按住 录音</button>
</view>
/**index.wxss**/
.speak-style{
position: relative;
height: 240rpx;
width: 240rpx;
border-radius: 20rpx;
margin: 50% auto;
background: #26A5FF;
}
.item-style{
margin-top: 30rpx;
margin-bottom: 30rpx;
}
.text-style{
text-align: center;
}
.record-style{
position: fixed;
bottom: 0;
left: 0;
height: 120rpx;
width: 100%;
}
.btn-style{
margin-left: 30rpx;
margin-right: 30rpx;
}
.sound-style{
position: absolute;
width: 74rpx;
height:150rpx;
margin-top: 45rpx;
margin-left: 83rpx;
}
.board {
overflow: hidden;
border-bottom: 2rpx solid #26A5FF;
}
/*列布局*/
.cell{
display: flex;
margin: 20rpx;
}
.cell-hd{
margin-left: 10rpx;
color: #885A38;
}
.cell .cell-bd{
flex:1;
position: relative;
}
/**只显示一行*/
.date{
font-size: 30rpx;
text-overflow: ellipsis;
white-space:nowrap;
overflow:hidden;
}
3.index.js//index.js
//获取应用实例
var app = getApp()
Page({
data: {
j: 1,//帧动画初始图片
isSpeaking: false,//是否正在说话
voices: [],//音频数组
},
onLoad: function () {
},
//手指按下
touchdown: function () {
console.log("手指按下了...")
console.log("new date : " + new Date)
var _this = this;
speaking.call(this);
this.setData({
isSpeaking: true
})
//开始录音
wx.startRecord({
success: function (res) {
//临时路径,下次进入小程序时无法正常使用
var tempFilePath = res.tempFilePath
console.log("tempFilePath: " + tempFilePath)
//持久保存
wx.saveFile({
tempFilePath: tempFilePath,
success: function (res) {
//持久路径
//本地文件存储的大小限制为 100M
var savedFilePath = res.savedFilePath
console.log("savedFilePath: " + savedFilePath)
}
})
wx.showToast({
title: '恭喜!录音成功',
icon: 'success',
duration: 1000
})
//获取录音音频列表
wx.getSavedFileList({
success: function (res) {
var voices = [];
for (var i = 0; i < res.fileList.length; i++) {
//格式化时间
var createTime = new Date(res.fileList[i].createTime)
//将音频大小B转为KB
var size = (res.fileList[i].size / 1024).toFixed(2);
var voice = { filePath: res.fileList[i].filePath, createTime: createTime, size: size };
console.log("文件路径: " + res.fileList[i].filePath)
console.log("文件时间: " + createTime)
console.log("文件大小: " + size)
voices = voices.concat(voice);
}
_this.setData({
voices: voices
})
}
})
},
fail: function (res) {
//录音失败
wx.showModal({
title: '提示',
content: '录音的姿势不对!',
showCancel: false,
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
return
}
}
})
}
})
},
//手指抬起
touchup: function () {
console.log("手指抬起了...")
this.setData({
isSpeaking: false,
})
clearInterval(this.timer)
wx.stopRecord()
},
//点击播放录音
gotoPlay: function (e) {
var filePath = e.currentTarget.dataset.key;
//点击开始播放
wx.showToast({
title: '开始播放',
icon: 'success',
duration: 1000
})
wx.playVoice({
filePath: filePath,
success: function () {
wx.showToast({
title: '播放结束',
icon: 'success',
duration: 1000
})
}
})
}
})
//麦克风帧动画
function speaking() {
var _this = this;
//话筒帧动画
var i = 1;
this.timer = setInterval(function () {
i++;
i = i % 5;
_this.setData({
j: i
})
}, 200);
}