---
slug: "browser-text-to-speech-speak-as-async-await"
title: "ブラウザの TextToSpeech を async function で書く"
description: "Raspberry Pi で Playwright + Chromium を kiosk モードで起動して、Web サイネージを動かす Python スクリプトと systemd ユニット例。"
url: "https://www.ytyng.com/blog/browser-text-to-speech-speak-as-async-await"
publish_date: "2023-05-03T02:47:55Z"
created: "2023-05-03T02:47:55Z"
updated: "2026-05-11T13:21:50.621Z"
categories: []
keywords: ""
featured_image_url: "https://media.ytyng.com/resize/20250708/d17fb56dda584b46bab31b888260ebab.png.webp?width=768"
has_video: true
has_music: true
video_urls: ["https://media.ytyng.net/ytyng-blog/280/featured-video-1.mp4", "https://media.ytyng.net/ytyng-blog/280/featured-video-2.mp4", "https://media.ytyng.net/ytyng-blog/280/featured-video-3.mp4"]
music_urls: ["https://media.ytyng.net/ytyng-blog/280/featured-music-280-1.mp3", "https://media.ytyng.net/ytyng-blog/280/featured-music-280-3.mp3"]
lang: "ja"
---

# ブラウザの TextToSpeech を async function で書く

SpeechSynthesisUtterance の speech メソッドを await するコードです。
ウェブブラウザに発声させる処理を同期的に行います。

ちなみに、ブラウザを開いた瞬間に自動的に speak することはブラウザのセキュリティの都合上できません。
最低1回、ページ内のなにかのボタンをクリックするなどをユーザーにしてもらわないと発声しません。

```javascript
function asyncSpeak(text) {
  const ssu = new SpeechSynthesisUtterance()
  ssu.text = text
  ssu.lang = 'en-US'
  speechSynthesis.speak(ssu)
  return new Promise((resolve, reject) => {
    ssu.onend = () => {
      resolve()
    }
  })
}

async function onStarted() {
  await asyncSpeak('one two three four five six seven eight nine ten')
  console.log('end')
}
```