peiwan-uniapp/pages/clerk/detail/components/voicePlay.vue

<template>
	<view class="voice-btn" @click="playBtn" :class="play?'audioplaying':''">
		<img class="play-btn" src="@/static/images/audio.png"></img>
		<view class="audio-box">
			<view class="audio1 wave1"></view>
			<view class="audio2 wave2"></view>
			<view class="audio3 wave3"></view>
			<view class="audio2 wave2"></view>
			<view class="audio1 wave1"></view>
			<view class="audio2 wave2"></view>
			<view class="audio3 wave3"></view>
			<view class="audio2 wave2"></view>
			<view class="audio1 wave1"></view>
			<view class="audio2 wave2"></view>
			<view class="audio3 wave3"></view>
			<view class="audio2 wave2"></view>
		</view>
		<view>{{sec}}"</view>
	</view>
</template>
<script>
const audio = uni.createInnerAudioContext();
export default {
	emits: ['playAudio'],
	props: {
		src: {
			type: String,
			default: '' 
		},
		sec: {
			type: Number,
			default: 0
		},
	},
	data() {
		return {
			play: false,
		};
	},
	methods: {
		playBtn() {
			if(this.play){
				this.play = false;
				audio.stop();
				return;
			}
			this.play = true;
			//语音自然播放结束
			audio.onEnded((res) => {
				this.play = false;
			});
			audio.src = this.src;
			audio.play();
		},
	}
};
</script>
<style lang="scss" scoped>
view{
	box-sizing: border-box;
}
.voice-btn {
	background-color: #3cc9a4;
	width: 140rpx;
	border-radius: 20px;
	padding: 10rpx 10rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;
	font-size: 20rpx;
}

.play-btn {
	width: 24rpx;
	height: 24rpx;
}

.audio-box {
	height: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.audio1{
    margin-right: 2rpx;
	width: 1px;
	height: 33.3%;
	border-radius: 50px;
	background-color: #fff;
}

.audio2{
	margin-right: 2rpx;
	width: 1px;
	height: 66.6%;
	border-radius: 50px;
	background-color: #fff;
}

.audio3{
	margin-right: 2rpx;
	width: 1px;
	height: 100%;
	border-radius: 50px;
	background-color: #fff;
}

.audioplaying .wave1 {
	animation: wave1 1s linear 0s infinite;
}

.audioplaying .wave2 {
	animation: wave2 1s linear 0s infinite;
}

.audioplaying .wave3 {
	animation: wave3 1s linear 0s infinite;
}

@keyframes wave1{
  0% {
      width: 1px;
      height: 33%;
  }
  25% {
      width: 1px;
      height: 66%;
  }
  50% {
      width: 1px;
      height: 100%;
  }
  75% {
      width: 1px;
      height: 66%;
  }
  100% {
      width: 1px;
      height: 33%;
  }
}

@keyframes wave2{
  0% {
      width: 1px;
      height: 66%;
  }
  25% {
      width: 1px;
      height: 33%;
  }
  50% {
      width: 1px;
      height: 66%;
  }
  75% {
      width: 1px;
      height: 100%;
  }
  100% {
      width: 1px;
      height: 66%;
  }
}

@keyframes wave3{
  0% {
      width: 1px;
      height: 100%;
  }
  50% {
      width: 1px;
      height: 33%;
  }
  100% {
      width: 1px;
      height: 100%;
  }
}

</style>