update README with tracklist; bump package versions for dependencies

NumberOneBot · Jan 11, 2025 · 2cff083 · 2cff083
1 parent bfafc3a
commit 2cff083
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 32 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,14 @@
 # Demo Project of the DSSSP: React Library of Audio Processing and Visualization
 
 For more details, see the original [repository](https://github.com/NumberOneBot/dsssp) of the DSSSP library.
+
+## Tracklist
+
+Tracks used for the demo:
+
+- **BalloonPlanet** - _Cool My Bass_
+- **Seth Parson** - _Waiting_
+- **Gidon Schocken** - _I Owe It to You_
+- **Adam Simons** - _Lost You_
+
+Acquired from [Artlist.io](https://artlist.io) and should not be copied, distributed, or used for any commercial purposes.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "clsx": "^2.1.1",
-    "dsssp": "^0.1.9-alpha.2",
+    "dsssp": "^0.1.10-alpha.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/src/components/MusicPlayer/AudioController.ts b/src/components/MusicPlayer/AudioController.ts
@@ -30,42 +30,35 @@ export class AudioController {
   async init(url: string): Promise<void> {
     try {
       this.props.onLoadingChange(true)
-      console.log('Initializing AudioController...')
 
       if (!this.audioContext) {
         const AudioContextConstructor =
           window.AudioContext || (window as any).webkitAudioContext
         this.audioContext = new AudioContextConstructor()
-        console.log('AudioContext created.')
 
         // Create AnalyserNodes
         this.analyserLeft = this.audioContext.createAnalyser()
         this.analyserRight = this.audioContext.createAnalyser()
         this.analyserLeft.fftSize = 32
         this.analyserRight.fftSize = 32
-        console.log('AnalyserNodes created.')
 
         // Create ChannelSplitterNode
         this.splitter = this.audioContext.createChannelSplitter(2)
-        console.log('ChannelSplitterNode created.')
 
         // Connect analysers to splitter
         if (this.splitter && this.analyserLeft && this.analyserRight) {
           this.splitter.connect(this.analyserLeft, 0)
           this.splitter.connect(this.analyserRight, 1)
-          console.log('AnalyserNodes connected to splitter.')
 
           // **Connect splitter to destination**
           this.splitter.connect(this.audioContext.destination)
-          console.log('Splitter connected to AudioContext.destination.')
 
           // Emit analyser availability event
           if (this.props.onAnalyserReady) {
             this.props.onAnalyserReady({
               left: this.analyserLeft,
               right: this.analyserRight
             })
-            console.log('onAnalyserReady event emitted.')
           }
         } else {
           console.warn('Failed to initialize AnalyserNodes or splitter.')
@@ -74,7 +67,6 @@ export class AudioController {
 
       // Load track
       await this.loadTrack(url)
-      console.log('Track loaded.')
 
       this.props.onLoadingChange(false)
     } catch (error) {
@@ -99,7 +91,6 @@ export class AudioController {
         await this.sourceNode.stop()
         this.sourceNode.disconnect()
         this.sourceNode = null
-        console.log('Existing sourceNode stopped and disconnected.')
       } catch (error) {
         console.warn('Error stopping existing source node:', error)
       }
@@ -112,7 +103,6 @@ export class AudioController {
     }
     const arrayBuffer = await response.arrayBuffer()
     this.audioBuffer = await this.audioContext.decodeAudioData(arrayBuffer)
-    console.log('Audio data decoded.')
 
     // Update duration
     this.props.onDurationChange(this.formatTime(this.audioBuffer.duration))
@@ -176,7 +166,6 @@ export class AudioController {
         this.sourceNode.stop()
         this.sourceNode.disconnect()
         this.sourceNode = null
-        console.log('Existing sourceNode stopped and disconnected.')
       } catch (error) {
         console.warn('Error stopping existing source node:', error)
       }
@@ -185,22 +174,18 @@ export class AudioController {
     const sourceNode = this.audioContext.createBufferSource()
     sourceNode.buffer = this.audioBuffer!
     this.sourceNode = sourceNode
-    console.log('New sourceNode created.')
 
     // Connect sourceNode to splitter
     if (this.splitter) {
       sourceNode.connect(this.splitter)
-      console.log('sourceNode connected to splitter.')
     } else {
       console.warn('ChannelSplitterNode is not initialized.')
       // As a fallback, connect directly to destination
       sourceNode.connect(this.audioContext.destination)
-      console.log('sourceNode connected directly to destination.')
     }
 
     try {
       sourceNode.start(0, this.pausedAt)
-      console.log('sourceNode started.')
     } catch (error) {
       console.error('Error starting source node:', error)
       return
@@ -223,15 +208,13 @@ export class AudioController {
       this.sourceNode.stop()
       this.sourceNode.disconnect()
       this.sourceNode = null
-      console.log('sourceNode stopped and disconnected.')
     } catch (error) {
       console.warn('Error while stopping source node:', error)
     }
 
     if (this.requestAnimationFrameId != null) {
       cancelAnimationFrame(this.requestAnimationFrameId)
       this.requestAnimationFrameId = null
-      console.log('Animation frame canceled.')
     }
   }
 
@@ -246,7 +229,6 @@ export class AudioController {
         this.sourceNode.stop()
         this.sourceNode.disconnect()
         this.sourceNode = null
-        console.log('sourceNode stopped and disconnected.')
       } catch (error) {
         console.warn('Error stopping source node:', error)
       }
@@ -258,7 +240,6 @@ export class AudioController {
     if (this.requestAnimationFrameId != null) {
       cancelAnimationFrame(this.requestAnimationFrameId)
       this.requestAnimationFrameId = null
-      console.log('Animation frame canceled.')
     }
   }
 
@@ -268,7 +249,6 @@ export class AudioController {
       try {
         this.sourceNode.stop()
         this.sourceNode.disconnect()
-        console.log('sourceNode stopped and disconnected during cleanup.')
       } catch (error) {
         console.warn('Error stopping source node during cleanup:', error)
       }
@@ -278,7 +258,6 @@ export class AudioController {
     if (this.requestAnimationFrameId != null) {
       cancelAnimationFrame(this.requestAnimationFrameId)
       this.requestAnimationFrameId = null
-      console.log('Animation frame canceled during cleanup.')
     }
 
     // Close AudioContext
@@ -287,14 +266,12 @@ export class AudioController {
         console.warn('Error closing AudioContext during cleanup:', error)
       })
       this.audioContext = null
-      console.log('AudioContext closed during cleanup.')
     }
 
     // Clear analysers and splitter
     this.analyserLeft = null
     this.analyserRight = null
     this.splitter = null
-    console.log('AnalyserNodes and splitter cleared during cleanup.')
   }
 
   getAnalyserNodes() {

diff --git a/src/components/MusicPlayer/CoversStack.tsx b/src/components/MusicPlayer/CoversStack.tsx
@@ -31,9 +31,9 @@ export const CoversStack = ({
             style={{
               width: 34 - layer * 6,
               height: 34 - layer * 6,
-              left: layer * -6,
+              left: layer * -5,
               top: layer * 3,
-              filter: `brightness(${100 - layer * 30}%)`
+              filter: `brightness(${100 - layer * 25}%)`
             }}
             onClick={() => (layer === 0 ? onClick(index) : null)}
           />

diff --git a/src/configs/tracks.ts b/src/configs/tracks.ts
@@ -19,5 +19,12 @@ export const tracks = [
       'https://mqb-blog.com/sound/assets/896218_Gidon_Schocken_-_I_Owe_It_to_You_-_thumb.avif',
     artist: 'Gidon Schocken',
     title: 'I Owe It to You'
+  },
+  {
+    src: 'https://mqb-blog.com/sound/assets/Adam_North_Simons_-_One_Of_These_Days_-_BO-000184-5_-_Master_V1a_-_124_Bpm_-_210824_-_BOV_-_ORG_-_2444.aac',
+    cover:
+      'https://mqb-blog.com/sound/assets/948685_Adam_Simons_-_One_of_These_Days_-_A_-_Thum.avif',
+    artist: 'Adam Simons',
+    title: 'Lost You'
   }
 ]