112 lines
2.3 KiB
Vue
112 lines
2.3 KiB
Vue
<template>
|
|
<div class="speak-word">
|
|
<div class="word">
|
|
{{ props.word }}
|
|
</div>
|
|
<div v-if="pos" class="pos">
|
|
{{ props.pos }}
|
|
</div>
|
|
<div class="spacer"></div>
|
|
<div class="ctrl">
|
|
<div
|
|
class="ctrl-part"
|
|
:class="item.label"
|
|
v-for="(item, ix) in audios"
|
|
:key="`audio-${ix}`"
|
|
>
|
|
<div v-if="ix !== 0" class="divider"></div>
|
|
<button
|
|
class="play-button"
|
|
:class="item.label"
|
|
@click="playAudio(item.label)"
|
|
>
|
|
<span class="accent-label">{{ item.label }}</span>
|
|
<img :src="svgUrl(item.label)" class="icon" alt="sound" />
|
|
</button>
|
|
<audio
|
|
class="audio"
|
|
:class="item.label"
|
|
:src="item.audio"
|
|
controls="false"
|
|
></audio>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, onMounted, ref } from "vue";
|
|
import { getAudioPath } from "../data";
|
|
const props = defineProps({
|
|
word: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
audioUs: {
|
|
type: String,
|
|
},
|
|
audioUk: {
|
|
type: String,
|
|
},
|
|
audioOther: {
|
|
type: String,
|
|
},
|
|
pos: {
|
|
type: String,
|
|
},
|
|
});
|
|
|
|
const svgUrl = (accent) => {
|
|
if (accent === "uk") {
|
|
return "/images/speaker-brown.svg";
|
|
} else if (accent === "us") {
|
|
return "/images/speaker-blue.svg";
|
|
}
|
|
return "/images/speaker-black.svg";
|
|
};
|
|
|
|
const audioPathUS = computed(() => {
|
|
if (props.audioUs) {
|
|
return props.audioUs;
|
|
}
|
|
return getAudioPath(props.word, "us");
|
|
});
|
|
|
|
const audioPathUK = computed(() => {
|
|
if (props.audioUk) {
|
|
return props.audioUk;
|
|
}
|
|
return getAudioPath(props.word, "uk");
|
|
});
|
|
|
|
const audioPathOther = computed(() => {
|
|
if (props.audioUk) {
|
|
return props.audioUk;
|
|
}
|
|
return getAudioPath(props.word, "other");
|
|
});
|
|
|
|
const audios = computed(() => {
|
|
const ret: any = [];
|
|
if (audioPathUS.value) {
|
|
ret.push({ label: "us", audio: audioPathUS.value });
|
|
}
|
|
if (audioPathUK.value) {
|
|
ret.push({ label: "uk", audio: audioPathUK.value });
|
|
}
|
|
if (audioPathOther.value) {
|
|
ret.push({ label: "other", audio: audioPathOther.value });
|
|
}
|
|
return ret;
|
|
});
|
|
|
|
function playAudio(accent) {
|
|
const audioEl: any = document.querySelector(`audio.${accent}`);
|
|
audioEl.play();
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import url(./SpeakWord.scss);
|
|
</style>
|