<html lang="en">
<head>
<meta charset="UTF-8">
<title>录音title>
<link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/npm/[email protected]/lib/index.css">
<script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js">script>
<script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js">script>
<script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js">script>
<script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js">script>
<script src="https://cdn.suoluomei.com/common/js2.0/npm/[email protected]/lib/vant.min.js">script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
head>
<style>
html {
background: #fff;
}
.foot_record_box {
position: fixed;
bottom: 0;
width: 100%;
}
.foot_top {
position: relative;
display: flex;
justify-content: center;
text-align: center;
height: 50px;
line-height: 50px;
background: #fff;
border-top: 1px #eee solid;
font-weight: 600;
}
.foot_record {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 12rem;
background: #eee;
}
.record_bnt {
width: 50px;
height: 50px;
border-radius: 50%;
background: #0084bf;
border: 4px solid #fff;
}
.record_bnt_ing {
text-align: center;
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50%;
border: 2px solid #fff;
background: #fff;
}
.record_play {
position: absolute;
top: 20%;
left: 10%;
width: 2.5rem;
height: 2.5rem;
line-height: 2.5rem;
text-align: center;
border-radius: 50%;
border: 2px #fff solid;
background: #eee;
color: #0084bf;
}
.record_anew {
position: absolute;
top: 20%;
right: 10%;
width: 2.5rem;
height: 2.5rem;
line-height: 2.5rem;
text-align: center;
border-radius: 50%;
border: 2px #fff solid;
background: #eee;
color: #0084bf;
}
.commer {
background: #fff;
padding: 10px;
margin: 10px;
box-shadow: 1px 1px 10px 9px #eee;
}
.top {
padding: 1rem 1rem 0 1rem;
box-sizing: border-box;
}
.time {
position: absolute;
right: 5px;
top: 2px;
}
.timeNum {
color: #0084bf;
font-weight: 600;
}
style>
<body>
<div id="Vue">
<div class="top">录制小tipsdiv>
<div class="commer">
在一分钟内，你可以简明扼要的介绍你的公司职位及能力如，
我是某某公司的销售经理某某某有多年的某行业从事背景擅长分析客户需求，
快速为客户解决问题br>温馨提示:在安静的环境内录音效果更好哦
div>
<div class="foot_record_box">
<div class="foot_top">
<span>我的语言span>
<div class="time"><span class="timeNum">{{time}}span>/<span>01:00span>div>
div>
<div class="foot_record">
<div class="record_play" @click='play' v-if="showPlay">试听div>
<div class="record_bnt" @click='recording' v-if="record">div>
<div class="record_bnt_ing" @click='recording' v-else>||div>
<div style="margin-top: 1rem;"> {{record?'点击开始录音':'录音中...'}}div>
<div class="record_anew" @click='upload' v-if='showPlay'>保存div>
div>
div>
div>
body>
<script>
wx.config({
debug: false,
appId: '{$signPackage["appId"]}',
timestamp: '',
nonceStr: '',
signature: '',
jsApiList: ['startRecord', 'stopRecord', 'uploadVoice', 'playVoice', 'downloadVoice', 'stopVoice']
});
new Vue({
el: "#Vue",
data: {
record: true,
localId: '',
showPlay: false,
time: '00:00',
timer: '',
num: ''
},
methods: {
recording() {
let that = this
let num = 0
if (this.localId != '') {
wx.stopVoice({
localId: this.localId
});
}
if (this.record) {
wx.startRecord();
that.timer = setInterval(function () {
num = num + 1
if (num < 10) {
that.time = '00:0' + num
} else if (num > 9 && num < 60) {
that.time = '00:' + num
} else {
that.time = '01:00'
that.record = !that.record
clearInterval(that.timer)
alert('超时了，兄弟，重新录吧')
}
that.num = num
}, 1000)
that.showPlay = false
} else {
wx.stopRecord({
success: function (res) {
clearInterval(that.timer)
that.localId = res.localId;
that.showPlay = true
}
});
}
this.record = !this.record
},
play() {
wx.playVoice({
localId: this.localId
});
},
upload() {
console.log('hahhhahah')
let that = this
wx.uploadVoice({
localId: this.localId,
isShowProgressTips: 1,
success: function (res) {
console.log(res)
var serverId = res.serverId;
that.getWxRecordDataUrl(serverId, 4)
}
})
},
getWxRecordDataUrl(serverId, type) {
let that = this
$.ajax({
type: "post",
async: false,
url: "__MODULE__/Hemiao/getWxRecordDataUrl",
data: { media_id: serverId, file_type: type },
dataType: "json",
success: function (res) {
let url = res.data.url
that.uploadUrl(url)
},
});
},
uploadUrl(url) {
let data = {
card_id: localStorage.getItem('jtcard_id'),
voice: url
}
$.ajax({
type: "post",
async: false,
url: "https://malltest.paparela.cn/meihuzhuanjia/index.php/Api/CommonApi/index/",
data: {
key: '233d4cad34c34d343785s34dw3er3ds3234esd4',
type: 'saveVoiceTeacherCard',
data
},
dataType: "json",
success: function (res) {
alert(res.msg)
},
});
}
},
created() {
setTimeout(function () {
wx.startRecord({
success: function () {
wx.stopRecord()
},
cancel: function () {
}
});
}, 2000)
}
})
script>
html>
