<template>
<view class="stray">
<view class="seleBox">
<picker @change="seleMy" :value="indexMy" :range="arrayMy">
<view class="pickerView">{{textMy}}</view>
</picker>
<view class="exchange">
<image src="../../static/exchange.png" mode=""></image>
</view>
<picker @change="seleFy" :value="indexFy" :range="arrayFy">
<view class="pickerView">{{textFy}}</view>
</picker>
</view>
<view class="strayBox">请按住语音键说话进行翻译</view>
<view class="popUp" v-if="isShow">
<image src="@/static/luyin.gif" alt=""></image>
</view>
<view class="btn" @touchend="touchup" @longpress="touchdown">请按住说话</view>
</view>
</template>
<script>
const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
// const recorderManager = plus.audio.getRecorder()
export default {
data() {
return {
voicePath: '',
isShow: false,
// timeStamp: (new Date().getTime() / 1000).toFixed(0),
// appid: '20220713001271579',
// key: 'uwpQZFuufaLqwtd0xUu9',
adioFileData: '',
arrayMy: ['中文', '英文'],
indexMy: 0,
textMy: '语言',
arrayFy: ['英语', '德语', '日语', '法语', '阿拉伯语'],
indexFy: 0,
textFy: '语种'
}
},
onLoad() {
let self = this;
console.log(navigator)
recorderManager.onStop(function(res) {
self.voicePath = res.tempFilePath;
innerAudioContext.src = self.voicePath
innerAudioContext.play()
});
},
methods: {
seleMy(e) {
this.indexMy = e.target.value
this.textMy = this.arrayMy[e.target.value]
},
seleFy(e) {
this.indexFy = e.target.value
this.textFy = this.arrayFy[e.target.value]
},
touchdown() {
this.isShow = true
recorderManager.start()
},
touchup() {
this.isShow = false
recorderManager.stop()
},
},
}
</script>
<style lang="scss">
.seleBox {
display: flex;
align-items: center;
padding: 20rpx 20rpx 0;
.pickerView {
background-color: #c0f8fd;
padding: 5rpx 15rpx;
color: #666666;
border-radius: 10rpx;
}
.exchange {
width: 40rpx;
height: 40rpx;
margin: 0 20rpx;
image {
width: 100%;
height: 100%;
}
}
}
.popUp {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
position: fixed;
top: 25%;
image {
width: 300rpx;
height: 300rpx;
}
}
.btn:active {
background-color: #3c98f9;
}
.btn {
background-color: #1F62F9;
color: #fff;
margin: 30rpx 20%;
text-align: center;
padding: 15rpx;
font-size: 26rpx;
border-radius: 50rpx;
position: fixed;
bottom: 0;
width: 60%;
z-index: 999;
}
.strayBox {
margin: 20rpx;
background-color: #f9f9f9;
padding: 20rpx 30rpx;
min-height: 200rpx;
color: #999;
border-radius: 15rpx;
}
</style>
0 个回复