Fix the thing

.github/workflows/build-pages.yml

@@ -34,7 +34,7 @@ jobs:
         run: npm ci
 
       - name: Build the project
-        run: npm run build
+        run: npm run build -- --base=/funk-with-iiif/
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3

index.html

@@ -14,7 +14,7 @@
   <button id="play-button" type="button">Play</button>
   <div class="container">
     <div class="audio-container">
-      <audio class="audio-player" controls src="/iiif.mp3"></audio>
+      <audio class="audio-player" controls src="./iiif.mp3"></audio>
     </div>
     <div class="visualizer"></div>
     <div class="lyrics honk-wonk"></div>

src/lyrics.js

@@ -18,8 +18,6 @@ export async function loadVTT(url) {
     // now get parts of speech
     jsonLyrics.forEach((cue) => {
       // get relevant words and add to JSON
-      // const words = new Lexer().lex(cue.text);
-      // const taggedWords = new POSTagger().tag(words);
       const taggedWords = wink.tagSentence(cue.text);
       cue.words = cue.words || [];
       cue.words.push(

src/main.js

@@ -1,5 +1,4 @@
 import "../styles.css";
-
 import { loadVTT } from "./lyrics";
 import { addImage } from "./images";
 import { initFunkyIIIF } from './audio';
@@ -17,7 +16,7 @@ function parseTimecode(timecode) {
 // Init the audio player.
 document.addEventListener("DOMContentLoaded", async (event) => {
 	// lyrics data.
-	const lyricsData = await loadVTT("iiif.vtt");
+	const lyricsData = await loadVTT("/iiif.vtt");
 
 	const audioElement = document.querySelector(".audio-player");
 	const lyricsContainer = document.querySelector(".lyrics");