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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
| <template>
| <div class="mini-audio" v-if="path">
| <audio controls controlslist="noplaybackrate nodownload" :src="path" class="aduioPlayer"></audio>
| <svg
| @click="closeMiniAudio"
| t="1717642737563"
| class="icon close-btn"
| viewBox="0 0 1024 1024"
| version="1.1"
| xmlns="http://www.w3.org/2000/svg"
| p-id="2426"
| width="24"
| height="24"
| xmlns:xlink="http://www.w3.org/1999/xlink"
| >
| <path
| d="M512 0C794.769794 0 1024 229.805588 1024 512 1024 794.769794 794.194408 1024 512 1024 229.230208 1024 0 794.194408 0 512 0 229.230208 229.805588 0 512 0ZM512 984.615385C772.648448 984.615385 984.615385 772.81286 984.615385 512 984.615385 251.351552 772.81286 39.384615 512 39.384615 251.351552 39.384615 39.384615 251.18714 39.384615 512 39.384615 772.648448 251.18714 984.615385 512 984.615385ZM512 539.849129 358.829792 693.019336C351.139468 700.70966 338.670988 700.70966 330.980664 693.019336 323.29034 685.329012 323.29034 672.860532 330.980664 665.170208L484.150871 512 330.980664 358.829792C323.29034 351.139468 323.29034 338.670988 330.980664 330.980664 338.670988 323.29034 351.139468 323.29034 358.829792 330.980664L512 484.150871 665.170208 330.980664C672.860532 323.29034 685.329012 323.29034 693.019336 330.980664 700.70966 338.670988 700.70966 351.139468 693.019336 358.829792L539.849129 512 693.019336 665.170208C700.70966 672.860532 700.70966 685.329012 693.019336 693.019336 685.329012 700.70966 672.860532 700.70966 665.170208 693.019336L512 539.849129Z"
|
| p-id="2427"
| ></path>
| </svg>
| </div>
| </template>
|
| <script>
| export default {
| name: "mini-audio",
| props: {
| path: {
| type: String,
| },
| currentTime: {
| type: Number,
| },
| },
| watch: {
| path: {
| handler(newVal) {
| if (newVal) {
| setImmediate(() => {
| this.play();
| }, 200);
| }
| },
| },
| },
| methods: {
| play() {
| const player = (this.container ? this.container : document).querySelector(
| ".aduioPlayer"
| );
| if (player) {
| player.currentTime = this.currentTime;
| player.play();
| }
| },
| getVideoPlayer() {
| let obj = null;
| const player = (this.container ? this.container : document).querySelector(
| ".aduioPlayer"
| );
| if (player) {
| obj = {
| currentTime: player.currentTime,
| paused: player.paused,
| };
| }
| return obj;
| },
| closeMiniAudio() {
| this.$emit("closeMiniAudio");
| },
| },
| };
| </script>
|
| <style lang="less" scoped>
| .mini-audio {
| position: fixed;
| right: 40px;
| bottom: 100px;
| display: flex;
| align-items: center;
| background-color: #f1f3f4;
| border-radius: 30px;
| padding: 0 10px 0 0px;
| }
| .close-btn {
| cursor: pointer;
| fill:#868383;
| &:hover {
| fill: #d1cbcb;
| }
| }
| </style>
|
|
