diff --git a/web/src/App.css b/web/src/App.css
index a0d6b5d..b841f03 100644
--- a/web/src/App.css
+++ b/web/src/App.css
@@ -108,3 +108,6 @@ dialog {
 .warp-word {
   overflow-wrap: anywhere;
 }
+.number-input {
+  width: 5em;
+}
diff --git a/web/src/component/AudioPlayer.js b/web/src/component/AudioPlayer.js
index 45ae91b..35934ea 100644
--- a/web/src/component/AudioPlayer.js
+++ b/web/src/component/AudioPlayer.js
@@ -18,6 +18,8 @@ function AudioPlayer(props) {
   });
   const [playingURL, setPlayingURL] = useState("");
   const [isPreparing, setIsPreparing] = useState(false);
+  const [timerCount, setTimerCount] = useState(0);
+  const [timerID, setTimerID] = useState(null);
 
   useEffect(() => {
     // no playing file
@@ -111,6 +113,35 @@ function AudioPlayer(props) {
 
       <br />
 
+      <span className="horizontal">
+        <input
+          className="number-input"
+          disabled={timerID !== null}
+          type="number"
+          value={timerCount}
+          onChange={(e) => {
+            setTimerCount(e.target.value);
+          }}
+        />
+        <button
+          onClick={() => {
+            if (timerID != null) {
+              clearInterval(timerID);
+              setTimerID(null);
+              return;
+            }
+            setTimerID(
+              setTimeout(() => {
+                props.setPlayingFile({});
+                setTimerID(null);
+              }, timerCount * 1000 * 60)
+            );
+          }}
+        >
+          Stop Timer
+        </button>
+      </span>
+
       <span>
         <input
           checked={loop}