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