|
|
@@ -1,6 +1,17 @@
|
|
1
|
1
|
<template>
|
|
2
|
|
- <div class="bg-music" :class="{ ['icon-playing']: playing }" @click="handleClick" v-show="show">
|
|
3
|
|
- <audio :src="url" ref="audioRef" loop @loadedmetadata="show = true" @play="handlePlay"></audio>
|
|
|
2
|
+ <div
|
|
|
3
|
+ v-show="show"
|
|
|
4
|
+ class="bg-music"
|
|
|
5
|
+ :class="{ ['icon-playing']: playing }"
|
|
|
6
|
+ @click="handleClick"
|
|
|
7
|
+ >
|
|
|
8
|
+ <audio
|
|
|
9
|
+ ref="audioRef"
|
|
|
10
|
+ :src="url"
|
|
|
11
|
+ loop
|
|
|
12
|
+ @loadedmetadata="show = true"
|
|
|
13
|
+ @play="handlePlay"
|
|
|
14
|
+ />
|
|
4
|
15
|
</div>
|
|
5
|
16
|
</template>
|
|
6
|
17
|
|
|
|
@@ -18,7 +29,7 @@ export default {
|
|
18
|
29
|
},
|
|
19
|
30
|
mounted() {
|
|
20
|
31
|
document.body.addEventListener('click', this.handleClick)
|
|
21
|
|
-
|
|
|
32
|
+ this.$refs.audioRef.volume = 0.3
|
|
22
|
33
|
this.$nextTick(() => {
|
|
23
|
34
|
this.handleIOSAudio()
|
|
24
|
35
|
})
|
|
|
@@ -64,12 +75,12 @@ export default {
|
|
64
|
75
|
|
|
65
|
76
|
width: 2em;
|
|
66
|
77
|
height: 2em;
|
|
67
|
|
- background-image: url('~@/assets/ButtonImage/play.png');
|
|
|
78
|
+ background-image: url("~@/assets/ButtonImage/play.png");
|
|
68
|
79
|
background-repeat: no-repeat;
|
|
69
|
80
|
background-size: 100% 100%;
|
|
70
|
81
|
|
|
71
|
82
|
&.icon-playing {
|
|
72
|
|
- background-image: url('~@/assets/ButtonImage/paused.png');
|
|
|
83
|
+ background-image: url("~@/assets/ButtonImage/paused.png");
|
|
73
|
84
|
animation: musicrotate 3s linear infinite;
|
|
74
|
85
|
}
|
|
75
|
86
|
|
