Add pitch control for looping sources; adjust row sizing

src/components/SoundscapeComp.vue

@@ -71,7 +71,7 @@ export default class SoundscapeComp extends Vue {
   height: 100%;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-  grid-auto-rows: 200px;
+  grid-auto-rows: auto-fit;
   grid-gap: 20px;
   background: #222;
   border-radius: 30px;

src/sources/LoopingSource.ts

@@ -1,11 +1,15 @@
 import { Source } from "./Source";
-import { context } from "../audio";
+import { context, exposedNumber } from "../audio";
 
 export class LoopingSource extends Source {
   kind = "Looping";
   private source!: AudioBufferSourceNode;
   private started = false;
   private running = false;
+
+  @exposedNumber("Pitch", 0.25, 4)
+  public pitch = 1;
+
   constructor(name: string) {
     super(name);
   }
@@ -31,5 +35,6 @@ export class LoopingSource extends Source {
       this.source.start();
       this.running = true;
     }
+    this.source.playbackRate.value = this.pitch;
   }
 }