Play audio

docker-compose.yml

@@ -6,6 +6,7 @@ services:
     working_dir: /var/www/html
     volumes:
       - .:/var/www/html
+      - /home/jaro/windows/Devel/slovnik/nette30/www/media:/var/www/html/www/assets/media
     ports:
       - 80:80
       - 443:443

package.json

@@ -8,6 +8,7 @@
     "composer:update": "docker run --rm --interactive --tty --volume ${PWD}:/app --volume ${COMPOSER_HOME:-$HOME/.composer}:/tmp composer update"
   },
   "dependencies": {
+    "-": "^0.0.1",
     "@fortawesome/fontawesome-free": "^6.0.0",
     "@fortawesome/fontawesome-svg-core": "^1.3.0",
     "@fortawesome/free-solid-svg-icons": "^6.0.0",
@@ -17,8 +18,10 @@
     "axios": "^0.25.0",
     "flowbite": "^1.3.3",
     "font-awesome": "^4.7.0",
+    "html5-audio-demo": "https://github.com/muhammadatt/vue-audio-player",
     "nette-forms": "^3.3.1",
     "vue": "^3.2.30",
+    "vue-audio-player": "^0.0.2",
     "vue-tabz": "^1.1.5"
   },
   "devDependencies": {

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()

yarn.lock

@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"-@^0.0.1":
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/-/-/--0.0.1.tgz#db6db7cd866142880dd03e5b8781d1b4fac0e5bd"
+  integrity sha512-3HfneK3DGAm05fpyj20sT3apkNcvPpCuccOThOPdzz8sY7GgQGe0l93XH9bt+YzibcTIgUAIMoyVJI740RtgyQ==
+
 "@algolia/autocomplete-core@1.5.2":
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/@algolia/autocomplete-core/-/autocomplete-core-1.5.2.tgz#ec0178e07b44fd74a057728ac157291b26cecf37"
@@ -827,6 +832,12 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+"html5-audio-demo@https://github.com/muhammadatt/vue-audio-player":
+  version "1.0.0"
+  resolved "https://github.com/muhammadatt/vue-audio-player#c24f5f4beeb9c7efb5d73a7a819a98c644a67411"
+  dependencies:
+    vue "^2.5.11"
+
 import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz"
@@ -1221,11 +1232,23 @@ vite@^2.7.13:
   optionalDependencies:
     fsevents "~2.3.2"
 
+vue-audio-player@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/vue-audio-player/-/vue-audio-player-0.0.2.tgz#5629b029396208b291309de08f196448b5cedc19"
+  integrity sha512-q8n8x/Nh2Ls2Qkd0Agta6COo60PPM9rGONwZSoCqwmhWhF8XzbTXKFWpsIb7dRbWMtZa8oNIB1VTFgzCcwm7Ow==
+  dependencies:
+    vue "^2.5.2"
+
 vue-tabz@^1.1.5:
   version "1.1.5"
   resolved "https://registry.npmjs.org/vue-tabz/-/vue-tabz-1.1.5.tgz"
   integrity sha512-3g5tNqBw7HDpi84NBMKdk3vuhVfei83BXN1KksCfZ+RnIF4yKvLI61RaS/zti3Ar25qOMNRQE9pP+awJF6DG5A==
 
+vue@^2.5.11, vue@^2.5.2:
+  version "2.6.14"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
+  integrity sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==
+
 vue@^3.2.30:
   version "3.2.30"
   resolved "https://registry.npmjs.org/vue/-/vue-3.2.30.tgz"