web-speech-profanity/packages/playground/src/UI/SpeechSynthesisUtteranceEvents.js

Web Speech API adapter to use Cognitive Services Speech Services for both speech-to-text and text-to-speech service.

import { useSelector } from 'react-redux';
import React, { useMemo } from 'react';

const SpeechSynthesisUtteranceEvent = ({ utteranceID }) => {
  const speechSynthesisUtterances = useSelector(({ speechSynthesisUtterances }) => speechSynthesisUtterances);
  const events = useMemo(() => (speechSynthesisUtterances.find(({ id }) => id === utteranceID) || {}).events || [], [
    speechSynthesisUtterances,
    utteranceID
  ]);

  return (
    <div>
      {events.map((event, index) => (
        <React.Fragment key={index}>
          {event.type === 'start' || event.type === 'end' ? (
            <span className="badge badge-success">{event.type}</span>
          ) : event.type === 'boundary' ? (
            <span className="badge badge-primary">{event.type}</span>
          ) : (
            <span className="badge badge-secondary">{event.type}</span>
          )}
          &nbsp;
        </React.Fragment>
      ))}
    </div>
  );
};

export default SpeechSynthesisUtteranceEvent;