AWS Polly を使ってテキストを音声に変換してアプリ上で再生する方法

service: wordMemorizationApp

provider:
  name: aws
  runtime: nodejs18.x
  region: us-west-2
  iamRoleStatements:
    - Effect: Allow
      Action:
        - polly:SynthesizeSpeech
      Resource: "*"

functions:
  generateSpeech:
    handler: handler.generateSpeech
    url:
      cors:
        allowedOrigins:
          - http://localhost:3000
        allowedHeaders:
          - Content-Type
        allowedMethods:
          - POST
    layers:
      - { Ref: AwsLayerLambdaLayer }

layers:
  awsLayer:
    path: aws-layer

import AWS from 'aws-sdk';

const polly = new AWS.Polly({
  region: 'us-west-2',
});

export const generateSpeech = async event => {
  const word = event.body;

  // Polly で音声を合成する
  const params = {
    Text: word,
    OutputFormat: 'mp3',
    VoiceId: 'Joanna' // 音声の種類を指定（例: 'Joanna' は女性の英語）
  };

  try {
    const data = await polly.synthesizeSpeech(params).promise();
    if (data.AudioStream instanceof Buffer) {
      // バイナリーデータを Base64 エンコードして文字列に変換
      const audioBase64 = data.AudioStream.toString('base64');
      // 音声ファイルの URL を生成
      const audioUrl = `data:audio/mpeg;base64,${audioBase64}`;
      return {
        statusCode: 200,
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ url: audioUrl })
      };
    } else {
      return {
        statusCode: 500,
        body: JSON.stringify({ message: 'Error: Unexpected audio stream format' })
      };
    }
  } catch (error) {
    return {
      statusCode: 500,
      body: JSON.stringify({ message: `Error: ${error.message}` })
    };
  }
};

const data = await polly.synthesizeSpeech(params).promise();

// バイナリーデータを Base64 エンコードして文字列に変換
const audioBase64 = data.AudioStream.toString('base64');

const audioUrl = `data:audio/mpeg;base64,${audioBase64}`;

sls deploy

import AudiotrackIcon from "@mui/icons-material/Audiotrack";

export default function Audio(props: { phrase: string }) {
  const handlePlayButtonClick = async () => {
    const url = await getAudioUrl(props.phrase);
    const audio = new Audio(url);
    audio.play();
  };

  return (
    <>
      <AudiotrackIcon
        sx={{ cursor: "pointer" }}
        onClick={handlePlayButtonClick}
      />
    </>
  );
}

const getAudioUrl = async (phrase: string) => {
  try {
    const lambdaFunctionUrl = process.env.AUDIO_LAMBDA_URL;
    if (!lambdaFunctionUrl) {
      throw new Error("AUDIO_LAMBDA_URL is not defined in .env file");
    }

    const response = await fetch(lambdaFunctionUrl, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: phrase,
    });

    if (!response.ok) {
      throw new Error("Network response was not ok");
    }

    const responseData = await response.json();
    return responseData.url;
  } catch (error) {
    console.error("Error calling Lambda function:", error);
  }
};

const url = await getAudioUrl(props.phrase);

const lambdaFunctionUrl = process.env.AUDIO_LAMBDA_URL;
if (!lambdaFunctionUrl) {
    throw new Error("AUDIO_LAMBDA_URL is not defined in .env file");
}

const response = await fetch(lambdaFunctionUrl, {
    method: "POST",
    headers: {
    "Content-Type": "application/json",
    },
    body: phrase,
});

const audio = new Audio(url);
audio.play();