Text to Speech in SharePoint Framework (SPFx) Web Part

This article provides steps to implement the Text to Speech feature in a SharePoint Framework (SPFx) web part.
The Web Speech API allows web applications to convert text into spoken audio, and integrating it within SPFx enhances accessibility and interactivity for SharePoint users.

⚙️ Install Dependencies

Run the following commands inside your project directory:

npm install @pnp/sp --save
npm install office-ui-fabric-react --save

🧩 Configure Custom Properties

Create a new source file under your component folder (e.g. components/SpFxTextToSpeak.tsx) and define a TypeScript interface:

export interface ISpFxTextToSpeakState {
  textContent: string;
}

🗣️ Implement the React Component

Import required libraries and initialize the Web Speech API:

import * as React from "react";
import styles from "./SpFxTextToSpeak.module.scss";
import { ISpFxTextToSpeakProps } from "./ISpFxTextToSpeakProps";
import { ISpFxTextToSpeakState } from "./ISpFxTextToSpeakState";
import { PrimaryButton } from "office-ui-fabric-react";

export default class SpFxTextToSpeak extends React.Component<ISpFxTextToSpeakProps, ISpFxTextToSpeakState> {
  private speech: SpeechSynthesisUtterance;
  private voices: SpeechSynthesisVoice[] = [];

  constructor(props: ISpFxTextToSpeakProps) {
    super(props);
    this.state = { textContent: "" };

    this.speech = new SpeechSynthesisUtterance();
    this.speech.lang = "en-US";
    this.speech.rate = 1;
    this.speech.pitch = 1;
    this.speech.voice = speechSynthesis.getVoices().find(v => v.name === "Google UK English Male") || null;
  }

  public render(): React.ReactElement<ISpFxTextToSpeakProps> {
    return (
      <div className={styles.spFxTextToSpeak}>
        <textarea
          rows={10}
          placeholder="Enter text here..."
          value={this.state.textContent}
          onChange={(e) => this.setState({ textContent: e.target.value })}
        />
        <div style={{ marginTop: "10px" }}>
          <PrimaryButton text="Play" onClick={this.onClickPlay} style={{ marginRight: "8px" }} />
          <PrimaryButton text="Stop" onClick={this.onClickStop} />
        </div>
      </div>
    );
  }

  private onClickPlay = (): void => {
    this.speech.text = this.state.textContent;
    speechSynthesis.speak(this.speech);
  };

  private onClickStop = (): void => {
    speechSynthesis.cancel();
  };
}

⚡ Additional Notes

The SpeechSynthesisUtterance interface is part of the Web Speech API, available in most modern browsers.
Always verify supported voices by running speechSynthesis.getVoices() in your browser console.
To enhance usability, you can provide dropdowns for selecting voice, rate, or pitch dynamically.

🚀 Build and Deploy

To package and deploy your solution:

gulp bundle --ship
gulp package-solution --ship

Upload the generated .sppkg file to your App Catalog and deploy it.
Once installed, you can add the Text to Speech web part to any modern SharePoint page.

📂 GitHub Sample Project

View full SPFx project on GitHub:SPFx Text to Speech Web Part

GitHub

✅ Summary

By integrating the Web Speech API within SPFx, you can make your SharePoint web parts more interactive and accessible.
This example demonstrates how simple it is to enable text-to-speech functionality with minimal code.