Play audio

src/scripts/App.vue

@@ -58,6 +58,7 @@ import SearchForm from './components/SearchForm.vue'
 import TranslationContent from './components/Translation.vue'
 import Translation from './components/Translation.vue'
 
+
 console.log(trData);
 console.log(logoUrl);
 </script>

src/scripts/components/Translation.vue

@@ -1,7 +1,10 @@
 <script>
 
+import VueSound from './VueSound.vue';
+
 export default {
   props: ['data', 'type'],
+  components: { VueSound, },
   computed: {
     termsDataDict: function() {
       let data = this.data.terms;
@@ -75,7 +78,9 @@ export default {
         
         <span class="mx-1 text-sm font-bold" 
               v-bind:class="{ 'text-green-800': i == 0, 'text-blue-800': i == 1, 'text-red-800': i == 3 }" 
-              v-for="(p,i) in t[0].pronunciations" :key="i">[{{ p.ipa }}]<i class="fa ml-1 fa-play-circle"></i></span>  
+              v-for="(p,i) in t[0].pronunciations" :key="i">[{{ p.ipa }}] 
+              <vue-sound :src="p.filename"></vue-sound>
+              </span>  
     </span>
         <div class="px-10">
         <span v-for="(tt, n) in t" :key="n" class="text-sm text-gray-500  dark:text-gray-400">

src/scripts/components/VueSound.vue

@@ -0,0 +1,20 @@
+<script>
+
+
+export default {
+  props: ['src', 'icon'],
+  methods: {
+    playSound: function(src) {
+      console.log('/assets/media/' + src);
+      var audioElement = document.createElement('audio');
+      audioElement.setAttribute('src', '/assets/media/' + src);
+      audioElement.play();
+    }
+  },
+
+}
+</script>
+
+<template>
+<span @click="playSound(src)" ><i class="fa ml-1 fa-play-circle"></i></span>
+</template>

src/scripts/main.js

@@ -7,6 +7,7 @@ import 'flowbite';
 import '@fortawesome/fontawesome-free/js/all.js';
 
 
+
 const LibStimulus = new Application(document.documentElement)
 
 LibStimulus.start()