uniProject/pages/newEnglish/components/readContent2.vue

<template>
	<view>
		<selectTypesVue activeSelect="3"></selectTypesVue>
		<view class="words-xuan-box">
			<!-- 单词区 -->
			<view class="show-words-box"> {{data.name}} </view>
			<!--  音标区  -->
			<view class="yb-play-box">
				<text>{{data.yinbiao}}</text>
				<icon class="yb-play-btn"></icon>
				<icon class="yb-playing-btn" v-if="false"></icon>
			</view>

			<view style="text-align: center;">
				<text v-if="data.jianyi&&data.jianyi.length>0" v-for="(item,index) in data.jianyi" :key="index">
					{{item}}
				</text>
			</view>

			<view>
				<view class="audio-play-btn"></view>
				<view class="audio-playing-btn" v-if="false"></view>
			</view>
			<view class="container">
				<view class="status">{{ recordingStatus }}</view>
				<view class="duration" v-if="isRecording">录音时长: {{ Math.floor(duration) }}秒</view>

				<button class="record-btn" :class="{ recording: isRecording, disabled: isPlaying }"
					@touchstart="handleTouchStart" @touchend="handleTouchEnd" @touchcancel="handleTouchEnd"
					@mousedown="handleMouseDown" @mouseup="handleMouseUp" @mouseleave="handleMouseLeave"
					:disabled="isPlaying">
					{{ isRecording ? '松开结束' : '按住录音' }}
					<view v-if="isPlaying" class="disabled-mask">播放中不可录音</view>
				</button>

				<button class="play-btn" :class="{ disabled: isRecording || !voicePath }" @click="playVoice"
					:disabled="isRecording || !voicePath">
					{{ isPlaying ? '播放中...' : '播放录音' }}
					<view v-if="isRecording" class="disabled-mask">录音中不可播放</view>
				</button>

				<view class="tips">提示：长按按钮录音，松开结束（需3秒以上）</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import selectTypesVue from './selectTypes.vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		reactive,
		ref,
		onMounted,
		onUnmounted
	} from 'vue';

	const props = defineProps({
		activeWord: {
			type: Object,
		},
		pageData: {
			type: Object,
		},
		activeWords: {
			type: Array
		},
	})

	let tabFlag = ref(1)
	const audioInfo = ref(null)
	const data = reactive({
		name: '',
		yinbiao: '',
		jianyi: []
	})

	// 录音相关状态
	const isRecording = ref(false)
	const isPlaying = ref(false)
	const voicePath = ref('')
	const duration = ref(0)
	const timer = ref(null)
	const recordingStatus = ref('准备就绪')
	const startTime = ref(0)
	const longPressTimer = ref(null) // 长按计时器
	const MIN_RECORD_TIME = 3 // 最小录音时间3秒

	// 获取录音和音频播放管理器
	const recorderManager = uni.getRecorderManager()
	const innerAudioContext = uni.createInnerAudioContext()

	// 初始化录音器
	const initRecorder = () => {
		recorderManager.onStart(() => {
			console.log('recorder start')
			isRecording.value = true
			recordingStatus.value = '录音中...'
			startTime.value = Date.now()
			startTimer()
		})

		recorderManager.onStop((res) => {
			console.log('recorder stop', res)
			const recordTime = (Date.now() - startTime.value) / 1000

			stopTimer()
			isRecording.value = false

			if (recordTime < MIN_RECORD_TIME) {
				recordingStatus.value = '录音时间太短（需3秒以上）'
				uni.showToast({
					title: '录音时间太短，需3秒以上',
					icon: 'none'
				})
				return
			}

			if (res.tempFilePath) {
				voicePath.value = res.tempFilePath
				recordingStatus.value = `录音完成，时长: ${Math.floor(recordTime)}秒`
				uni.showToast({
					title: '录音成功',
					icon: 'success'
				})
			} else {
				recordingStatus.value = '录音失败'
				uni.showToast({
					title: '录音失败',
					icon: 'none'
				})
			}
		})

		recorderManager.onError((res) => {
			console.error('recorder error', res)
			stopTimer()
			isRecording.value = false
			recordingStatus.value = `录音错误: ${res.errMsg}`
			uni.showToast({
				title: `录音出错: ${res.errMsg}`,
				icon: 'none'
			})
		})

		innerAudioContext.onPlay(() => {
			isPlaying.value = true
			recordingStatus.value = '播放中...'
		})

		innerAudioContext.onEnded(() => {
			isPlaying.value = false
			recordingStatus.value = '播放完成'
		})

		innerAudioContext.onError((res) => {
			isPlaying.value = false
			console.error('play error', res)
			uni.showToast({
				title: '播放失败',
				icon: 'none'
			})
		})
	}

	// 检查权限
	const checkPermission = () => {
		uni.authorize({
			scope: 'scope.record',
			success: () => {
				console.log('已授权录音权限')
			},
			fail: (err) => {
				console.log('未授权录音权限', err)
				uni.showModal({
					title: '提示',
					content: '需要录音权限才能使用此功能',
					confirmText: '去设置',
					success: (res) => {
						if (res.confirm) {
							uni.openSetting()
						}
					}
				})
			}
		})
	}

	// 处理触摸开始（移动端）
	const handleTouchStart = (e) => {
		e.preventDefault()
		if (isPlaying.value) return

		// 设置长按计时器，500ms后才开始录音
		longPressTimer.value = setTimeout(() => {
			startRecording()
		}, 400)
	}

	// 处理触摸结束（移动端）
	const handleTouchEnd = (e) => {
		e.preventDefault()
		clearTimeout(longPressTimer.value)
		if (isRecording.value) {
			endRecording()
		}
	}

	// 处理触摸取消（移动端，如被系统中断）
	const handleTouchCancel = (e) => {
		handleTouchEnd(e) // 与touchend同样处理
	}
	// 处理鼠标按下（桌面端）
	const handleMouseDown = (e) => {
		e.preventDefault()
		if (isPlaying.value) return

		longPressTimer.value = setTimeout(() => {
			startRecording()
		}, 500)
	}

	// 处理鼠标抬起（桌面端）
	const handleMouseUp = (e) => {
		e.preventDefault()
		clearTimeout(longPressTimer.value)
		if (isRecording.value) {
			endRecording()
		}
	}

	// 处理鼠标移出按钮区域
	const handleMouseLeave = (e) => {
		clearTimeout(longPressTimer.value)
		if (isRecording.value) {
			endRecording()
		}
	}

	// 开始录音
	const startRecording = () => {
		if (isRecording.value) return

		console.log('开始录音')
		recordingStatus.value = '准备录音...'
		isRecording.value = true // 提前设置状态，避免延迟
		startTime.value = Date.now()
		startTimer()

		const options = {
			duration: 60000,
			sampleRate: 44100,
			numberOfChannels: 1,
			encodeBitRate: 192000,
			format: uni.getSystemInfoSync().platform === 'android' ? 'amr' : 'mp3',
			frameSize: 50
		}

		recorderManager.start(options)
	}

	// 结束录音
	const endRecording = () => {
		if (!isRecording.value) return

		console.log('停止录音')
		isRecording.value = false
		stopTimer()
		recorderManager.stop()
	}
	// 播放录音
	const playVoice = () => {
		if (isRecording.value || !voicePath.value) return

		console.log('播放录音:', voicePath.value)
		innerAudioContext.src = voicePath.value
		innerAudioContext.play()
	}

	// 计时器相关
	const startTimer = () => {
		duration.value = 0
		timer.value = setInterval(() => {
			duration.value += 1 // 每秒增加1，而不是0.1
		}, 1000) // 间隔改为1000ms
	}

	const stopTimer = () => {
		if (timer.value) {
			clearInterval(timer.value)
			timer.value = null
		}
		duration.value = 0
	}

	// 初始化单词数据
	const initItem = () => {
		data.name = props.activeWord.name;
		data.yinbiao = props.activeWord.yinbiao;
		data.jianyi = props.activeWord.jianyi;
	}

	onMounted(() => {
		initRecorder()
		checkPermission()
		initItem()
	})

	onUnmounted(() => {
		stopTimer()
		clearTimeout(longPressTimer.value)
		recorderManager.stop()
		innerAudioContext.stop()
	})
</script>

<style>
	.container {
		padding: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.status {
		margin: 20px 0;
		color: #666;
		font-size: 16px;
		min-height: 24px;
	}
	
	.duration {
		margin-bottom: 20px;
		color: #333;
		font-weight: bold;
	}
	
	.record-btn {
		background-color: #4CAF50;
		color: white;
		margin: 10px 0;
		width: 80%;
		padding: 15px 0;
		border: none;
		border-radius: 5px;
		position: relative;
	}
	
	.record-btn.recording {
		background-color: #F44336;
	}
	
	.play-btn {
		background-color: #2196F3;
		color: white;
		margin: 10px 0;
		width: 80%;
		padding: 15px 0;
		border: none;
		border-radius: 5px;
	}
	
	.disabled {
		opacity: 0.7;
		position: relative;
	}
	
	.disabled-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
	}
	
	.tips {
		margin-top: 20px;
		color: #999;
		font-size: 12px;
		text-align: center;
	}
</style>