はじめに
コメント付きのアラームアプリを作っています。
エラーは出ていないのですか時間になっても音が鳴らない状態です。
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を有効にして、そこから何をどうすればいいのかわからない状態です。明日も引き続き調べてみて進展させたいと思います。