|
@@ -1,7 +1,6 @@
|
1
|
1
|
<template>
|
2
|
2
|
<div class="musicbox" @click="troggle">
|
3
|
3
|
<img :class="playing" :src="icons[theme][playing]" alt="">
|
4
|
|
- <audio ref="player" :src="url" preload loop="loop"></audio>
|
5
|
4
|
</div>
|
6
|
5
|
</template>
|
7
|
6
|
<script>
|
|
@@ -14,6 +13,7 @@ export default {
|
14
|
13
|
data() {
|
15
|
14
|
return {
|
16
|
15
|
playing: 'off',
|
|
16
|
+ audio: null,
|
17
|
17
|
|
18
|
18
|
icons: {
|
19
|
19
|
'1': {
|
|
@@ -37,12 +37,19 @@ export default {
|
37
|
37
|
methods: {
|
38
|
38
|
play() {
|
39
|
39
|
if (this.url) {
|
40
|
|
- this.$refs.player.play()
|
|
40
|
+ if (!this.audio) {
|
|
41
|
+ this.audio = window.document.createElement('audio')
|
|
42
|
+ this.audio.src = this.url
|
|
43
|
+ this.audio.preload = true
|
|
44
|
+ this.audio.loop = true
|
|
45
|
+ }
|
|
46
|
+
|
|
47
|
+ this.audio.play()
|
41
|
48
|
this.playing = 'on'
|
42
|
49
|
}
|
43
|
50
|
},
|
44
|
51
|
stop() {
|
45
|
|
- this.$refs.player.pause()
|
|
52
|
+ this.audio.pause()
|
46
|
53
|
this.playing = 'off'
|
47
|
54
|
},
|
48
|
55
|
troggle() {
|