はじめに

コメント付きのアラームアプリを作っています。
エラーは出ていないのですか時間になっても音が鳴らない状態です。

app/views/alarms/index.html.erb

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>アラーム一覧</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    .alarm-item {
      display: flex;
      justify-content: space-between;
      padding: 10px;
      border-bottom: 1px solid #ccc;
    }
    button {
      padding: 5px 10px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>アラーム一覧</h1>
  <div id="alarmList">
    <!-- 動的にアラームを表示 -->
    <% @alarms.each do |alarm| %>
      <div class="alarm-item">
        <span><%= alarm.alarm_time.strftime('%Y-%m-%d %H:%M') %> - <%= alarm.comment %></span>
        <button onclick="setAlarm()">セット</button>
      </div>
    <% end %>
  </div>
  <button onclick="location.href='<%= new_alarm_path %>'">新しいアラームを追加</button>

<script>
  const alarms = [
    <% @alarms.each do |alarm| %>
      {
        time: "<%= alarm.alarm_time.strftime('%Y-%m-%d %H:%M:%S') %>",
        audioPath: "/alarm_<%= alarm.id %>.mp3",
        comment: "<%= alarm.comment %>"
      },
    <% end %>
  ];

  function checkAlarms() {
    const now = new Date().toISOString().slice(0, 19).replace('T', ' '); // 現在時刻をフォーマット
    alarms.forEach(alarm => {
      if (now === alarm.time) {
        const audio = new Audio(alarm.audioPath);
        audio.play();
        alert(alarm.comment); // 画面にコメントも表示
      }
    });
  }

  // 毎秒アラームをチェック
  setInterval(checkAlarms, 1000);
</script>

おわりに

時間になったら音声で伝えてほしいのですがCloud Text-to-Speech APIを有効にして、そこから何をどうすればいいのかわからない状態です。明日も引き続き調べてみて進展させたいと思います。