//WXML
<view class='pages' hidden='{{!ShowNones}}'>
<!-- 录制标题 -->
<view class='recods'>
<label class='recod_title'>录制声音
<image class='recd_icon' src='../../../record/mp_im.png'></image>
</label>
</view>
<!-- title提示 -->
<view class='recod'>
<label class='recod_titles'>如果不知道说什么，请选择文案</label>
</view>
<!-- 文本域视图容器 -->
<view class='text_view'>
<view class='tews'>
<textarea class="areas" value='{{text_value}}' disabled='disabled' maxlength="255" bindinput="inputs" />
</view>
</view>
<!-- 换一换 -->
<view class='ralpace'>
<label class='ralpace_title' data-value='{{text_value}}' bindtap='btn_change'>
<image class='ralpac_img' src='../../../record/huan.png'></image>换一换</label>
</view>
<!-- 录制语音 -->
<view class='rocud_voices'>
<view class='rocud_mp3' wx:if="{{recuod_id==1}}">
<!-- 录制成功遮罩 -->
<!-- 录制icon -->
<view class='mp3_view'>
<image class='mp_icon' src='{{rocud_icon}}'></image>
</view>
<!-- 录制时间 -->
<view class='time_view'>00:<label wx:if="{{speck_time>9}}">{{speck_time}}</label><label wx:if="{{speck_time<10}}">0{{speck_time}}</label>
</view>
<!-- 保存成功得到的录音列表数据 点击播放 -->
<scroll-view>
<view class="common_list">
<block wx:for="{{voices}}" wx:key="item">
<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 class="record_style">
<view class="btn_style" bindlongtap='touchdown' bindtouchend="touchup" style='color:{{recod_color}}'>{{recod_name}}</view>
</view>
</view>
<!-- else -->
<view class='rocud_mp3s' wx:else>
<!-- 时间进度条 -->
<view class='proess_view'>
<view class='muite_time'>{{speck_time}}S</view>
<progress percent="{{times}}" border-radius="10" stroke-width="20" />
<label class='muite_view'>60S</label>
</view>
<!-- 保存成功得到的录音列表数据 点击播放 -->
<scroll-view>
<view class="common_list">
<block wx:for="{{voices}}" wx:key="item">
<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 class='submit'>
<view class='btn_show' bindtap="btn_show">重新录制</view>
<view class='btn_show' bindtap="btn_play">播放录音</view>
</view>
</view>
</view>
<!-- 底部选项 -->
<view class='nick_sub'>
<!-- <view class='nick_next' bindtap='btn_sel'>预览</view> -->
<!-- <view class='nick_next' bindtap='btn_edit'>跳过录制</view>
<view class='nick_edit' bindtap='btn_next'>保存录制</view> -->
</view>
</view>//JS
const recorderManager = wx.getRecorderManager()
const innerAudioContext = wx.createInnerAudioContext()
var app=new getApp();
Component({
properties: {
myProperty: {
type: String,
value: '',
observer: function () { }
},
},
data: {
// 录制默认id
recuod_id: 1,
// 录制时间
times: 0,
formFile:[],
formFileID:2,
j: 1, //帧动画初始图片
// isSpeaking: false,//是否正在说话
voices: [], //音频数组
// 默认按住录音
recod_name: "长按开始录制",
// 默认初始化录制icon
rocud_icon: "../../../record/none.png",
// 换一换
text_value: "你像那天边的云，飘泊不定，叫人难以追寻；你像那水中的萍，流移四方，叫我难以琢磨。你能告诉我吗？怎样才能追上你的身影，怎样才能与你相伴不离？",
// 获取到当前录音开始时间
start_time: "",
// 录制最终时间
speck_time: 0,
//存储计时器
setInter: '',
num: 1,
list: [],
// 文本内容
newLists: [{
name: "世上最凄绝的距离是两个人本来距离很远，互不相识，忽然有一天，他们相识，相爱，距离变得很近。"
}, {
name: "不管是晴天阴天雨天，能见到你的一天，就是晴朗的一天；不管是昨天今天明天，能和你在一起的一天，就是美好的一天。"
}, {
name: "也许上帝让你在遇见那个合适的人之前遇见很多错误的人，所以，当这一切发生的时候，你应该心存感激。"
}, {
name: "最美好的事是有人爱你，最安心的事是有人信你，最幸福的事是有人陪你，最奢侈的事是有人等你。"
}, {
name: "你像那天边的云，飘泊不定，叫人难以追寻；你像那水中的萍，流移四方，叫我难以琢磨。你能告诉我吗？怎样才能追上你的身影，怎样才能与你相伴不离？"
}],
myself_value: [{
name: "我曾为时光匆匆流逝而遗憾，曾为生命如此短暂而感伤，曾为花草树木的调残而惆怅，曾为生活的坚信而彷徨，当情海思绪积压我心头的时候，我想寻找一叶扁舟，在大海上游荡，让思绪尽情的释放。"
}, {
name: "上天给了我黑色的眼睛，我用他来寻找光明，就像向日葵执着的寻找阳光。"
}, {
name: "都说生活不止眼前的苟且，还有诗和远方的田野，我其实就如不知所谓的鸟儿一样，向着心中火火的朝阳，奋力疾飞，将她放在心中，温暖我余下的整个人生。"
}, {
name: "既不回头，何必不忘。既然无缘，何须誓言。今日种种，似水无痕。明夕何夕，君已陌路。"
}, {
name: "我是这样的人读过一些书，呆过几座城。 遇过一些事，爱过几个人。 不爱日出，喜欢晚云。 不求晴好，只享阴凉。 讨厌咖啡，乱品白水。 有过可笑的理想，流过无谓的汗水。 认真思考时少言寡语，头脑空白时喋喋不休。 有别人艳羡的事业，却无自己想要的幸福 一枚凡人，十足情种。 特想变坏，无奈品种。 还有续章，来日方长。"
}],
recod_color: "#333",
},
methods: {
// 打开
getopen(res) {
wx.setNavigationBarTitle({
title: "录音功能"
})
this.setData({
ShowNones: true
})
},
// 点击换一换
btn_change: function (res) {
var that = this;
for (var i in that.data.newLists) {
console.log(that.data.newLists[i].name);
//判断是否达到了最后一个，此时数组中的数据没有与输入框中相同的，设置成数组的第一个值
if (i == (that.data.newLists.length - 1)) {
that.setData({
text_value: that.data.newLists[0].name
});
break;
}
//如果有相同的数据则换数组的下一个数据
if (that.data.newLists[i].name == that.data.text_value) {
var num = parseInt(i) + 1;
console.log(that.data.newLists[num].name);
that.setData({
text_value: that.data.newLists[num].name
});
break;
}
}
},
// 完成编辑
btn_edit: function () {
var loveCardId = 1;
var that = this;
console.log("card", loveCardId);
wx.navigateTo({
url: '/pages/make_self/make_self',
})
wx.stopVoice();
clearInterval(that.data.setInter);
// 获取到结束时间
that.stop();
},
// 下一步
btn_next: function () {
wx.navigateTo({
url: '/pages/make_self/make_self',
})
var that = this;
wx.stopVoice();
clearInterval(that.data.setInter);
// 获取到结束时间
that.stop();
},
//手指按下
touchdown: function (e) {
var that = this;
console.log('touchStart....')
wx.getSetting({
success(res) {
if (res.authSetting['scope.record']) {
//第二次才成功授权
//将计时器赋值给setInter
that.data.setInter = setInterval(
function () {
var speck_time = parseInt(that.data.speck_time + 1);
that.setData({
speck_time: parseInt(speck_time),
recod_name: "松开停止录制",
recod_color: "#fff",
rocud_icon: "../../../record/show.png"
});
var times = 0;
times = speck_time / 60 * 100;
console.log("time", times);
that.setData({
times: times
})
if (that.data.speck_time > 0 && that.data.speck_time <= 59) {
that.start();
} else {
clearInterval(that.data.setInter);
// 获取到结束时间
that.stop();
that.setData({
recuod_id: 2,
})
wx.showToast({
title: '录音最长60S哦！',
duration: 2000,
icon: "none"
})
}
}, 1000);
} else {
return;
}
}
})
},
//手指抬起
touchup: function () {
var that = this;
console.log("手指抬起了...", that.data.speck_time)
clearInterval(that.data.setInter);
// 获取到结束时间
that.stop();
if (that.data.speck_time > 3) {
//清除计时器 即清除setInter
clearInterval(that.data.setInter);
// 获取到结束时间
that.stop();
that.setData({
recuod_id: 2,
// isSpeaking: false,
recod_name: "长按开始录制",
recod_color: "#333",
rocud_icon: "../../../record/none.png",
})
} else {
//清除计时器 即清除setInter
clearInterval(that.data.setInter);
// 获取到结束时间
that.stop();
wx.showToast({
title: '请重新录制',
duration: 2000,
icon: "none"
})
that.setData({
recuod_id: 1,
// isSpeaking: false,
recod_name: "长按开始录制",
recod_color: "#333",
speck_time: "0",
rocud_icon: "../../../record/none.png",
})
}
},
// 重新录制
btn_show: function () {
this.setData({
recuod_id: 1,
speck_time: 0
})
wx.stopVoice();
},
//开始录音的时候
start: function () {
const options = {
duration: 60000, //指定录音的时长，单位 ms
sampleRate: 16000, //采样率
numberOfChannels: 1, //录音通道数
encodeBitRate: 96000, //编码码率
format: 'mp3', //音频格式，有效值 aac/mp3
frameSize: 50, //指定帧大小，单位 KB
}
//开始录音
recorderManager.start(options);
recorderManager.onStart(() => {
console.log('recorder start')
});
//错误回调
recorderManager.onError((res) => {
console.log(res);
})
},
//播放声音
btn_play: function () {
// innerAudioContext.autoplay = true
// innerAudioContext.src = this.tempFilePath,
// innerAudioContext.onPlay(() => {
// console.log('开始播放')
// })
// innerAudioContext.onError((res) => {
// console.log("播放失败",res.errMsg)
// console.log(res.errCode)
// })
innerAudioContext.src = this.tempFilePath,
innerAudioContext.play()
},
//停止录音
stop: function () {
recorderManager.stop();
recorderManager.onStop((res) => {
this.tempFilePath = res.tempFilePath;
this.data.formFile = res.tempFilePath;
this.data.formFileID = 1;
console.log('停止录音', res.tempFilePath)
const {
tempFilePath
} = res
})
},
// 保存录制
btn_save: function () {
var that = this;
wx.showToast({
title: '保存成功',
icon: "none",
duration: 2000
})
console.log(that.data.list.filePath);
},
// 预览
btn_sel: function () {
},
},
created: function () {
},
attached: function () {
},
ready: function () {
},
moved: function () {
},
detached: function () {
},
});//json
{
"usingComponents": {},
"component": true
}//WXSS
/* 最外层视图 */
.pages {
width: 100%;
height: 100%;
/* background-color: red; */
}
.icon-huanyihuan:before { content: "\e612"; }
/* 录音标题视图 */
.recod {
position: relative;
width: 100%;
height: 50rpx;
line-height: 50rpx;
background-color: #fff;
}
.recods{
position:relative;
width:100%;
height:68rpx;
line-height:68rpx;
background-color:#fff;
}
/* 录音标题 */
.recod_title {
position: absolute;
left: 30rpx;
font-size: 30rpx;
color: #333333;
}
/* 文本域视图 */
.text_view {
position: relative;
width: 100%;
text-align: center;
height: 300rpx;
padding-top: 20rpx;
padding-bottom: 10rpx;
/* background-color: yellow; */
}
.tews{
position: relative;
width: 670rpx;
height: 259rpx;
display: inline-block;
text-align: center;
padding: 20rpx 0rpx;
border: 1px solid #ccc;
background: linear-gradient(0deg, rgba(237, 237, 237, 1) 0%, rgba(255, 255, 255, 1) 100%);
box-shadow: 0px 12px 19px 5px rgba(127, 127, 127, 0.2);
border-radius: 15rpx;
}
/* 文本域 */
textarea {
width: 83%;
height: 259rpx;
display: inline-block;
text-align: left;
color: #333;
font-size: 30rpx;
}
.common_list{
/* position: fixed;
width: 100%;
height: 100rpx;
line-height: 100rpx;
background-color: red;
z-index: 99; */
}
/* 换一换 */
.ralpace {
width: 100%;
height: 80rpx;
position: relative;
line-height: 80rpx;
}
/* 换一换标题 */
.ralpace_title {
position: absolute;
right: 60rpx;
color: #666;
font-size: 30rpx;
}
.ralpac_img {
position:relative;
top:5rpx;
width:35rpx;
height:35rpx;
margin-right:18rpx;
}
/* 标题 */
.recod_titles {
position: absolute;
left: 30rpx;
font-size: 28rpx;
color: #666;
}
/* 录音IOCN */
.recd_icon {
width: 45rpx;
height: 36rpx;
position: relative;
top: 7rpx;
left: 20rpx;
}
/* 录制动画 */
.microphone {
position: fixed;
left: 250rpx;
bottom: 0;
height: 240rpx;
width: 240rpx;
border-radius: 20rpx;
margin: 50% auto;
background: #26a5ff;
}
/* 录音视图 */
.rocud_voices {
position: relative;
width: 100%;
text-align: center;
}
/* 录音 */
.rocud_mp3 {
width: 90%;
position: relative;
height: 481rpx;
/* bottom: 25rpx; */
display: inline-block;
border-radius: 15rpx;
border: 1px solid #ccc;
background: linear-gradient(0deg, rgba(237, 237, 237, 1) 0%, rgba(255, 255, 255, 1) 100%);
box-shadow: 0px 12px 19px 5px rgba(127, 127, 127, 0.2);
}
.rocud_mp3s{
width: 90%;
position: relative;
height: 481rpx;
display: inline-block;
border-radius: 15rpx;
border: 1px solid #ccc;
background: linear-gradient(0deg, rgba(237, 237, 237, 1) 0%, rgba(255, 255, 255, 1) 100%);
box-shadow: 0px 12px 19px 5px rgba(127, 127, 127, 0.2);
}
.record_style {
position: absolute;
bottom: 50rpx;
width: 100%;
height: 100rpx;
text-align: center;
}
/* 点击录制 */
.btn_style {
width: 80%;
height: 90rpx;
display: inline-block;
line-height: 90rpx;
border-radius: 10rpx;
font-weight: bold;
background-color: #EDEDED;
font-size: 30rpx;
border: 1rpx solid #666666;
}
/* 底部按钮视图 */
.nick_sub {
position: relative;
width: 100%;
height: 130rpx;
text-align: center;
line-height: 130rpx;
}
/* 重新录制 */
.btn_show{
width: 253rpx;
height: 77rpx;
display: inline-block;
text-align: center;
font-size: 30rpx;
line-height: 77rpx;
margin: 10rpx 20rpx;
color: #333;
background-color: #EDEDED;
border: 1rpx solid #666666 ;
border-radius: 10rpx;
}
/* 保存录制 */
.btn_save{
width: 23%;
height: 70rpx;
display: inline-block;
text-align: center;
font-size: 30rpx;
line-height: 70rpx;
margin: 10rpx 20rpx;
color: #fff;
background-color: #DDDCDD;
border: 1rpx solid #666666;
border-radius: 10rpx;
}
/* 下一步/完成 */
.nick_next {
width: 195rpx;
height: 65rpx;
line-height: 65rpx;
display: inline-block;
text-align: center;
font-size: 30rpx;
margin: 10rpx 20rpx;
color: #333333;
background-color: #E9E9E8;
border: 1rpx solid #CECECE;
border-radius: 10rpx;
}
/* 时间视图 */
.time_view {
position: absolute;
width: 100%;
height: 100rpx;
top: 46%;
line-height: 100rpx;
/* background-color: red; */
font-size: 30rpx;
}
/* 录音icon视图 */
.mp3_view {
position: absolute;
width: 100%;
height: 200rpx;
top: 10%;
text-align: center;
line-height: 200rpx;
/* background-color: #f5f5f5; */
}
/* icon */
.mp_icon {
width: 167rpx;
height: 167rpx;
border-radius: 50%;
margin-top: 30rpx;
display: inline-block;
}
/* 完成编辑视图 */
.nick_edit {
width: 195rpx;
height: 65rpx;
line-height: 65rpx;
display: inline-block;
text-align: center;
font-size: 30rpx;
color: #333;
margin: 10rpx 20rpx;
border: 1rpx solid #FF9000;
background-color: #FFBF00;
border-radius: 10rpx;
}
.item-style {
margin-top: 30rpx;
margin-bottom: 30rpx;
}
.text-style {
text-align: center;
}
.sound-style {
position: absolute;
width: 74rpx;
height: 150rpx;
margin-top: 45rpx;
margin-left: 83rpx;
}
/* 进度条视图 */
.proess_view {
position: relative;
width: 100%;
height: 140rpx;
text-align: center;
line-height: 140rpx;
top: 22%;
/* background-color: red; */
}
/* 进度条 */
progress {
width: 65%;
position: relative;
display: inline-block;
height: 30rpx;
}
/* 按钮 */
.submit{
position: absolute;
width: 100%;
height: 150rpx;
bottom: 0;
}
/* 当前时间 */
.muite_time{
position: relative;
width: 100%;
height: 50rpx;
text-align: center;
line-height: 50rpx;
font-size: 30rpx;
top: 25%;
/* background-color: red; */
}
/* 最大时间 */
.muite_view{
font-size: 30rpx;
position: relative;
left:8rpx;
bottom:3px;
}
/*列布局*/
.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;
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
