use radio buttons for freesound result selection, ensure audio seekin…

…g works in chrome
mrutherford92 · Feb 4, 2022 · 88413ec · 88413ec
1 parent 15a97df
commit 88413ec
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 25 deletions.
diff --git a/examples/demos/onsets/src/components/FreesoundResult.vue b/examples/demos/onsets/src/components/FreesoundResult.vue
@@ -13,11 +13,11 @@
 			</div>
 			<div id="playbar-container">
 				<b-form-input type="range" id="playbar" :max="seekMax" 
-				v-model="playbackPosition" size="sm" step="any" @change="handleSeek"></b-form-input>
+				v-model="playbackPosition" size="sm" step="any" @change="handleSeek" @input="handleSeek"></b-form-input>
 			</div>
 		</div>
 		<span class="not-stretchy" id="select-container">
-			<b-form-checkbox v-model="selected" size="sm"></b-form-checkbox>
+			<b-form-radio :value="soundResource.id" v-model="selected" size="sm"></b-form-radio>
 		</span>
 	</div>
 </template>
@@ -28,20 +28,19 @@ export default {
     emits: ['selected'],
     props: {
         soundResource: Object,
-		checked: Number
     },
     data () {
         return {
             playing: false,
-            selected: false,
+            selected: -1,
 			audio: null,
 			seekMax: 100,
 			playbackPosition: 0
         }
     },
     watch: {
         selected (isSelected) {
-            if (isSelected) this.$emit('selected');
+            if (isSelected == this.soundResource.id) this.$emit('selected');
         },
 		soundResource () {
 			if (this.audio) {
@@ -50,30 +49,18 @@ export default {
 				this.playbackPosition = 0;
 			}
 			this.setupAudioElement();
-		},
-		checked (id) {
-			if (id != this.soundResource.id) {
-				this.selected = false;
-			}
 		}
     },
 	created () {
 		this.setupAudioElement();
 	},
 	methods: {
 		handlePlay () {
-			const whilePlaying = () => {
-				this.playbackPosition = this.audio.currentTime;
-				this.rAF = requestAnimationFrame(whilePlaying)
-			};
-
 			if (this.playing) {
 				this.stopAudio();
 				return;
 			}
-			this.audio.play();
-			requestAnimationFrame(whilePlaying);
-			this.playing = true;
+			this.playAudio();
 		},
 		setupAudioElement () {
 			this.audio = document.createElement('audio');
@@ -91,10 +78,19 @@ export default {
 		handleSeek (pos) {
 			this.audio.currentTime = Number(pos);
 		},
+		playAudio () {
+			this.audio.play();
+			requestAnimationFrame(this.whilePlaying.bind(this));
+			this.playing = true;
+		},
 		stopAudio () {
 			this.audio.pause();
 			cancelAnimationFrame(this.rAF)
 			this.playing = false;
+		},
+		whilePlaying () {
+			this.playbackPosition = this.audio.currentTime;
+			this.rAF = requestAnimationFrame(this.whilePlaying.bind(this))
 		}
 	}
 }

diff --git a/examples/demos/onsets/src/components/FreesoundResultList.vue b/examples/demos/onsets/src/components/FreesoundResultList.vue
@@ -1,11 +1,16 @@
 <template>
-    <b-form-radio-group class="row rounded border-0 bg-light w-100 mx-0"> 
-        <div class="col-sm w-100 me-auto" v-for="col, colIdx in soundColumns" :key="colIdx">
-            <li v-for="sound, sndIdx in col" :key="sndIdx" class="mx-auto">
-                <freesound-result :checked="selected" @selected="handleSelect(sound)" :soundResource="sound"></freesound-result>
-            </li>
+    <div class="d-flex flex-column rounded border-0 bg-light mb-4">
+        <b-form-radio-group class="row w-100 mx-0"> 
+            <div class="col-sm w-100 me-auto" v-for="col, colIdx in soundColumns" :key="colIdx">
+                <li v-for="sound, sndIdx in col" :key="sndIdx" class="mx-auto">
+                    <freesound-result @selected="handleSelect(sound)" :soundResource="sound"></freesound-result>
+                </li>
+            </div>
+        </b-form-radio-group>
+        <div>
+            <b-button block class="mt-2" variant="outline-primary" @click="confirmChoice" v-show="selected != -1">Load "{{selectedSoundName}}"</b-button>
         </div>
-    </b-form-radio-group>
+    </div>
 </template>
 
 <script>
@@ -31,16 +36,25 @@ export default {
                 columns.push(this.sounds.slice(col * mid, col * mid + mid));
             }
             return columns;
+        },
+        soundData () {
+            return Object.fromEntries( this.sounds.map( s => [s.id, s] ));
+        },
+        selectedSoundName () {
+            if (this.selected == -1) return '';
+            return this.soundData[this.selected].name;
         }
     },
     methods: {
         freesoundEmbedURL (soundId) {
             return `https://freesound.org/embed/sound/iframe/${soundId}/simple/small/`;
         },
         handleSelect (sound) {
+            console.log('select event received from: ', sound.name);
             this.selected = sound.id;
         },
         confirmChoice () {
+            const sound = this.soundData[this.selected];
             let selectedAudioURL = sound.previews["preview-hq-mp3"];
             EventBus.$emit("sound-selected", 
                 {
@@ -52,7 +66,7 @@ export default {
                     license: sound.license
                 }
             );
-            this.selected = "";
+            this.selected = -1;
         }
     }
 }