TTS

pixl kann Texte von einer Stimme vorlesen lassen. Das Audio erzeugt pixl, abgespielt wird es in deinen Overlays. Dafür reichen ein paar Zeilen mit dem SDK.

Was vorgelesen wird, kommt aus zwei Richtungen:

• Dein eigener Code mit pixl.tts.speak(), z.B. für Kanalpunkte oder eigene Alerts
• Das Dashboard, über „An Overlays senden“ auf der TTS-Seite

Jedes Mal schickt pixl ein tts.ready an alle verbundenen Overlays. Ein Overlay mit pixl.tts.player() spielt es dann ab.

Abspielen im OverlayLink zur Überschrift kopieren

Der Schlüssel braucht das Recht TTS abspielen (tts:read).

<script src="https://pixl.lennox.zip/sdk/pixl.js"></script>
<script>
  const pixl = new Pixl({ key: "pixl_DEIN_SCHLÜSSEL" });
  pixl.tts.player({ volume: 0.8 });
</script>

Das ist schon alles. Der Player spielt alles der Reihe nach ab und hält sich an „Überspringen“ und „Alles stoppen“ aus dem Dashboard. In OBS und in StreamElements Custom Widgets darf er sofort abspielen. In einem normalen Browserfenster musst du einmal auf die Seite klicken, sonst blockiert der Browser den Ton.

OptionenLink zur Überschrift kopieren

item hat id, text (so wie vorgelesen, bei sehr langen Texten gekürzt, dann ist textTruncated gesetzt), voice, source (api oder dashboard), replay und mit onWord die Zeitmarken in marks.

Der Player hat außerdem skip(), clear(), setVolume(v), pending (wartende Einträge) und destroy().

const subtitle = document.querySelector("#subtitle");
pixl.tts.player({
  onStart: (item) => (subtitle.textContent = item.text),
  onEnd: () => (subtitle.textContent = ""),
});

Wort für WortLink zur Überschrift kopieren

Mit onWord läuft der Text synchron zum Audio mit, z.B. für Untertitel im Karaoke-Stil. word hat word (das Wort), index (Position im Satz), start und end (Millisekunden ab Start des Audios). Die Zeitmarken aller Wörter stehen schon in onStart als item.marks bereit, so kannst du den ganzen Satz vorab aufbauen und dann Wort für Wort hervorheben:

const subtitle = document.querySelector("#subtitle");
pixl.tts.player({
  onStart: (item) => {
    subtitle.innerHTML = (item.marks ?? []).map((m) => `<span>${m.word}</span>`).join(" ");
  },
  onWord: (word) => subtitle.children[word.index]?.classList.add("spoken"),
  onEnd: () => (subtitle.innerHTML = ""),
});

Gut zu wissen:

• Zeitmarken kosten beim Anbieter extra, ungefähr so viel wie das Audio noch einmal. Der Player lädt sie deshalb nur, wenn onWord gesetzt ist. Für denselben Text entstehen sie nur einmal.
• Satzzeichen tauchen nicht als eigene Wörter auf, Zahlen mit Einheit können ein Wort sein („5 Euro“). Baue Untertitel deshalb aus item.marks, nicht aus item.text.
• Gibt es keine Zeitmarken (Fehler, Stimme ohne diese Fähigkeit), wird trotzdem vorgelesen, nur onWord bleibt stumm.
• Selbst abrufen geht mit await pixl.tts.marks(id).

Selbst vorlesen lassenLink zur Überschrift kopieren

Der Schlüssel braucht das Recht TTS auslösen (tts:write). Jeder Aufruf verbraucht Credits deines Kanals, gib das Recht also nur Schlüsseln, die es wirklich brauchen.

const spoken = await pixl.tts.speak("Danke fürs Einlösen!", { voice: "polly:vicki" });
// { id, text, voice }

Ohne voice gilt die Standardstimme des Kanals. speak() spielt nichts ab, das macht der Player im Overlay.

Mit filters legst du fest, was pixl am Text bereinigt (siehe Was pixl am Text macht). Standardmäßig ist alles an:

pixl.tts.speak(text, { filters: false });                   // Links, Wiederholungen und gesperrte Wörter nicht filtern
pixl.tts.speak(text, { filters: { links: false } });        // nur Links drin lassen
pixl.tts.speak(text, { filters: { blockedWords: false } }); // gesperrte Wörter ignorieren

Unsichtbare Zeichen entfernt pixl immer, und der Text wird immer auf die eingestellte Länge gekürzt. Texte aus dem Dashboard filtert pixl immer, die Option gilt nur für deine eigenen Aufrufe. Geht etwas schief, wirft speak() einen PixlApiError mit status und problem:

StimmenLink zur Überschrift kopieren

Die Standardstimmen gibt es immer:

Dazu kommen KI-Stimmen (tier: "ai", IDs wie fish:3f2c…), die pixl nach und nach in den Katalog aufnimmt. Sie klingen deutlich natürlicher und kosten mehr Credits pro Zeichen, wie viele steht in creditsPerChar. Eigene Stimmen, die im Kanal eingesprochen wurden (tier: "custom"), haben dasselbe Format und gibt es nur in diesem Kanal. Die vollständige Liste samt Standardstimme des Kanals liefert await pixl.tts.voices().

Die ID einer Stimme kopierst du in pixl unter TTS → Einstellungen direkt bei der Stimme. Du kannst sie fest in dein Widget schreiben. KI-Stimmen können aber wegfallen, dann antwortet speak() mit unknown_voice. Lass in dem Fall voice weg, dann liest die Standardstimme des Kanals vor.

Was pixl am Text machtLink zur Überschrift kopieren

Bevor etwas vorgelesen wird, bereinigt pixl den Text (bei speak() lassen sich Links, Wiederholungen und gesperrte Wörter abschalten):

• Links werden weggelassen
• Wiederholungen werden gekürzt: aus „HYPEEEEEE“ wird „HYPEEE“, aus zehnmal demselben Wort dreimal
• Unsichtbare Zeichen fliegen raus
• Der Text wird auf die eingestellte Länge gekürzt
• Enthält er ein gesperrtes Wort, wird er nicht vorgelesen. Erkannt werden auch Schreibweisen wie „b4d“ oder „b.a.d“

CreditsLink zur Überschrift kopieren

Jeder Kanal hat Credits, 1 Credit ist 1 Zeichen mit einer Standardstimme. KI-Stimmen kosten mehrere Credits pro Zeichen (creditsPerChar in voices()). Es gibt zwei Arten: ein Monatsbudget, das es jeden Monatsersten neu gibt (Reste verfallen), oder ein Guthaben, das nicht abläuft und beim Vorlesen abgebucht wird. speak() und Ausprobieren im Dashboard verbrauchen Credits. Derselbe Text mit derselben Stimme kostet nur einmal, solange er im Zwischenspeicher liegt. Wie viele noch übrig sind, siehst du oben auf der TTS-Seite in pixl.

Ohne SDKLink zur Überschrift kopieren

Die Endpunkte stehen in der HTTP-API.