ios vue3版本 长按 录音并且赋值音频,
- 发布:2022-10-20 10:32
- 更新:2022-11-14 18:02
- 阅读:707
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: windows11
HBuilderX类型: 正式
HBuilderX版本号: 3.6.4
手机系统: iOS
手机系统版本号: iOS 16
手机厂商: 苹果
手机机型: iphneX
页面类型: vue
vue版本: vue3
打包方式: 云端
项目创建方式: HBuilderX
操作步骤:
预期结果:
录音达到正常
录音达到正常
实际结果:
录音一秒但是 赋值音频为空 时间显示8秒
录音一秒但是 赋值音频为空 时间显示8秒
7***@qq.com (作者) - 沉浮
文件上传不上去,我就是新建一个可视化 vue3项目 用的录音测试代码。
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title" @click="playVoice">播放</text>
</view>
<view class="">
1111111111111111
</view>
<view class="" @longpress="startRecord" @touchend="endRecord">
长按长按长按长按长按长按
</view>
</view>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { Ref } from 'vue'
// import { useCounterStore } from '@/stores/index';
import { onLoad, onShow,onPullDownRefresh,onReachBottom } from '@dcloudio/uni-app';
// const counter :any= useCounterStore();
const recorderManager:any = uni.getRecorderManager();
const innerAudioContext:any = uni.createInnerAudioContext();
let contactWay:Ref<string>=ref("")//判断当前是电话/文字/录音
let textValue:Ref<string>=ref("")//表单输入数据
let audioAnimation:Ref<boolean>=ref(false)//点击音频动画动画效果开关
let voiceNum:Ref<string|number>=ref(0) //录音时长
let voiceAndText:any=reactive({data:[]})//语音跟文字的人员列表
let voicePath:Ref<string>=ref("") //音频地址
onLoad(()=>{
recorderManager.onStop((res:any)=> {
console.log(res.tempFilePath);
voicePath.value = res.tempFilePath;
innerAudioContext.src = voicePath.value;
console.log(innerAudioContext.src, voicePath.value);
});
recorderManager.onError((e:any) => {console.log(e)})
innerAudioContext.onCanplay(() => {
//赋值录音时长
innerAudioContext.src = voicePath.value;
innerAudioContext.duration;
console.log(innerAudioContext.duration)
voiceNum.value = Math.ceil(innerAudioContext.duration);
});
})
const playVoice=()=>{
//播放录音
if (voicePath.value) {
if (innerAudioContext.paused == true) {
innerAudioContext.src = voicePath.value;
innerAudioContext.play();
audioAnimation.value = true;
} else {
innerAudioContext.stop();
audioAnimation.value = false;
}
} else {
// this.$u.toast('请按住说话');
}
innerAudioContext.onPause(() => {
audioAnimation.value = false;
});
innerAudioContext.onEnded(() => {
audioAnimation.value = false;
});
innerAudioContext.onStop(() => {
audioAnimation.value = false;
});
}
const addRecipient=()=>{
}
const changeWay=(item:string)=>{
contactWay.value=item
}
let promopt:Ref<boolean>=ref(false) //点击录音动画效果开关
const startRecord=()=> {
//生成语音
console.log(1)
promopt.value = true;
recorderManager.start()
}
const endRecord=()=> {
//结束音频
promopt.value = false;
recorderManager.stop();
}
// const recorderManager = uni.getRecorderManager();
// const innerAudioContext = uni.createInnerAudioContext();
// innerAudioContext.autoplay = true;
// export default {
// data() {
// return {
// text: 'uni-app',
// voicePath: ''
// }
// },
// onLoad() {
// let self = this;
// recorderManager.onStop(function (res) {
// console.log('recorder stop' + JSON.stringify(res));
// self.voicePath = res.tempFilePath;
// innerAudioContext.src = self.voicePath;
// });
// innerAudioContext.onCanplay(() => {
// //赋值录音时长
// innerAudioContext.src = self.voicePath;
// innerAudioContext.duration;
// console.log(innerAudioContext.duration)
// self.voiceNum = Math.ceil(innerAudioContext.duration);
// console.log(self.voiceNum)
// });
// },
// methods: {
// startRecord() {
// console.log('开始录音');
// recorderManager.start();
// },
// endRecord() {
// console.log('录音结束');
// recorderManager.stop();
// },
// playVoice() {
// console.log('播放录音');
// if (this.voicePath) {
// innerAudioContext.src = this.voicePath;
// innerAudioContext.play();
// }
// }
// }
// }
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
7***@qq.com (作者)
文件上传不上了,我就是新建一个可视化 创建的vue3项目 用的录音测试代码。 麻烦您把 下面的代码复制在一个新建项目就可以了
2022-10-20 14:46
7***@qq.com (作者)
测试工程上传了 麻烦看下,是什么问题
2022-10-20 20:11
7***@qq.com (作者)
能麻烦给下回复吗。是写的有问题还是?
2022-11-04 09:38