ルベタイマーテスト<style> #trinity-app { font-family: sans-serif; text-align: center; padding: 2em 1em; background: #1a2e1a; border-radius: 12px; color: #d7f0d7; max-width: 480px; margin: 0 auto; } #trinity-app h2 { font-size: 1.4em; letter-spacing: 0.1em; margin-bottom: 1.5em; color: #a8d8a8; } .tr-btn { display: block; width: 80%; margin: 0.8em auto; padding: 0.9em 1em; font-size: 1.1em; font-weight: bold; border: none; border-radius: 8px; cursor: pointer; transition: transform 0.1s, opacity 0.2s; letter-spacing: 0.05em; } .tr-btn:active { transform: scale(0.97); } #btn-start { background: #2e7d32; color: #fff; } #btn-start:hover { opacity: 0.88; } #btn-skip, #btn-back, #btn-stop { background: transparent; color: #7db87d; border: 1.5px solid #7db87d; opacity: 0.4; cursor: default; } #btn-skip.active, #btn-back.active, #btn-stop.active { color: #d7f0d7; border-color: #d7f0d7; opacity: 1; cursor: pointer; } #btn-skip.active:hover, #btn-back.active:hover, #btn-stop.active:hover { opacity: 0.8; } #tr-status { margin-top: 1.2em; font-size: 0.9em; color: #7db87d; min-height: 1.4em; } </style> <div id="trinity-app"> <h2 style="font-size: 150%">⚔ バトルトリニティタイマー ⚔</h2> <button onclick="trPlay()" id="btn-start" class="tr-btn">▶ バトル開始</button> <button onclick="trBack()" id="btn-back" class="tr-btn">◀◀ 3秒戻す</button> <button onclick="trSkip()" id="btn-skip" class="tr-btn">▶▶ 3秒早送り</button> <button onclick="trStop()" id="btn-stop" class="tr-btn">▮▮ ストップ</button> <div id="tr-status">ボタンを押して音声を再生</div> </div> <script> (function () { var URL = "https://raw.githubusercontent.com/totohudqx/BattleTrinityTimer/main/BattleTrinity(zundamon).mp3"; var currentAudio = null; function setControls(flag) { ["btn-skip", "btn-back", "btn-stop"].forEach(function (id) { var el = document.getElementById(id); if (flag) { el.classList.add("active"); } else { el.classList.remove("active"); } }); } window.trPlay = function () { var statusEl = document.getElementById("tr-status"); if (currentAudio) { currentAudio.pause(); currentAudio.src = ""; currentAudio = null; } var audio = new Audio(URL); currentAudio = audio; setControls(true); statusEl.textContent = "▶ バトル開始！再生中..."; audio.play().catch(function (e) { statusEl.textContent = "⚠ 再生できませんでした（" + e.message + "）"; setControls(false); }); audio.addEventListener("ended", function () { statusEl.textContent = "再生終了"; currentAudio = null; setControls(false); }); }; window.trBack = function () { if (!currentAudio) return; currentAudio.currentTime = Math.max(currentAudio.currentTime - 3, 0); document.getElementById("tr-status").textContent = "▶ 3秒戻しました"; }; window.trSkip = function () { if (!currentAudio) return; currentAudio.currentTime = Math.min(currentAudio.currentTime + 3, currentAudio.duration || currentAudio.currentTime); document.getElementById("tr-status").textContent = "▶ 3秒早送りしました"; }; window.trStop = function () { if (!currentAudio) return; currentAudio.pause(); currentAudio.src = ""; currentAudio = null; setControls(false); document.getElementById("tr-status").textContent = "停止しました"; }; })(); </script>