trying to switch how audio is playing

package.json

@@ -14,8 +14,10 @@
     "electron": "^33.0.1"
   },
   "dependencies": {
+    "fluent-ffmpeg": "^2.1.3",
     "id3js": "^2.1.1",
     "mp3-duration": "^1.1.0",
-    "node-id3": "^0.2.6"
+    "node-id3": "^0.2.6",
+    "speaker": "^0.5.5"
   }
 }

src/main.js

@@ -14,9 +14,33 @@ import { fileURLToPath } from 'node:url';
 
 import NodeID3 from 'node-id3';
 import fs from 'node:fs';
+import ffmpeg from 'fluent-ffmpeg';
+import Speaker from 'speaker';
 
 let win;
 
+class MusicPlayer {
+    constructor(path) {
+        this.songPath = path;
+        this.playing = false;
+        this.progress = 0;
+
+        this.speaker = new Speaker({
+            channels: 2,
+            bitDepth: 16,
+            sampleRate: 44100
+        });
+    }
+
+    play(path) {
+        if (path != null) {
+            this.songPath = path;
+        }
+
+        let stream = fs.create
+    }
+}
+
 const createWindow = () => {
     const filename = fileURLToPath(import.meta.url);
 
@@ -89,6 +113,10 @@ ipcMain.handle('getAudioInfo', function(event, path) {
     return id3tags;
 });
 
+ipcMain.handle('playSong', (event, path) => {
+    let command = ffmpeg(path);
+});
+
 // function getAudioInfo(url) {
 //     let info;
 

src/renderer.js

@@ -7,8 +7,17 @@ console.log('test');
 
 // const url = 'file://C:\\Users\\JISAUAY\\Documents\\misc\\sspm\\test.ogg';
 // const path = 'C:\\Users\\JISAUAY\\Documents\\misc\\sspm\\ChangelingForest.mp3';
-// const libPath = 'C:/Users/JISAUAY/Documents/misc/sspm/test-library/';
-const libPath = '/home/jackson/Documents/code/SSPM/test-library/'
+const libPath = 'C:/Users/JISAUAY/Documents/misc/sspm/test-library/';
+// const libPath = '/home/jackson/Documents/code/SSPM/test-library/'
+
+// Play Raw data to speaker
+// https://github.com/TooTallNate/node-speaker
+
+// Get Raw Data with Ffmpeg
+// https://github.com/fluent-ffmpeg/node-fluent-ffmpeg?tab=readme-ov-file
+
+// FFMpeg command for pcm data
+// ffmpeg -i input.whatever -f s16le -acodec pcm_s16le output.pcm
 
 let library;
 
@@ -43,9 +52,9 @@ async function readChildren(path) {
         let child = dirChildren[i];
 
         if (child.isDirectory) {
-            let dirPath = child.path + child.name;
-            let dirChildren = await readChildren(dirPath);
-            children.push(new Dir(dirPath, dirChildren));
+            let dirPath = child.path + '/' + child.name;
+            // let dirChildren = await readChildren(dirPath);
+            children.push(new Dir(dirPath, []));
         } else {
             children.push(child);
         }
@@ -75,9 +84,9 @@ document.addEventListener('DOMContentLoaded', async () => {
         const filename = e.name;
 
         if (e instanceof Dir) {
-            libContentDisplay.innerHTML += `<div class="LibDir" id=${i}>- ${filename}</div`;
+            libContentDisplay.innerHTML += `<div class="LibDir" isOpen="0" path="${e.path}">- ${filename}</div`;
         } else {
-            libContentDisplay.innerHTML += `<div class="LibEntry" id="${i}">${filename}</div>`;
+            libContentDisplay.innerHTML += `<div class="LibEntry" path="${e.path + '/' + e.name}">${filename}</div>`;
         }
     }
 });
@@ -86,11 +95,10 @@ document.addEventListener('DOMContentLoaded', async () => {
 document.addEventListener('DOMContentLoaded', async () => {
     const libContentDisplay = document.getElementById('libContents');
 
-    libContentDisplay.addEventListener('click', (e) => {
+    libContentDisplay.addEventListener('click', async (e) => {
         if (e.target.className == 'LibEntry') {
-            console.log(e);
-            let file_id = parseInt(e.target.id);
-            let audioPath = libEntryPathes[file_id].path + libEntryPathes[file_id].name;
+            console.log(e.target.attributes);
+            let audioPath = e.target.attributes.getNamedItem('path').value;
 
             console.log(`Audio Path: ${audioPath}`);
 
@@ -108,26 +116,31 @@ document.addEventListener('DOMContentLoaded', async () => {
         } else if (e.target.className == 'LibDir') {
             let id = parseInt(e.target.id);
 
-            let dir = library.children[id];
+            let dirPath = e.target.attributes.getNamedItem('path').value;
+            let dirName = dirPath.split('/').at(-1);
+            let isOpen = e.target.attributes.getNamedItem('isOpen');
 
-            if (!dir.open) {
-                e.target.innerHTML = `+ ${dir.name}`;
+            if (!parseInt(isOpen.value)) {
+                e.target.innerHTML = `+ ${dirName}`;
 
-                for (const i in dir.children) {
-                    let entry = dir.children[i];
+                let dirChildren = await readChildren(dirPath);
 
-                    if (entry.isDirectory) {
-                        e.target.innerHTML += `<div class="LibDir" id="">${entry.name}</div>`
+                for (const i in dirChildren) {
+                    let entry = dirChildren[i];
+
+                    if (entry instanceof Dir) {
+                        e.target.innerHTML += `<div class="LibDir" path="${entry.path}" isOpen="0">- ${entry.name}</div>`
                     } else {
-                        e.target.innerHTML += `<div class="LibEntry">${entry.name}</div>`
+                        e.target.innerHTML += `<div class="LibEntry" path="${entry.path + '/' + entry.name}">${entry.name}</div>`
                     }
                 }
 
-                dir.open = true;
+                isOpen.value = "1";
             } else {
-                e.target.innerHTML = `- ${dir.name}`;
-                dir.open = false;
+                e.target.innerHTML = `- ${dirName}`;
+                isOpen.value = "0";
             }
+            e.target.attributes.setNamedItem(isOpen);
         }
     });
 });