Index: main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/App.vue
===================================================================
--- main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/App.vue	(revision 35425)
+++ main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/App.vue	(revision 35426)
@@ -126,5 +126,5 @@
         }
 
-        setTimeout(p, 50);
+        setTimeout(p, 33); // Slightly more than 30hz
     })();
 }
Index: main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/AudioTimeBar.vue
===================================================================
--- main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/AudioTimeBar.vue	(revision 35425)
+++ main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/AudioTimeBar.vue	(revision 35426)
@@ -1,6 +1,6 @@
 <template>
 <div class="root">
-    <input type="range" class="slider-continuous" v-model="sliderValue" :max="audioLength" step="0.01" />
-    <span>{{ sliderValue }}</span>
+    <input type="range" class="slider-continuous" v-model.number="sliderValue" :max="audioLength" step="0.01" />
+    <span>{{ stringSliderValue }}</span>
 </div>
 </template>
@@ -32,21 +32,21 @@
         sliderValue: {
             get() {
-                if (this.myValue < 0) {
+                if (this.modelValue < 0) {
                     return 0;
                 }
 
-                if (this.myValue > this.audioLength) {
+                if (this.modelValue > this.audioLength) {
                     return this.audioLength;
                 }
 
-                return this.myValue;
+                return this.modelValue;
             },
             set(newValue) {
+                // this.myValue = newValue;
                 this.$emit("update:modelValue", newValue);
-                this.myValue = newValue;
             }
         },
         stringSliderValue() {
-            return Util.formatSecondsTimeString(this.sliderValue);
+            return Util.formatSecondsTimeString(this.sliderValue, false, 2);
         }
     }
Index: main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItemEditor.vue
===================================================================
--- main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItemEditor.vue	(revision 35425)
+++ main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItemEditor.vue	(revision 35426)
@@ -2,5 +2,5 @@
 <div>
     <div class="editor-controls">
-        <audio-time-bar v-model="currentPlaybackTime" :audio-length="2" />
+        <audio-time-bar v-model.number="currentPlaybackTime" :audio-length="2" />
 
         <toggle-button v-model="enableEditing">
@@ -125,9 +125,18 @@
         }
     },
-    computed: mapState({
-        playbackState: state => state.playbackState,
-        currentPlaybackTime: state => state.playbackState.currentTime,
-        translations: state => state.translations
-    }),
+    computed: {
+        currentPlaybackTime: {
+            get() {
+                return this.$store.state.playbackState.currentTime;
+            },
+            set(value) {
+                this.$store.commit("setCurrentPlaybackTime", value);
+            }
+        },
+        ...mapState({
+            playbackState: state => state.playbackState,
+            translations: state => state.translations
+        })
+    },
     methods: {
         playAudio(startTime) {
Index: main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/js/Util.js
===================================================================
--- main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/js/Util.js	(revision 35425)
+++ main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/js/Util.js	(revision 35426)
@@ -48,7 +48,8 @@
      * @param {Number} seconds The number of seconds.
      * @param {Boolean} includeHoursIfNone Defines whether to include the hours component if it is empty.
+     * @param {Number} fractionDigits The number of millisecond digits to include in the time string.
      * @returns {String} The formatted time string.
      */
-    static formatSecondsTimeString(seconds, includeHoursIfNone) {
+    static formatSecondsTimeString(seconds, includeHoursIfNone, fractionDigits = 3) {
         const hours = (seconds / 3600) | 0;
         const minutes = ((seconds - (hours * 60)) / 60) | 0;
@@ -65,5 +66,5 @@
 
         result += minutes.toLocaleString("en-US", { maximumFractionDigits: 0, minimumIntegerDigits: 2 });
-        result += ":" + actualSeconds.toLocaleString("en-US", { minimumFractionDigits: 3, maximumFractionDigis: 3, minimumIntegerDigits: 2 });
+        result += ":" + actualSeconds.toLocaleString("en-US", { minimumFractionDigits: fractionDigits, maximumFractionDigits: fractionDigits, minimumIntegerDigits: 2 });
 
         return result;
Index: main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/main.js
===================================================================
--- main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/main.js	(revision 35425)
+++ main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/main.js	(revision 35426)
@@ -37,5 +37,5 @@
      * @param {Numbe} currentTime The current time in the audio playback.
      */
-    constructor(id = "", isPlaying = false, currentTime = -1) {
+    constructor(id = "", isPlaying = false, currentTime = 0) {
         /** @type {String} The ID of the transcription for which audio is currently being played. */
         this.id = id;
