<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 个回复