Music: use pack bpm/key after choosing

apps/src/music/player/MusicLibrary.ts

@@ -208,12 +208,28 @@ export default class MusicLibrary {
     return foldersCopy;
   }
 
+  // Returns the library BPM, or the BPM of the currently selected pack if present.
   getBPM(): number | undefined {
-    return this.bpm;
+    if (!this.currentPackId) {
+      return this.bpm;
+    }
+    const folder = this.getFolderForFolderId(this.currentPackId);
+    // Read BPM from the folder, or the first sound that has a BPM if not present.
+    return (
+      folder?.bpm || folder?.sounds.find(sound => sound.bpm !== undefined)?.bpm
+    );
   }
 
+  // Returns the library key, or the key of the currently selected pack if present.
   getKey(): Key | undefined {
-    return this.key;
+    if (!this.currentPackId) {
+      return this.key;
+    }
+    const folder = this.getFolderForFolderId(this.currentPackId);
+    // Read key from the folder, or the first sound that has a key if not present.
+    return (
+      folder?.key || folder?.sounds.find(sound => sound.key !== undefined)?.key
+    );
   }
 }
 
@@ -276,7 +292,7 @@ export interface SoundFolder {
   restricted?: boolean;
   sounds: SoundData[];
   bpm?: number;
-  key?: string;
+  key?: Key;
 }
 
 export type LibraryJson = {

apps/src/music/player/ToneJSPlayer.ts

@@ -221,7 +221,12 @@ class ToneJSPlayer implements AudioPlayer {
   }
 
   setBpm(bpm: number) {
+    if (Transport.bpm.value === bpm) {
+      return;
+    }
     Transport.bpm.value = bpm;
+    // We need to regenerate all effect busses when BPM changes as some effects (e.g. delay) are BPM-dependent.
+    this.generateEffectBusses();
   }
 
   scheduleSample(sample: SampleEvent) {

apps/src/music/views/hooks/useUpdatePlayer.ts

@@ -17,6 +17,7 @@ export default function useUpdatePlayer(player: MusicPlayer) {
     state => state.music.startingPlayheadPosition
   );
   const isPlaying = useAppSelector(state => state.music.isPlaying);
+  const packId = useAppSelector(state => state.music.packId);
 
   const dispatch = useAppDispatch();
   const library = MusicLibrary.getInstance();
@@ -35,13 +36,14 @@ export default function useUpdatePlayer(player: MusicPlayer) {
     }
     const bpm = library.getBPM();
     const key = library.getKey();
-    if (bpm) {
+    if (bpm !== undefined) {
       dispatch(setBpm(bpm));
     }
-    if (key) {
+    if (key !== undefined) {
       dispatch(setKey(key));
     }
-  }, [library, dispatch]);
+    // Update BPM and key whenever current pack ID changes.
+  }, [library, dispatch, packId]);
 
   useEffect(() => {
     player.setLoopEnabled(loopEnabled);