76 lines
1.3 KiB
Vue
76 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<VolumeHigh v-if="volume > 0.7"
|
||
|
|
class="pointer"
|
||
|
|
:size="30"
|
||
|
|
@click="mute" />
|
||
|
|
<VolumeLow v-if="volume > 0 && volume <= 0.3"
|
||
|
|
class="pointer"
|
||
|
|
:size="30"
|
||
|
|
@click="mute" />
|
||
|
|
<VolumeMedium v-if="volume > 0.3 && volume <= 0.7"
|
||
|
|
class="pointer"
|
||
|
|
:size="30"
|
||
|
|
@click="mute" />
|
||
|
|
<VolumeMute v-if="volume == 0"
|
||
|
|
class="pointer"
|
||
|
|
:size="30"
|
||
|
|
@click="unmute" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import VolumeHigh from 'vue-material-design-icons/VolumeHigh.vue'
|
||
|
|
import VolumeLow from 'vue-material-design-icons/VolumeLow.vue'
|
||
|
|
import VolumeMedium from 'vue-material-design-icons/VolumeMedium.vue'
|
||
|
|
import VolumeMute from 'vue-material-design-icons/VolumeMute.vue'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'Volume',
|
||
|
|
components: {
|
||
|
|
VolumeHigh,
|
||
|
|
VolumeLow,
|
||
|
|
VolumeMedium,
|
||
|
|
VolumeMute,
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
volume: {
|
||
|
|
type: Number,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
volumeMuted: 0,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
audio() {
|
||
|
|
return document.getElementById('audio-player')
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
mute() {
|
||
|
|
this.volumeMuted = this.audio.volume
|
||
|
|
this.audio.volume = 0
|
||
|
|
},
|
||
|
|
unmute() {
|
||
|
|
this.audio.volume = this.volumeMuted
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
div {
|
||
|
|
align-items: center;
|
||
|
|
display: flex;
|
||
|
|
gap: 5px;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pointer {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
</style>
|