building-materials-shop-uniapp-241014/components/VoicePlayer.vue

<template>
	<view class="voice-content">
		<view class="voice-item">
			<view class="voice-icon">
				<uv-icon name="mic" size="40rpx" color="#D03F25"></uv-icon>
			</view>
			<view class="voice-info">
				<text class="voice-desc">通过语音识别下单</text>
				<text class="voice-tip">点击播放语音内容</text>
			</view>
			<view class="voice-play" @click="playVoice">
				<uv-icon :name="isPlaying ? 'pause-circle-fill' : 'play-circle-fill'" size="50rpx" color="#D03F25"></uv-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'VoicePlayer',
		props: {
			voiceUrl: {
				type: String,
				default: ''
			},
			autoPlay: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				innerAudioContext: null, // 音频播放器
				isPlaying: false // 是否正在播放语音
			};
		},
		mounted() {
			this.initAudioPlayer();
		},
		beforeDestroy() {
			this.destroyAudioPlayer();
		},
		methods: {
			// 初始化音频播放器
			initAudioPlayer() {
				this.innerAudioContext = uni.createInnerAudioContext();
				
				// 监听播放结束事件
				this.innerAudioContext.onEnded(() => {
					console.log('播放结束');
					this.isPlaying = false;
					this.$emit('playEnded');
				});
				
				// 监听播放开始事件
				this.innerAudioContext.onPlay(() => {
					console.log('开始播放');
					this.isPlaying = true;
					this.$emit('playStarted');
				});
				
				// 监听播放暂停事件
				this.innerAudioContext.onPause(() => {
					console.log('播放暂停');
					this.isPlaying = false;
					this.$emit('playPaused');
				});
				
				// 监听播放停止事件
				this.innerAudioContext.onStop(() => {
					console.log('播放停止');
					this.isPlaying = false;
					this.$emit('playStopped');
				});
				
				// 监听播放错误事件
				this.innerAudioContext.onError((err) => {
					console.error('播放错误', err);
					uni.showToast({
						title: '播放失败',
						icon: 'none'
					});
					this.isPlaying = false;
					this.$emit('playError', err);
				});
			},
			
			// 销毁音频播放器
			destroyAudioPlayer() {
				if (this.innerAudioContext) {
					this.innerAudioContext.destroy();
					this.innerAudioContext = null;
				}
			},
			
			// 播放语音
			playVoice() {
				if (!this.voiceUrl) {
					uni.showToast({
						title: '语音文件不存在',
						icon: 'none'
					});
					return;
				}
				
				if (this.isPlaying) {
					// 如果正在播放，则停止播放
					this.innerAudioContext.stop();
					this.isPlaying = false;
					return;
				}
				
				// 设置音频源并播放
				this.innerAudioContext.src = this.voiceUrl;
				this.innerAudioContext.play();
				
				uni.showToast({
					title: '正在播放语音',
					icon: 'none'
				});
			},
			
			// 停止播放
			stopPlay() {
				if (this.innerAudioContext && this.isPlaying) {
					this.innerAudioContext.stop();
				}
			},
			
			// 暂停播放
			pausePlay() {
				if (this.innerAudioContext && this.isPlaying) {
					this.innerAudioContext.pause();
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.voice-content {
		padding: 30rpx;
		
		.voice-item {
			display: flex;
			align-items: center;
			padding: 30rpx;
			background-color: #f9f9f9;
			border-radius: 12rpx;
			
			.voice-icon {
				width: 80rpx;
				height: 80rpx;
				background-color: rgba(208, 63, 37, 0.1);
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 30rpx;
			}
			
			.voice-info {
				flex: 1;
				
				.voice-desc {
					display: block;
					font-size: 30rpx;
					color: #333;
					margin-bottom: 8rpx;
				}
				
				.voice-tip {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.voice-play {
				width: 80rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: rgba(208, 63, 37, 0.1);
				border-radius: 40rpx;
			}
		}
	}
</style>