//WXML
00:存储路径:{{item.filePath}}存储时间:{{item.createTime}}音频大小:{{item.size}}KB{{recod_name}}{{speck_time}}S存储路径:{{item.filePath}}存储时间:{{item.createTime}}音频大小:{{item.size}}KB重新录制播放录音
//JS
const recorderManager = wx.getRecorderManager()
const innerAudioContext = wx.createInnerAudioContext()
var app=new getApp();
Component({properties: {myProperty: {type: String,value: '',observer: function () { }},},data: {// 录制默认idrecuod_id: 1,// 录制时间times: 0,formFile:[],formFileID:2,j: 1, //帧动画初始图片 // isSpeaking: false,//是否正在说话 voices: [], //音频数组 // 默认按住录音recod_name: "长按开始录制",// 默认初始化录制iconrocud_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']) {//第二次才成功授权//将计时器赋值给setInterthat.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) {//清除计时器 即清除setInterclearInterval(that.data.setInter);// 获取到结束时间that.stop();that.setData({recuod_id: 2,// isSpeaking: false,recod_name: "长按开始录制",recod_color: "#333",rocud_icon: "../../../record/none.png",})} else {//清除计时器 即清除setInterclearInterval(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, //指定录音的时长，单位 mssampleRate: 16000, //采样率numberOfChannels: 1, //录音通道数encodeBitRate: 96000, //编码码率format: 'mp3', //音频格式，有效值 aac/mp3frameSize: 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;
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
