微信小程序錄音與播放錄音功能實現,話不多說直接上代碼實例:
test.wxml
<button bindtap='start'>開始錄音</button>
<button bindtap='play'>播放錄音</button>
<button bindtap='stop'>停止錄音</button>
test.js
var voice = "";
Page({
play: function () {
//播放聲音文件
wx.playVoice({
filePath: voice
})
},
start: function () {
//開始錄音
wx.startRecord({
success: function (e) {
voice = e.tempFilePath
}
})
},
stop: function () {
//結束錄音
wx.stopRecord();
}
})
微信小程序錄音與播放錄音功能前端界面:
pick一下最終效果,然後一步一步來。先把界面效果做出來。
微信小程序錄音與播放錄音功能:
- 長按會隨動畫出現邊上半透明的圈,鬆開會縮回去。
- 頂部progressBar長按時出現,然後隨錄音時長變短。
這是界面功能,我們先搞一下。
wxml:
<view class="head">
<progress strokeWidth="4" percent="{{value}}" wx:if="{{showPg}}" ></progress>
<view class="dot {{isTouchStart==true?'dot-blowup':''}} {{isTouchEnd==true?'dot-zoomout':''}}" style="display:{{isDot}}"></view>
<view class="record" bindtouchstart="recordStart" bindtouchend="recordTerm">
<image mode="widthFix" src="../../images/record.png"></image>
</view>
</view>
wxss樣式:
.head {
width: 100%;
height: 400rpx;
position: relative;
}
.head ,page{
background-color: #f7f7f7;
}
.record, .dot {
height: 200rpx;
width: 200rpx;
border-radius: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-iteration-count: 1;
}
.record {
background: rgba(92, 212, 76);
z-index: 10;
}
.dot {
background: rgba(92, 212, 76, 0.7);
z-index: 9;
}
.dot-blowup {
animation: sploosh2 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
animation-fill-mode: forwards;
}
.dot-zoomout {
animation: sploosh3 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
animation-fill-mode: forwards;
}
@keyframes sploosh2 {
0% {
box-shadow: 0 0 0 0px rgba(92, 212, 76, 0.7);
background: rgba(92, 212, 76, 0.7);
}
100% {
box-shadow: 0 0 0 15px rgba(92, 212, 76, 0.3);
background: rgba(92, 212, 76, 0.3);
}
}
@keyframes sploosh3 {
0% {
box-shadow: 0 0 0 15px rgba(92, 212, 76, 0.3);
background: rgba(92, 212, 76, 0.3);
}
100%{
box-shadow: 0 0 0 0px rgba(92, 212, 76, 0.7);
background: rgba(92, 212, 76, 0.7);
}
}
.record image {
height: 90rpx;
width: 90rpx;
position: absolute;
top: 50%;
left: 50%;
z-index: 10;
background: transparent;
transform: translate(-50%, -50%);
}
js賦值:
var app = getApp(),
rm = wx.getRecorderManager();
//錄音停止時調用
rm.onStop(function(e) {
var a = this;
wx.showLoading({
title: "正在識別..."
});
//上傳邏輯
var n = {
url: app.globalData.url + "upload",
filePath: e.tempFilePath,
name: "music",
header: {
"Content-Type": "application/json"
},
success: function (res) {
}
};
wx.uploadFile(n);
}),
Page({
/**
* 頁面的初始數據
*/
data: {
hasRecord: false,
isDot: "block",
isTouchStart: false,
isTouchEnd: false,
value: '100',
touchStart:0,
touchEnd:0,
vd:''
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function(options) {
var a = this;
wx.authorize({
scope: "scope.record",
success: function() {
console.log("錄音授權成功");
},
fail: function() {
console.log("錄音授權失敗");
}
}), a.onShow()
},
// 點擊錄音按鈕
onRecordClick: function () {
wx.getSetting({
success: function (t) {
console.log(t.authSetting), t.authSetting["scope.record"] ? console.log("已授權錄音") : (console.log("未授權錄音"),
wx.openSetting({
success: function (t) {
console.log(t.authSetting);
}
}));
}
});
},
/**
* 長按錄音開始
*/
recordStart: function(e) {
var n = this;
rm.start({
format: "mp3",
sampleRate: 32e3,
encodeBitRate: 192e3
}), n.setData({
touchStart: e.timeStamp,
isTouchStart: true,
isTouchEnd: false,
showPg: true,
})
var a = 15, o = 10;
this.timer = setInterval(function () {
n.setData({
value: n.data.value - 100 / 1500
}), (o += 10) >= 1e3 && o % 1e3 == 0 && (a-- , console.log(a), a <= 0 && (rm.stop(),
clearInterval(n.timer), n.animation2.scale(1, 1).step(), n.setData({
animationData: n.animation2.export(),
showPg: false,
})));
}, 10);
},
/**
* 長按錄音結束
*/
recordTerm: function(e) {
rm.stop(), this.setData({
isTouchEnd: true,
isTouchStart: false,
touchEnd: e.timeStamp,
showPg: false,
value: 100
}), clearInterval(this.timer);
}
})
這裏我的錄音按鈕點擊擴散效果用的是純css實現,而上方progress是使用animation實現的。
參考自:必學智庫
在開發微信小程序遇到資源類無法顯示的問題:找了很多資料,特記錄備用。
1. 真機測試不能顯示圖片問題
原因:微信小程序的圖片資源必須是base64和網絡圖片格式。
解決方案:js中,對本地圖片進行轉碼,或者直接將url換爲image根目錄。
參考資料:http//:wangzhan.jiaxiangz.com