0b2/peiwan-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

项目初始化

Browse Source
This commit is contained in:
jerry
2025-01-21 01:46:34 +08:00
parent 364021b042
commit 48153e7761
962 changed files with 172070 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
pages/clerk/detail/components/voicePlay.vue Normal file
View File

@@ -0,0 +1,183 @@
<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>