Add AudioViewer.vue

frontend/components/tasks/audio/AudioViewer.vue

@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <div id="waveform" />
+    <v-row
+      no-gutters
+      align="center"
+      class="mb-3 mt-1"
+    >
+      <v-col md="8">
+        <v-slider
+          v-model="zoom"
+          min="0"
+          max="500"
+          step="10"
+          append-icon="mdi-magnify-plus-outline"
+          prepend-icon="mdi-magnify-minus-outline"
+          hide-details
+          @click:append="zoomIn"
+          @click:prepend="zoomOut"
+          @change="onChangeZoom"
+        />
+      </v-col>
+      <v-col md="2">
+        <v-slider
+          v-model="volume"
+          min="0"
+          max="1"
+          step="0.1"
+          append-icon="mdi-volume-high"
+          hide-details
+          @change="onChangeVolume"
+        />
+      </v-col>
+      <v-col md="2">
+        <v-select
+          v-model="speed"
+          :items="speeds"
+          label="Speed"
+          dense
+          outlined
+          hide-details
+          @change="onChangeSpeed"
+        />
+      </v-col>
+    </v-row>
+    <v-btn
+      color="primary"
+      class="text-capitalize"
+      @click="play"
+    >
+      <v-icon
+        v-if="!isPlaying"
+        left
+      >
+        mdi-play-circle-outline
+      </v-icon>
+      <v-icon
+        v-else
+        left
+      >
+        mdi-pause-circle-outline
+      </v-icon>
+      <span v-if="!isPlaying">Play</span>
+      <span v-else>Pause</span>
+    </v-btn>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import WaveSurfer from 'wavesurfer.js'
+
+
+export default Vue.extend({
+  props: {
+    source: {
+      type: String,
+      default: '',
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      wavesurfer: null,
+      isPlaying: false,
+      zoom: 0,
+      volume: 0.6,
+      speed: 1,
+      speeds: [0.5, 0.75, 1.0, 1.25, 1.5, 2.0]
+    }
+  },
+
+  watch: {
+    source() {
+      this.load()
+    }
+  },
+
+  mounted() {
+    this.wavesurfer = WaveSurfer.create({
+        container: '#waveform',
+        backend: "MediaElement"
+    })
+    this.load()
+  },
+
+  methods: {
+    load() {
+    	this.wavesurfer.load(this.source)
+    },
+    play() {
+      this.isPlaying = !this.isPlaying
+    	this.wavesurfer.playPause()
+    },
+    zoomOut() {
+      this.zoom = (this.zoom - 10) || 0
+      this.onChangeZoom(this.zoom)
+    },
+    zoomIn() {
+      this.zoom = (this.zoom + 10) || 500
+      this.onChangeZoom(this.zoom)
+    },
+    onChangeVolume(value) {
+      this.wavesurfer.setVolume(value)
+    },
+    onChangeZoom(value) {
+      this.wavesurfer.zoom(value)
+    },
+    onChangeSpeed(value) {
+      this.wavesurfer.setPlaybackRate(value)
+    }
+  }
+})
+</script>

frontend/pages/projects/_id/speech-to-text/index.vue

@@ -18,15 +18,10 @@
       />
     </template>
     <template v-slot:content>
-      <audio
-        controls
-        :src="item.url"
-        class="mt-2 mb-5"
-        style="width:100%;"
-      >
-        Your browser does not support the
-        <code>audio</code> element.
-      </audio>
+      <audio-viewer
+        :source="item.url"
+        class="mb-5"
+      />
       <seq2seq-box
         :text="item.text"
         :annotations="annotations"
@@ -48,11 +43,13 @@ import ListMetadata from '@/components/tasks/metadata/ListMetadata'
 import ToolbarLaptop from '@/components/tasks/toolbar/ToolbarLaptop'
 import ToolbarMobile from '@/components/tasks/toolbar/ToolbarMobile'
 import Seq2seqBox from '~/components/tasks/seq2seq/Seq2seqBox'
+import AudioViewer from '~/components/tasks/audio/AudioViewer'
 
 export default {
   layout: 'workspace',
 
   components: {
+    AudioViewer,
     LayoutText,
     ListMetadata,
     Seq2seqBox,