+102
-8
lines changedFilter options
+102
-8
lines changed Original file line number Diff line number Diff line change
@@ -40,7 +40,7 @@
40 40
"access": "public"
41 41
},
42 42
"dependencies": {
43 -
"@cycjimmy/h5-audio-controls": "^3.1.2"
43 +
"@cycjimmy/h5-audio-controls": "^3.2.1"
44 44
},
45 45
"devDependencies": {
46 46
"@babel/core": "^7.7.2",
@@ -36,6 +36,20 @@ export default {
36 36
return this.h5AudioControls.isPlaying();
37 37
}
38 38
},
39 +
watch: {
40 +
src(val) {
41 +
this.h5AudioControls.changeAudioSrc(val);
42 +
},
43 +
position(val) {
44 +
this.h5AudioControls.changePosition(val);
45 +
},
46 +
buttonSize(val) {
47 +
this.h5AudioControls.changeButtonSize(val);
48 +
},
49 +
iconSize(val) {
50 +
this.h5AudioControls.changeIconSize(val);
51 +
}
52 +
},
39 53
mounted() {
40 54
const { parentNode } = this.$el;
41 55
this.h5AudioControls = h5AudioControls(this.src, {
@@ -12,10 +12,18 @@
12 12
padding: 0;
13 13
}
14 14 15 +
html, body {
16 +
height: 100%;
17 +
}
18 + 15 19
body {
16 20
background-color: #0a4f56;
17 21
}
18 22 23 +
.app-wrapper {
24 +
height: 100%;
25 +
}
26 + 19 27
.buttons-wrapper {
20 28
display: flex;
21 29
padding: 60px 40px 0;
@@ -43,17 +51,38 @@
43 51
<script type="module">
44 52
Vue.use(H5AudioControls);
45 53 54 +
const aAudioSrc = [
55 +
'https://cycjimmy.github.io/staticFiles/media/Richard_Clayderman-LOVE_IS_BLUE.mp3',
56 +
'https://cycjimmy.github.io/staticFiles/media/Richard_Clayderman-Secget_Garden.mp3'
57 +
];
58 + 46 59
new Vue({
47 60
el: '#app',
48 61
template: `
49 -
<div>
62 +
<div class="app-wrapper">
50 63
<div class="buttons-wrapper">
51 64
<a href="javascript:" class="button" @click="play">play</a>
52 65
<a href="javascript:" class="button" @click="pause">pause</a>
53 66
<a href="javascript:" class="button" @click="stop">stop</a>
54 67
<a href="javascript:" class="button" @click="trigger">trigger</a>
55 68
</div>
56 69 70 +
<div class="buttons-wrapper">
71 +
<a href="javascript:" class="button" @click="changeAudioSrc">changeAudioSrc</a>
72 +
</div>
73 + 74 +
<div class="buttons-wrapper">
75 +
<a href="javascript:" class="button" @click="changePosition">changePosition</a>
76 +
</div>
77 + 78 +
<div class="buttons-wrapper">
79 +
<a href="javascript:" class="button" @click="changeButtonSize">changeButtonSize</a>
80 +
</div>
81 + 82 +
<div class="buttons-wrapper">
83 +
<a href="javascript:" class="button" @click="changeIconSize">changeIconSize</a>
84 +
</div>
85 + 57 86
<h5-audio-controls
58 87
ref="h5AudioControls"
59 88
:src="audioControlsConfig.src"
@@ -65,9 +94,9 @@
65 94
data() {
66 95
return {
67 96
audioControlsConfig: {
68 -
src: 'https://cycjimmy.github.io/staticFiles/media/Richard_Clayderman-LOVE_IS_BLUE.mp3',
97 +
src: aAudioSrc[0],
69 98
position: 'left-top',
70 -
buttonSize: '15vw',
99 +
buttonSize: '16vw',
71 100
iconSize: '10vw'
72 101
}
73 102
}
@@ -88,7 +117,58 @@
88 117
} else {
89 118
this.$refs.h5AudioControls.play();
90 119
}
91 -
}
120 +
},
121 +
changeAudioSrc() {
122 +
switch (this.audioControlsConfig.src) {
123 +
case aAudioSrc[0]:
124 +
this.audioControlsConfig.src = aAudioSrc[1];
125 +
break;
126 + 127 +
case aAudioSrc[1]:
128 +
this.audioControlsConfig.src = aAudioSrc[0];
129 +
break;
130 +
}
131 +
},
132 +
changePosition() {
133 +
switch (this.audioControlsConfig.position) {
134 +
case 'left-top':
135 +
this.audioControlsConfig.position = 'top-right';
136 +
break;
137 +
case 'top-right':
138 +
this.audioControlsConfig.position = 'right-bottom';
139 +
break;
140 +
case 'right-bottom':
141 +
this.audioControlsConfig.position = 'left-bottom';
142 +
break;
143 +
case 'left-bottom':
144 +
this.audioControlsConfig.position = 'left-top';
145 +
break;
146 +
}
147 +
},
148 +
changeButtonSize() {
149 +
switch (this.audioControlsConfig.buttonSize) {
150 +
case '12vw':
151 +
this.audioControlsConfig.buttonSize = '16vw';
152 +
break;
153 +
case '16vw':
154 +
this.audioControlsConfig.buttonSize = '12vw';
155 +
break;
156 +
default:
157 +
this.audioControlsConfig.buttonSize = '12vw';
158 +
}
159 +
},
160 +
changeIconSize() {
161 +
switch (this.audioControlsConfig.iconSize) {
162 +
case '10vw':
163 +
this.audioControlsConfig.iconSize = '7vw';
164 +
break;
165 +
case '7vw':
166 +
this.audioControlsConfig.iconSize = '10vw';
167 +
break;
168 +
default:
169 +
this.audioControlsConfig.iconSize = '7vw';
170 +
}
171 +
},
92 172
}
93 173
});
94 174
</script>
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4