index.vue
817 Bytes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<template lang="pug">
.play-audio
audio(ref="audio" :src="mp3")
</template>
<script>
import mp3 from '@/assets/ding.mp3'
export default {
name: 'PlayAudio',
props: {
mp3: {
type: [String, Blob, null],
default: mp3
}
},
data() {
return {
audioStatus: 'pause',
audioDuration: 0
}
},
methods: {
/**
* 播放提示音
* */
playMusic() {
if (this.audioStatus === 'pause') {
this.$refs.audio.play()
this.audioStatus = 'play'
} else {
this.$refs.audio.pause()
this.$refs.audio.currentTime = 0
this.audioStatus = 'pause'
}
}
},
mounted() {
this.$refs.audio.addEventListener('ended', () => {
this.$refs.audio.pause()
this.audioStatus = 'pause'
})
}
}
</script>