feat: add mp3 support

Author: joshunrau

apps/playground/src/components/Editor/Editor.tsx

@@ -146,6 +146,7 @@ export const Editor = () => {
       <FileUploadDialog
         accept={{
           'application/json': ['.json'],
+          'audio/mpeg': ['.mp3'],
           'image/jpeg': ['.jpg', '.jpeg'],
           'image/png': ['.png'],
           'image/webp': ['.webp'],

apps/playground/src/components/Editor/EditorFileIcon.tsx

@@ -100,6 +100,14 @@ export const EditorFileIcon = ({ filename }: EditorFileIconProps) => {
             />
           </svg>
         ))
+        .with('.mp3', () => (
+          <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2m6 10h-4v8a4 4 0 1 1-4-4 3.96 3.96 0 0 1 2 .555V8h6Z"
+              fill="#ef5350"
+            />
+          </svg>
+        ))
         .with('.html', () => (
           <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
             <path

apps/playground/src/instruments/index.ts

@@ -13,7 +13,7 @@ const textFiles: { [key: string]: string } = import.meta.glob('./**/*.{css,js,js
   query: '?raw'
 });
 
-const binaryFiles: { [key: string]: string } = import.meta.glob('./**/*.{jpg,jpeg,png,webp,mp4}', {
+const binaryFiles: { [key: string]: string } = import.meta.glob('./**/*.{jpg,jpeg,png,webp,mp4,mp3}', {
   eager: true,
   import: 'default',
   query: '?url'

apps/playground/src/utils/file.ts

@@ -11,7 +11,7 @@ export function inferFileType(filename: string): FileType | null {
     .with('.css', () => 'css' as const)
     .with(P.union('.js', '.jsx'), () => 'javascript' as const)
     .with(P.union('.ts', '.tsx'), () => 'typescript' as const)
-    .with(P.union('.jpeg', '.jpg', '.png', '.webp', '.mp4'), () => 'asset' as const)
+    .with(P.union('.jpeg', '.jpg', '.png', '.webp', '.mp3', '.mp4'), () => 'asset' as const)
     .with(P.union('.html', '.svg'), () => 'html' as const)
     .with('.json', () => 'json' as const)
     .with(null, () => null)
@@ -31,7 +31,7 @@ export function editorFileToInput(file: EditorFile): BundlerInput {
 }
 
 export function isBase64EncodedFileType(filename: string) {
-  return ['.jpeg', '.jpg', '.mp4', '.png', '.webp'].includes(extractInputFileExtension(filename)!);
+  return ['.jpeg', '.jpg', '.mp3', '.mp4', '.png', '.webp'].includes(extractInputFileExtension(filename)!);
 }
 
 export function resolveIndexFile(files: EditorFile[]) {

packages/instrument-bundler/src/types.ts

@@ -6,6 +6,7 @@ export type BundlerInputFileExtension =
   | '.js'
   | '.json'
   | '.jsx'
+  | '.mp3'
   | '.mp4'
   | '.png'
   | '.svg'

packages/instrument-bundler/src/utils.ts

@@ -6,7 +6,7 @@ import type { BundlerInputFileExtension } from './types.js';
 import type { Loader } from './vendor/esbuild.js';
 
 export function extractInputFileExtension(filename: string) {
-  const ext = /\.(css|html|jpeg|jpg|js|jsx|json|mp4|png|svg|ts|tsx|webp)$/i.exec(filename)?.[0];
+  const ext = /\.(css|html|jpeg|jpg|js|jsx|json|mp3|mp4|png|svg|ts|tsx|webp)$/i.exec(filename)?.[0];
   return (ext ?? null) as BundlerInputFileExtension | null;
 }
 
@@ -19,7 +19,7 @@ export function inferLoader(filename: string): Loader {
     .with('.json', () => 'json' as const)
     .with('.ts', () => 'ts' as const)
     .with('.tsx', () => 'tsx' as const)
-    .with(P.union('.jpeg', '.jpg', '.png', '.svg', '.webp', '.mp4'), () => 'dataurl' as const)
+    .with(P.union('.jpeg', '.jpg', '.png', '.svg', '.webp', '.mp3', '.mp4'), () => 'dataurl' as const)
     .with(null, () => {
       throw new InstrumentBundlerError(`Cannot infer loader due to unexpected extension for filename: ${filename}`);
     })

runtime/v1/env.d.ts

@@ -33,6 +33,11 @@ declare module '*.mp4' {
   export default src;
 }
 
+declare module '*.mp3' {
+  const src: string;
+  export default src;
+}
+
 declare module '*.json' {
   const src: any;
   export default src;