建材商城系统20241014
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

189 lines
3.9 KiB

<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>