ElevenLabs Text-to-Speech Streaming Custom Action

Hi FlutterFlow community! I've created a custom action that enables streaming Text-to-Speech using ElevenLabs' API. This action converts text to natural-sounding speech and plays it immediately.

Features:

Streams audio playback (starts playing before full download)
Supports voice selection via voiceId
Adjustable stability and similarity boost parameters
Simple boolean return value for success/failure
Plays spoken output automatically

Code:

// Automatic FlutterFlow imports
import '/backend/schema/structs/index.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/actions/index.dart'; // Imports other custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom action code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:just_audio/just_audio.dart';

Future<bool> playAudioFromElevenLabs(
  String text,
  String voiceId,
  String apiKey,
  double stability,
  double similarityBoost,
) async {
  final player = AudioPlayer();

  try {
    if (text.isEmpty || voiceId.isEmpty || apiKey.isEmpty) {
      return false;
    }

    final url =
        Uri.parse('https://api.elevenlabs.io/v1/text-to-speech/$voiceId');

    final response = await http.post(
      url,
      headers: {
        'xi-api-key': apiKey,
        'Content-Type': 'application/json',
        'Accept': 'audio/mpeg',
      },
      body: jsonEncode({
        'text': text,
        'voice_settings': {
          'stability': stability,
          'similarity_boost': similarityBoost
        }
      }),
    );

    if (response.statusCode == 200) {
      final audioSource = AudioSource.uri(
        Uri.dataFromBytes(
          response.bodyBytes,
          mimeType: 'audio/mpeg',
        ),
      );
      await player.setAudioSource(audioSource);
      await player.play();
      return true;
    } else {
      print('Error: ${response.body}');
      return false;
    }
  } catch (e) {
    print('Error: $e');
    return false;
  }
}

Usage:

Add the just_audio package to your pubspec.yaml:

just_audio: ^0.9.40

Create a new custom action and paste the code
Use in your action sequence with these parameters:
- text: The text you want to convert to speech
- voiceId: Your ElevenLabs voice ID
- apiKey: Your ElevenLabs API key (don't forget to save to App State variables as as secured persisted variable - never hard code it!)
- stability: Voice stability (0.0 to 1.0)
- similarityBoost: Voice similarity boost (0.0 to 1.0)

The action returns true if successful, false if there's an error. And plays the stream automatically.

Hope this helps someone! Let me know if you have any questions or suggestions for improvement.