feat: add music-metadata to pull duration and container type

Author: Arcath

app/lib/utils.ts

@@ -23,3 +23,15 @@ export const pageTitle = (...parts: string[]) => {
 export const docsLink = (path: string) => {
   return `${DOCS_URL}${path}`
 }
+
+export const getSecondsAsTime = (seconds: number) => {
+  let secondTime = seconds
+  let minuteTime = Math.floor(secondTime / 60)
+
+  secondTime %= 60
+  minuteTime %= 60
+
+  return [minuteTime.toString(), secondTime.toString().padStart(2, '0')].join(
+    ':'
+  )
+}

app/routes/sounds.$sound._index.tsx

@@ -4,10 +4,12 @@ import {
   redirect
 } from '@remix-run/node'
 import {useLoaderData, useNavigate} from '@remix-run/react'
+import {parseFile} from 'music-metadata'
+import path from 'path'
 
 import {getPrisma} from '~/lib/prisma.server'
 import {checkSession} from '~/lib/session'
-import {pageTitle} from '~/lib/utils'
+import {pageTitle, getSecondsAsTime} from '~/lib/utils'
 import {Page, Actions} from '~/lib/ui'
 
 export const meta: MetaFunction<typeof loader> = ({data}) => {
@@ -27,6 +29,24 @@ export const loader = async ({request, params}: LoaderFunctionArgs) => {
     where: {id: params.sound}
   })
 
+  if (sound.audioContainer === '' || sound.duration === 0) {
+    console.log('updating meta data')
+    const meta = await parseFile(
+      path.join(process.cwd(), 'public', 'sounds', sound.fileName)
+    )
+
+    await prisma.audio.update({
+      where: {id: sound.id},
+      data: {
+        duration: meta.format.duration,
+        audioContainer: meta.format.container
+      }
+    })
+
+    sound.audioContainer = meta.format.container ? meta.format.container : ''
+    sound.duration = meta.format.duration ? meta.format.duration : 0
+  }
+
   return {sound}
 }
 
@@ -41,6 +61,8 @@ const Sound = () => {
           <source src={`/sounds/${sound.fileName}`} type="audio/mp3" />
         </audio>
         <p>Ringer Wire: {sound.ringerWire}</p>
+        <p>Duration: {getSecondsAsTime(sound.duration)}</p>
+        <p>Audio Type: {sound.audioContainer}</p>
       </div>
       <Actions
         actions={[

app/routes/sounds.add-tts.tsx

@@ -10,6 +10,7 @@ import path from 'path'
 import fs from 'fs'
 import {finished} from 'stream/promises'
 import {Readable} from 'stream'
+import {parseFile} from 'music-metadata'
 
 import {getPrisma} from '~/lib/prisma.server'
 import {updateSounders} from '~/lib/update-sounders.server'
@@ -76,9 +77,17 @@ export const action = async ({request}: ActionFunctionArgs) => {
     Readable.fromWeb(downloadResponse!.body as any).pipe(downloadStream)
   )
 
+  const meta = await parseFile(
+    path.join(process.cwd(), 'public', 'sounds', `${sound.id}.wav`)
+  )
+
   await prisma.audio.update({
     where: {id: sound.id},
-    data: {fileName: `${sound.id}.wav`}
+    data: {
+      fileName: `${sound.id}.wav`,
+      duration: meta.format.duration,
+      audioContainer: meta.format.container
+    }
   })
 
   await updateSounders()

app/routes/sounds.add.tsx

@@ -12,6 +12,7 @@ import {useNavigate} from '@remix-run/react'
 import {invariant} from '@arcath/utils'
 import path from 'path'
 import fs from 'fs'
+import {parseFile} from 'music-metadata'
 
 import {getPrisma} from '~/lib/prisma.server'
 import {checkSession} from '~/lib/session'
@@ -87,9 +88,22 @@ export const action = async ({request}: ActionFunctionArgs) => {
     )
   )
 
+  const meta = await parseFile(
+    path.join(
+      process.cwd(),
+      'public',
+      'sounds',
+      `${sound.id}${path.extname(fileData.filepath)}`
+    )
+  )
+
   await prisma.audio.update({
     where: {id: sound.id},
-    data: {fileName: `${sound.id}${path.extname(fileData.filepath)}`}
+    data: {
+      fileName: `${sound.id}${path.extname(fileData.filepath)}`,
+      duration: meta.format.duration,
+      audioContainer: meta.format.container
+    }
   })
 
   await updateSounders()

package-lock.json

@@ -29,6 +29,7 @@
     "isbot": "^5.1.30",
     "jsonwebtoken": "^9.0.2",
     "mkdirp": "^3.0.1",
+    "music-metadata": "^11.9.0",
     "prisma": "^6.15.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package.json

@@ -0,0 +1,16 @@
+-- RedefineTables
+PRAGMA defer_foreign_keys=ON;
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_Audio" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "name" TEXT NOT NULL,
+    "fileName" TEXT NOT NULL,
+    "ringerWire" TEXT NOT NULL DEFAULT '',
+    "duration" INTEGER NOT NULL DEFAULT 0,
+    "audioContainer" TEXT NOT NULL DEFAULT ''
+);
+INSERT INTO "new_Audio" ("fileName", "id", "name", "ringerWire") SELECT "fileName", "id", "name", "ringerWire" FROM "Audio";
+DROP TABLE "Audio";
+ALTER TABLE "new_Audio" RENAME TO "Audio";
+PRAGMA foreign_keys=ON;
+PRAGMA defer_foreign_keys=OFF;