Working m4b

Dockerfile

@@ -1,6 +1,9 @@
 # Use Node.js slim image
 FROM node:slim
 
+# Add ffmpeg
+RUN apt-get update && apt-get install -y ffmpeg
+
 # Create app directory
 WORKDIR /app
 

src/app/api/audio/convert/route.ts

@@ -0,0 +1,192 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { spawn } from 'child_process';
+import { writeFile, readFile, mkdir, unlink, rmdir } from 'fs/promises';
+import { existsSync } from 'fs';
+import { join } from 'path';
+import { randomUUID } from 'crypto';
+
+interface Chapter {
+  title: string;
+  buffer: number[];
+}
+
+interface ConversionRequest {
+  chapters: Chapter[];
+}
+
+async function getAudioDuration(filePath: string): Promise<number> {
+  return new Promise((resolve, reject) => {
+    const ffprobe = spawn('ffprobe', [
+      '-i', filePath,
+      '-show_entries', 'format=duration',
+      '-v', 'quiet',
+      '-of', 'csv=p=0'
+    ]);
+
+    let output = '';
+    ffprobe.stdout.on('data', (data) => {
+      output += data.toString();
+    });
+
+    ffprobe.on('close', (code) => {
+      if (code === 0) {
+        const duration = parseFloat(output.trim());
+        resolve(duration);
+      } else {
+        reject(new Error(`ffprobe process exited with code ${code}`));
+      }
+    });
+
+    ffprobe.on('error', (err) => {
+      reject(err);
+    });
+  });
+}
+
+async function runFFmpeg(args: string[]): Promise<void> {
+  return new Promise<void>((resolve, reject) => {
+    const ffmpeg = spawn('ffmpeg', args);
+
+    ffmpeg.stderr.on('data', (data) => {
+      console.error(`ffmpeg stderr: ${data}`);
+    });
+
+    ffmpeg.on('close', (code) => {
+      if (code === 0) {
+        resolve();
+      } else {
+        reject(new Error(`FFmpeg process exited with code ${code}`));
+      }
+    });
+
+    ffmpeg.on('error', (err) => {
+      reject(err);
+    });
+  });
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    // Parse the request body
+    const data: ConversionRequest = await request.json();
+    
+    // Create temp directory if it doesn't exist
+    const tempDir = join(process.cwd(), 'temp');
+    if (!existsSync(tempDir)) {
+      await mkdir(tempDir);
+    }
+
+    // Generate unique filenames
+    const id = randomUUID();
+    const outputPath = join(tempDir, `${id}.m4b`);
+    const metadataPath = join(tempDir, `${id}.txt`);
+    const intermediateDir = join(tempDir, `${id}-intermediate`);
+    
+    // Create intermediate directory
+    if (!existsSync(intermediateDir)) {
+      await mkdir(intermediateDir);
+    }
+
+    // First, write each chapter to a temporary file and get its duration
+    const chapterFiles: { path: string; title: string; duration: number }[] = [];
+    let currentTime = 0;
+
+    for (let i = 0; i < data.chapters.length; i++) {
+      const chapter = data.chapters[i];
+      const inputPath = join(intermediateDir, `${i}-input.aac`);
+      const outputPath = join(intermediateDir, `${i}.wav`);
+      
+      // Write the chapter audio to a temp file
+      await writeFile(inputPath, Buffer.from(new Uint8Array(chapter.buffer)));
+      
+      // Convert to WAV with consistent format (this helps with timestamp issues)
+      await runFFmpeg([
+        '-i', inputPath,
+        '-acodec', 'pcm_s16le',
+        '-ar', '44100',
+        '-ac', '2',
+        outputPath
+      ]);
+      
+      // Get the duration of this chapter
+      const duration = await getAudioDuration(outputPath);
+      
+      chapterFiles.push({
+        path: outputPath,
+        title: chapter.title,
+        duration
+      });
+
+      // Clean up input file
+      await unlink(inputPath).catch(console.error);
+    }
+
+    // Create chapter metadata file
+    const metadata: string[] = [];
+    metadata.push(
+      `title=Kokoro Audiobook`,
+      `artist=KokoroTTS`,
+    );
+    
+    // Calculate chapter timings based on actual durations
+    chapterFiles.forEach((chapter, index) => {
+      const startMs = Math.floor(currentTime * 1000);
+      currentTime += chapter.duration;
+      const endMs = Math.floor(currentTime * 1000);
+
+      metadata.push(
+        `[CHAPTER]`,
+        `TIMEBASE=1/1000`,
+        `START=${startMs}`,
+        `END=${endMs}`,
+        `title=${chapter.title}`
+      );
+    });
+    
+    await writeFile(metadataPath, ';FFMETADATA1\n' + metadata.join('\n'));
+
+    // Create list file for concat
+    const listPath = join(tempDir, `${id}-list.txt`);
+    await writeFile(
+      listPath,
+      chapterFiles.map(f => `file '${f.path}'`).join('\n')
+    );
+
+    // Combine all files into a single M4B
+    await runFFmpeg([
+      '-f', 'concat',
+      '-safe', '0',
+      '-i', listPath,
+      '-i', metadataPath,
+      '-map_metadata', '1',
+      '-c:a', 'aac',
+      '-b:a', '192k',
+      '-movflags', '+faststart',
+      outputPath
+    ]);
+
+    // Read the converted file
+    const m4bData = await readFile(outputPath);
+
+    // Clean up temp files
+    await Promise.all([
+      ...chapterFiles.map(f => unlink(f.path)),
+      unlink(metadataPath),
+      unlink(listPath),
+      unlink(outputPath),
+      rmdir(intermediateDir)
+    ].map(p => p.catch(console.error)));
+
+    return new NextResponse(m4bData, {
+      headers: {
+        'Content-Type': 'audio/mp4',
+      },
+    });
+  } catch (error) {
+    console.error('Error converting audio:', error);
+    return NextResponse.json(
+      { error: 'Failed to convert audio format' }, 
+      { status: 500 }
+    );
+  }
+}

src/app/api/tts/route.ts

@@ -6,8 +6,8 @@ export async function POST(req: NextRequest) {
     // Get API credentials from headers or fall back to environment variables
     const openApiKey = req.headers.get('x-openai-key') || process.env.API_KEY || 'none';
     const openApiBaseUrl = req.headers.get('x-openai-base-url') || process.env.API_BASE;
-    const { text, voice, speed } = await req.json();
+    const { text, voice, speed, format } = await req.json();
-    console.log('Received TTS request:', text, voice, speed);
+    console.log('Received TTS request:', text, voice, speed, format);
 
     if (!openApiKey) {
       return NextResponse.json({ error: 'Missing OpenAI API key' }, { status: 401 });
@@ -29,6 +29,7 @@ export async function POST(req: NextRequest) {
       voice: voice as "alloy",
       input: text,
       speed: speed,
+      response_format: format === 'aac' ? 'aac' : 'mp3',
     }, { signal: req.signal }); // Pass the abort signal to OpenAI client
 
     // Get the audio data as array buffer
@@ -36,7 +37,12 @@ export async function POST(req: NextRequest) {
     const stream = response.body;
 
     // Return audio data with appropriate headers
-    return new NextResponse(stream);
+    const contentType = format === 'aac' ? 'audio/aac' : 'audio/mpeg';
+    return new NextResponse(stream, {
+      headers: {
+        'Content-Type': contentType
+      }
+    });
   } catch (error) {
     // Check if this was an abort error
     if (error instanceof Error && error.name === 'AbortError') {

src/components/DocumentSettings.tsx

@@ -21,21 +21,27 @@ const viewTypes = [
   { id: 'scroll', name: 'Continuous Scroll' },
 ];
 
+const audioFormats = [
+  { id: 'mp3', name: 'MP3' },
+  { id: 'm4b', name: 'M4B' },
+];
+
 export function DocumentSettings({ isOpen, setIsOpen, epub }: DocViewSettingsProps) {
-  const { 
+  const {
-    viewType, 
+    viewType,
-    skipBlank, 
+    skipBlank,
-    epubTheme, 
+    epubTheme,
     headerMargin,
     footerMargin,
     leftMargin,
     rightMargin,
-    updateConfigKey 
+    updateConfigKey
   } = useConfig();
   const { createFullAudioBook } = useEPUB();
   const { createFullAudioBook: createPDFAudioBook } = usePDF();
   const [progress, setProgress] = useState(0);
   const [isGenerating, setIsGenerating] = useState(false);
+  const [audioFormat, setAudioFormat] = useState<'mp3' | 'm4b'>('mp3');
   const [localMargins, setLocalMargins] = useState({
     header: headerMargin,
     footer: footerMargin,
@@ -80,18 +86,21 @@ export function DocumentSettings({ isOpen, setIsOpen, epub }: DocViewSettingsPro
     try {
       const audioBuffer = epub ? await createFullAudioBook(
         (progress) => setProgress(progress),
-        abortControllerRef.current.signal
+        abortControllerRef.current.signal,
+        audioFormat
       ) : await createPDFAudioBook(
         (progress) => setProgress(progress),
-        abortControllerRef.current.signal
+        abortControllerRef.current.signal,
+        audioFormat
       );
 
       // Create and trigger download
-      const blob = new Blob([audioBuffer], { type: 'audio/mp3' });
+      const mimeType = audioFormat === 'mp3' ? 'audio/mp3' : 'audio/mp4';
+      const blob = new Blob([audioBuffer], { type: mimeType });
       const url = URL.createObjectURL(blob);
       const a = document.createElement('a');
       a.href = url;
-      a.download = 'audiobook.mp3';
+      a.download = `audiobook.${audioFormat}`;
       document.body.appendChild(a);
       a.click();
 
@@ -107,7 +116,7 @@ export function DocumentSettings({ isOpen, setIsOpen, epub }: DocViewSettingsPro
       setProgress(0);
       abortControllerRef.current = null;
     }
-  }, [createFullAudioBook, createPDFAudioBook, epub]);
+  }, [createFullAudioBook, createPDFAudioBook, epub, audioFormat]);
 
   const handleCancel = () => {
     if (abortControllerRef.current) {
@@ -142,46 +151,69 @@ export function DocumentSettings({ isOpen, setIsOpen, epub }: DocViewSettingsPro
               leaveTo="opacity-0 scale-95"
             >
               <DialogPanel className="w-full max-w-md transform rounded-2xl bg-base p-6 text-left align-middle shadow-xl transition-all">
-                <div className="space-y-4">
+                {isDev && <div className="space-y-2">
-                  {isDev && <div className="space-y-2 pb-2">
+                  {!isGenerating ? (
-                    {!isGenerating ? (
+                    <div className="flex flex-col space-y-2">
                       <Button
                         type="button"
                         className="w-full inline-flex justify-center rounded-lg bg-accent px-4 py-2 text-sm 
-                                       font-medium text-background hover:opacity-95 focus:outline-none 
+                                         font-medium text-background hover:opacity-95 focus:outline-none 
-                                       focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2
+                                         focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2
-                                       transform transition-transform duration-200 ease-in-out hover:scale-[1.04]"
+                                         transform transition-transform duration-200 ease-in-out hover:scale-[1.04]"
                         onClick={handleStartGeneration}
                       >
-                        Export to audiobook.mp3 (experimental)
+                        Export to {audioFormat.toUpperCase()} (experimental)
                       </Button>
-                    ) : (
+                      <Listbox value={audioFormat} onChange={(format) => setAudioFormat(format as 'mp3' | 'm4b')}>
-                      <div className="space-y-2">
+                        <div className="relative flex self-end">
-                        <div className="w-full bg-background rounded-lg overflow-hidden">
+                          <ListboxButton className="flex self-end justify-center items-center space-x-0.5 sm:space-x-1 bg-transparent text-foreground text-xs sm:text-sm focus:outline-none cursor-pointer hover:bg-offbase rounded pl-1.5 sm:pl-2 pr-0.5 sm:pr-1 py-0.5 sm:py-1">
-                          <div
+                            <span>{audioFormat === 'mp3' ? 'MP3' : 'M4B (Audiobook)'}</span>
-                            className="h-2 bg-accent transition-all duration-300 ease-in-out"
+                            <ChevronUpDownIcon className="h-2.5 w-2.5 sm:h-3 sm:w-3" />
-                            style={{ width: `${progress}%` }}
+                          </ListboxButton>
-                          />
+                          <ListboxOptions anchor='bottom end' className="absolute z-50 w-28 sm:w-32 overflow-auto rounded-lg bg-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                            {audioFormats.map((format) => (
+                              <ListboxOption
+                                key={format.id}
+                                value={format.id}
+                                className={({ active, selected }) =>
+                                  `relative cursor-pointer select-none py-0.5 px-1.5 sm:py-2 sm:px-3 ${active ? 'bg-offbase' : ''} ${selected ? 'font-medium' : ''}`
+                                }
+                              >
+                                <span className="text-xs sm:text-sm">{format.name}</span>
+                              </ListboxOption>
+                            ))}
+                          </ListboxOptions>
                         </div>
-                        <div className="flex justify-between items-center text-sm text-muted">
+                      </Listbox>
-                          <span>{Math.round(progress)}% complete</span>
+                    </div>
-                          <Button
+                  ) : (
-                            type="button"
+                    <div className="space-y-2 mb-4">
-                            className="inline-flex justify-center rounded-lg px-2.5 py-1 text-sm 
+                      <div className="w-full bg-background rounded-lg overflow-hidden">
+                        <div
+                          className="h-2 bg-accent transition-all duration-300 ease-in-out"
+                          style={{ width: `${progress}%` }}
+                        />
+                      </div>
+                      <div className="flex justify-between items-center text-sm text-muted">
+                        <span>{Math.round(progress)}% complete</span>
+                        <Button
+                          type="button"
+                          className="inline-flex justify-center rounded-lg px-2.5 py-1 text-sm 
                                     font-medium text-foreground hover:text-accent focus:outline-none 
                                     focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2
                                     transform transition-transform duration-200 ease-in-out hover:scale-[1.02]"
-                            onClick={handleCancel}
+                          onClick={handleCancel}
-                          >
+                        >
-                            Cancel and download
+                          Cancel and download
-                          </Button>
+                        </Button>
-                        </div>
                       </div>
-                    )}
+                    </div>
-                  </div>}
+                  )}
+                </div>}
+                <div className="space-y-4">
                   {!epub && <div className="space-y-6">
-                    <div className="mt-4 space-y-2">
+                    <div className="space-y-2">
-                      <label className="block text-sm font-medium text-foreground mb-4">
+                      <label className="block text-sm font-medium text-foreground">
                         Text extraction margins
                       </label>
                       <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
@@ -204,7 +236,7 @@ export function DocumentSettings({ isOpen, setIsOpen, epub }: DocViewSettingsPro
                             className="w-full bg-offbase rounded-lg appearance-none cursor-pointer accent-accent [&::-webkit-slider-runnable-track]:bg-offbase [&::-webkit-slider-runnable-track]:rounded-lg [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-accent [&::-moz-range-track]:bg-offbase [&::-moz-range-track]:rounded-lg [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-accent"
                           />
                         </div>
-                        
+
                         {/* Footer Margin */}
                         <div className="space-y-1">
                           <div className="flex justify-between">
@@ -323,7 +355,7 @@ export function DocumentSettings({ isOpen, setIsOpen, epub }: DocViewSettingsPro
 
                   </div>}
 
-                  <div className="space-y-2">
+                  <div className="space-y-1">
                     <label className="flex items-center space-x-2">
                       <input
                         type="checkbox"
@@ -338,7 +370,7 @@ export function DocumentSettings({ isOpen, setIsOpen, epub }: DocViewSettingsPro
                     </p>
                   </div>
                   {epub && (
-                    <div className="space-y-2">
+                    <div className="space-y-1">
                       <label className="flex items-center space-x-2">
                         <input
                           type="checkbox"

src/contexts/EPUBContext.tsx

@@ -29,7 +29,7 @@ interface EPUBContextType {
   setCurrentDocument: (id: string) => Promise<void>;
   clearCurrDoc: () => void;
   extractPageText: (book: Book, rendition: Rendition, shouldPause?: boolean) => Promise<string>;
-  createFullAudioBook: (onProgress: (progress: number) => void, signal?: AbortSignal) => Promise<ArrayBuffer>;
+  createFullAudioBook: (onProgress: (progress: number) => void, signal?: AbortSignal, format?: 'mp3' | 'm4b') => Promise<ArrayBuffer>;
   bookRef: RefObject<Book | null>;
   renditionRef: RefObject<Rendition | undefined>;
   tocRef: RefObject<NavItem[]>;
@@ -122,6 +122,10 @@ export function EPUBProvider({ children }: { children: ReactNode }) {
       const rangeCfi = createRangeCfi(start.cfi, end.cfi);
 
       const range = await book.getRange(rangeCfi);
+      if (!range) {
+        console.warn('Failed to get range from CFI:', rangeCfi);
+        return '';
+      }
       const textContent = range.toString().trim();
 
       setTTSText(textContent, shouldPause);
@@ -182,32 +186,34 @@ export function EPUBProvider({ children }: { children: ReactNode }) {
    */
   const createFullAudioBook = useCallback(async (
     onProgress: (progress: number) => void,
-    signal?: AbortSignal
+    signal?: AbortSignal,
+    format: 'mp3' | 'm4b' = 'mp3'
   ): Promise<ArrayBuffer> => {
     try {
-      // Get all text content from the book
       const textArray = await extractBookText();
       if (!textArray.length) throw new Error('No text content found in book');
 
-      // Create an array to store all audio chunks
+      const audioChunks: { buffer: ArrayBuffer; title?: string; startTime: number }[] = [];
-      const audioChunks: ArrayBuffer[] = [];
       let processedSections = 0;
       const totalSections = textArray.length;
+      let currentTime = 0;
 
-      // Process each section of text
+      // Get TOC for chapter titles if available
+      const chapters = tocRef.current || [];
+      const spine = bookRef.current?.spine;
+      
       for (const text of textArray) {
-        // Check for cancellation
         if (signal?.aborted) {
-          const partialBuffer = combineAudioChunks(audioChunks);
+          const partialBuffer = await combineAudioChunks(audioChunks, format);
           return partialBuffer;
         }
 
-        if (!text.trim()) {
-          processedSections++;
-          continue;
-        }
-
         try {
+          if (!text.trim()) {
+            processedSections++;
+            continue;
+          }
+
           const ttsResponse = await fetch('/api/tts', {
             method: 'POST',
             headers: {
@@ -218,8 +224,9 @@ export function EPUBProvider({ children }: { children: ReactNode }) {
               text: text.trim(),
               voice: voice,
               speed: voiceSpeed,
+              format: 'aac'
             }),
-            signal // Pass the AbortSignal to the fetch request
+            signal
           });
 
           if (!ttsResponse.ok) {
@@ -231,16 +238,46 @@ export function EPUBProvider({ children }: { children: ReactNode }) {
             throw new Error('Received empty audio buffer from TTS');
           }
 
-          audioChunks.push(audioBuffer);
+          // Find matching chapter title from TOC if available
+          let chapterTitle;
+          if (spine && chapters.length > 0) {
+            let spineIndex = processedSections;
+            let currentSpineHref: string | undefined;
+            
+            spine.each((item: any) => {
+              if (spineIndex === 0) {
+                currentSpineHref = item.href;
+              }
+              spineIndex--;
+            });
 
-          // Add a small pause between sections (1s of silence)
+            const matchingChapter = chapters.find(chapter => 
-          const silenceBuffer = new ArrayBuffer(48000);
+              chapter.href && currentSpineHref?.includes(chapter.href)
-          audioChunks.push(silenceBuffer);
+            );
+            chapterTitle = matchingChapter?.label || `Chapter ${processedSections + 1}`;
+          } else {
+            chapterTitle = `Chapter ${processedSections + 1}`;
+          }
+
+          audioChunks.push({
+            buffer: audioBuffer,
+            title: chapterTitle,
+            startTime: currentTime
+          });
+
+          // Add silence between sections
+          const silenceBuffer = new ArrayBuffer(48000); // 1 second of silence
+          audioChunks.push({
+            buffer: silenceBuffer,
+            startTime: currentTime + (audioBuffer.byteLength / 48000)
+          });
+
+          currentTime += (audioBuffer.byteLength + 48000) / 48000; // Update time including silence
 
         } catch (error) {
           if (error instanceof Error && error.name === 'AbortError') {
             console.log('TTS request aborted');
-            const partialBuffer = combineAudioChunks(audioChunks);
+            const partialBuffer = await combineAudioChunks(audioChunks, format);
             return partialBuffer;
           }
           console.error('Error processing section:', error);
@@ -254,26 +291,53 @@ export function EPUBProvider({ children }: { children: ReactNode }) {
         throw new Error('No audio was generated from the book content');
       }
 
-      return combineAudioChunks(audioChunks);
+      return combineAudioChunks(audioChunks, format);
     } catch (error) {
       console.error('Error creating audiobook:', error);
       throw error;
     }
   }, [extractBookText, apiKey, baseUrl, voice, voiceSpeed]);
 
-  // Helper function to combine audio chunks
+  const combineAudioChunks = async (
-  const combineAudioChunks = (audioChunks: ArrayBuffer[]): ArrayBuffer => {
+    audioChunks: { buffer: ArrayBuffer; title?: string; startTime: number }[],
-    const totalLength = audioChunks.reduce((acc, chunk) => acc + chunk.byteLength, 0);
+    format: 'mp3' | 'm4b'
+  ): Promise<ArrayBuffer> => {
+    if (format === 'm4b') {
+      // Convert to M4B format using the audio conversion API
+      const response = await fetch('/api/audio/convert', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          chapters: audioChunks
+            .filter(chunk => chunk.title) // Only include chunks with titles
+            .map(chunk => ({
+              title: chunk.title,
+              buffer: Array.from(new Uint8Array(chunk.buffer))
+            }))
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to convert audio to M4B format');
+      }
+
+      return response.arrayBuffer();
+    }
+
+    // For MP3, just concatenate the buffers
+    const totalLength = audioChunks.reduce((acc, chunk) => acc + chunk.buffer.byteLength, 0);
     const combinedBuffer = new Uint8Array(totalLength);
 
     let offset = 0;
     for (const chunk of audioChunks) {
-      combinedBuffer.set(new Uint8Array(chunk), offset);
+      combinedBuffer.set(new Uint8Array(chunk.buffer), offset);
-      offset += chunk.byteLength;
+      offset += chunk.buffer.byteLength;
     }
 
     return combinedBuffer.buffer;
-  };
+  }
 
   const setRendition = useCallback((rendition: Rendition) => {
     bookRef.current = rendition.book;

src/contexts/PDFContext.tsx

@@ -63,7 +63,7 @@ interface PDFContextType {
     stopAndPlayFromIndex: (index: number) => void,
     isProcessing: boolean
   ) => void;
-  createFullAudioBook: (onProgress: (progress: number) => void, signal?: AbortSignal) => Promise<ArrayBuffer>;
+  createFullAudioBook: (onProgress: (progress: number) => void, signal?: AbortSignal, format?: 'mp3' | 'm4b') => Promise<ArrayBuffer>;
 }
 
 // Create the context
@@ -187,31 +187,30 @@ export function PDFProvider({ children }: { children: ReactNode }) {
    * Creates a complete audiobook by processing all PDF pages through NLP and TTS
    * @param {Function} onProgress - Callback for progress updates
    * @param {AbortSignal} signal - Optional signal for cancellation
+   * @param {string} format - Optional format for the audiobook ('mp3' or 'm4b')
    * @returns {Promise<ArrayBuffer>} The complete audiobook as an ArrayBuffer
    */
   const createFullAudioBook = useCallback(async (
     onProgress: (progress: number) => void,
-    signal?: AbortSignal
+    signal?: AbortSignal,
+    format: 'mp3' | 'm4b' = 'mp3'
   ): Promise<ArrayBuffer> => {
     try {
       if (!pdfDocument) {
         throw new Error('No PDF document loaded');
       }
 
-      // Create an array to store all audio chunks
+      const audioChunks: { buffer: ArrayBuffer; title?: string; startTime: number }[] = [];
-      const audioChunks: ArrayBuffer[] = [];
       const totalPages = pdfDocument.numPages;
       let processedPages = 0;
+      let currentTime = 0;
 
-      // Process each page of the PDF
       for (let pageNum = 1; pageNum <= totalPages; pageNum++) {
-        // Check for cancellation
         if (signal?.aborted) {
-          const partialBuffer = combineAudioChunks(audioChunks);
+          const partialBuffer = await combineAudioChunks(audioChunks, format);
           return partialBuffer;
         }
 
-        // Extract text from the current page
         const text = await extractTextFromPDF(pdfDocument, pageNum, {
           header: headerMargin,
           footer: footerMargin,
@@ -235,6 +234,7 @@ export function PDFProvider({ children }: { children: ReactNode }) {
               text: text.trim(),
               voice: voice,
               speed: voiceSpeed,
+              format: 'aac'
             }),
             signal
           });
@@ -248,16 +248,26 @@ export function PDFProvider({ children }: { children: ReactNode }) {
             throw new Error('Received empty audio buffer from TTS');
           }
 
-          audioChunks.push(audioBuffer);
+          // Add chapter metadata for each page
+          audioChunks.push({
+            buffer: audioBuffer,
+            title: `Page ${pageNum}`,
+            startTime: currentTime
+          });
 
           // Add a small pause between pages (1s of silence)
           const silenceBuffer = new ArrayBuffer(48000);
-          audioChunks.push(silenceBuffer);
+          audioChunks.push({
+            buffer: silenceBuffer,
+            startTime: currentTime + (audioBuffer.byteLength / 48000)
+          });
+
+          currentTime += (audioBuffer.byteLength + 48000) / 48000;
 
         } catch (error) {
           if (error instanceof Error && error.name === 'AbortError') {
             console.log('TTS request aborted');
-            const partialBuffer = combineAudioChunks(audioChunks);
+            const partialBuffer = await combineAudioChunks(audioChunks, format);
             return partialBuffer;
           }
           console.error('Error processing page:', error);
@@ -271,26 +281,53 @@ export function PDFProvider({ children }: { children: ReactNode }) {
         throw new Error('No audio was generated from the PDF content');
       }
 
-      return combineAudioChunks(audioChunks);
+      return combineAudioChunks(audioChunks, format);
     } catch (error) {
       console.error('Error creating audiobook:', error);
       throw error;
     }
   }, [pdfDocument, headerMargin, footerMargin, leftMargin, rightMargin, apiKey, baseUrl, voice, voiceSpeed]);
 
-  // Helper function to combine audio chunks
+  const combineAudioChunks = async (
-  const combineAudioChunks = (audioChunks: ArrayBuffer[]): ArrayBuffer => {
+    audioChunks: { buffer: ArrayBuffer; title?: string; startTime: number }[],
-    const totalLength = audioChunks.reduce((acc, chunk) => acc + chunk.byteLength, 0);
+    format: 'mp3' | 'm4b'
+  ): Promise<ArrayBuffer> => {
+    if (format === 'm4b') {
+      // Convert to M4B format using the audio conversion API
+      const response = await fetch('/api/audio/convert', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          chapters: audioChunks
+            .filter(chunk => chunk.title) // Only include chunks with titles
+            .map(chunk => ({
+              title: chunk.title,
+              buffer: Array.from(new Uint8Array(chunk.buffer))
+            }))
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to convert audio to M4B format');
+      }
+
+      return response.arrayBuffer();
+    }
+
+    // For MP3, just concatenate the buffers
+    const totalLength = audioChunks.reduce((acc, chunk) => acc + chunk.buffer.byteLength, 0);
     const combinedBuffer = new Uint8Array(totalLength);
 
     let offset = 0;
     for (const chunk of audioChunks) {
-      combinedBuffer.set(new Uint8Array(chunk), offset);
+      combinedBuffer.set(new Uint8Array(chunk.buffer), offset);
-      offset += chunk.byteLength;
+      offset += chunk.buffer.byteLength;
     }
 
     return combinedBuffer.buffer;
-  };
+  }
 
   // Context value memoization
   const contextValue = useMemo(