added play/pause button

src/index.html

@@ -12,11 +12,18 @@
         content="default-src 'self'; script-src 'self'"
         />
         <title>Menu</title>
+        <script src="./renderer.js"></script>
     </head>
     <body>
-        <div class="LibHeader">Library</div>
+        <div class="PlayerControls" id="controls">
-        <div class="LibContents" id="libContents"></div>
+            <button id="play">Play</button>
+            <button id="pause">Pause</button>
+        </div>
+        <div class="Library">
+            <h1>Library</h1>
+            <div class="LibContents" id="libContents">
+            </div>
+        </div>
     </body>
-    <script src="./renderer.js"></script>
     <link id="style" rel="stylesheet" href="./style.css">
 </html>

src/renderer.js

@@ -7,7 +7,11 @@ 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 = './test-library/'
+const libPath = './test-library/';
+
+let libEntryPathes;
+
+let currentlyPlaying;
 
 // const player = new Audio(url);
 
@@ -24,14 +28,52 @@ async function getLibraryFiles() {
 document.addEventListener('DOMContentLoaded', async () => {
     const libContentDisplay = document.getElementById('libContents');
 
-    let files = await getLibraryFiles();
+    libEntryPathes = await getLibraryFiles();
-    console.log(files);
+    console.log(libEntryPathes);
 
-    for (const file_i in files) {
+    for (const file_i in libEntryPathes) {
-        libContentDisplay.innerHTML += `<div class="LibEntry">${files[file_i]}</div>`;
+        libContentDisplay.innerHTML += `<div class="LibEntry" id="${file_i}">${libEntryPathes[file_i]}</div>`;
     }
 });
 
+document.addEventListener('DOMContentLoaded', () => {
+    const libContentDisplay = document.getElementById('libContents');
+
+    libContentDisplay.addEventListener('click', (e) => {
+        if (e.target.className == 'LibEntry') {
+            console.log(e);
+            let file_id = parseInt(e.target.id);
+            let audioPath = '../' + libPath + libEntryPathes[file_id];
+
+            console.log(`Audio Path: ${audioPath}`);
+
+            currentlyPlaying = new Audio(audioPath);
+            currentlyPlaying.play()
+                .catch(e => {
+                    console.error(`Audio failed to play with ${e}`);
+                });
+        }
+    });
+});
+
+document.addEventListener('DOMContentLoaded', () => {
+    document.getElementById('play').addEventListener('click', playMedia);
+    document.getElementById('pause').addEventListener('click', pauseMedia);
+});
+
+
+function pauseMedia() {
+    if (currentlyPlaying !== null) {
+        currentlyPlaying.pause();
+    }
+}
+
+function playMedia() {
+    if (currentlyPlaying !== null) {
+        currentlyPlaying.play();
+    }
+}
+
 // fromUrl(url).then((tags) => {
 //     console.log(tags);
 // });