Streaming and Caching with Supabase

1
[storage.buckets.audio]
2
public = false
3
file_size_limit = "50MiB"
4
allowed_mime_types = ["audio/mp3"]
5
objects_path = "./audio"

1
[edge_runtime]
2
policy = "per_worker"

1
# Find / create an API key at https://elevenlabs.io/app/settings/api-keys
2
ELEVENLABS_API_KEY=your_api_key

1
// Setup type definitions for built-in Supabase Runtime APIs
2
import 'jsr:@supabase/functions-js/edge-runtime.d.ts';
3
import { createClient } from 'jsr:@supabase/supabase-js@2';
4
import { ElevenLabsClient } from 'npm:elevenlabs';
5
import * as hash from 'npm:object-hash';
6
7
const supabase = createClient(
8
  Deno.env.get('SUPABASE_URL')!,
9
  Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!
10
);
11
12
const client = new ElevenLabsClient({
13
  apiKey: Deno.env.get('ELEVENLABS_API_KEY'),
14
});
15
16
// Upload audio to Supabase Storage in a background task
17
async function uploadAudioToStorage(stream: ReadableStream, requestHash: string) {
18
  const { data, error } = await supabase.storage
19
    .from('audio')
20
    .upload(`${requestHash}.mp3`, stream, {
21
      contentType: 'audio/mp3',
22
    });
23
24
  console.log('Storage upload result', { data, error });
25
}
26
27
Deno.serve(async (req) => {
28
  // To secure your function for production, you can for example validate the request origin,
29
  // or append a user access token and validate it with Supabase Auth.
30
  console.log('Request origin', req.headers.get('host'));
31
  const url = new URL(req.url);
32
  const params = new URLSearchParams(url.search);
33
  const text = params.get('text');
34
  const voiceId = params.get('voiceId') ?? 'JBFqnCBsd6RMkjVDRZzb';
35
36
  const requestHash = hash.MD5({ text, voiceId });
37
  console.log('Request hash', requestHash);
38
39
  // Check storage for existing audio file
40
  const { data } = await supabase.storage.from('audio').createSignedUrl(`${requestHash}.mp3`, 60);
41
42
  if (data) {
43
    console.log('Audio file found in storage', data);
44
    const storageRes = await fetch(data.signedUrl);
45
    if (storageRes.ok) return storageRes;
46
  }
47
48
  if (!text) {
49
    return new Response(JSON.stringify({ error: 'Text parameter is required' }), {
50
      status: 400,
51
      headers: { 'Content-Type': 'application/json' },
52
    });
53
  }
54
55
  try {
56
    console.log('ElevenLabs API call');
57
    const response = await client.textToSpeech.convertAsStream(voiceId, {
58
      output_format: 'mp3_44100_128',
59
      model_id: 'eleven_multilingual_v2',
60
      text,
61
    });
62
63
    const stream = new ReadableStream({
64
      async start(controller) {
65
        for await (const chunk of response) {
66
          controller.enqueue(chunk);
67
        }
68
        controller.close();
69
      },
70
    });
71
72
    // Branch stream to Supabase Storage
73
    const [browserStream, storageStream] = stream.tee();
74
75
    // Upload to Supabase Storage in the background
76
    EdgeRuntime.waitUntil(uploadAudioToStorage(storageStream, requestHash));
77
78
    // Return the streaming response immediately
79
    return new Response(browserStream, {
80
      headers: {
81
        'Content-Type': 'audio/mpeg',
82
      },
83
    });
84
  } catch (error) {
85
    console.log('error', { error });
86
    return new Response(JSON.stringify({ error: error.message }), {
87
      status: 500,
88
      headers: { 'Content-Type': 'application/json' },
89
    });
90
  }
91
});