Update sender.html

sender.html

@@ -853,7 +853,60 @@
 
     <h1 id="title-name">文化発表会音声プレイヤー</h1>
 
+        <div class="details-container">
+        <details id="usageDetails">
+            <summary style="font-size: 20px">使い方</summary>
+            
+            <h3>音声の合成</h3>
+            <p><b>一番最初に「音声コントロール」で、スライダーを使用して各パートの音量を調整してください。</b>「合成音量係数」は全体の音量を上げます。<br>
+                自分のパートの音量を1、それ以外のパートの音量を0.3くらいにすると他のパートのタイミングを確認しながら練習できます。<br>
+                <b>調整が終わると「音声を合成」を押してください。</b></p>
+            
+            <hr>
+            
+            <h3>プレイヤーの使い方</h3>
+            <p>「▶」や「⏸」ボタンで再生や一時停止ができます。「↺」で最初から再生できます。音量スライダーで音量を変更できます。スライダーで再生速度も変更できます。「⇲」で、動画を小さく表示し、他のタブに移動しながら見れるようにします。「⛶」で動画を全画面で表示できます。</p>
+            
+            <hr>
+            
+            <h3>高度な繰り返し機能</h3>
+            <p>特定の秒数の間を再生したい場合は、再生を開始する秒数を「再生開始秒数」、再生を終了する秒数を「再生終了秒数」を設定してください。ドラッグアンドドロップで楽譜に載っている区間を設定できます。<br>
+                ループがオンの場合は再生終了秒数になると再生開始秒数に戻ります。<br>
+                設定ができたら「時間設定を適用」ボタンを押してください。</p>
+            
+            <hr>
+            
+            <h3>高度な設定</h3>
+            <ul>
+                <li>消画モード：画面を消すことができます。</li>
+                <li>全体音量係数：全体の音量を上げたり下げたりできます。10が最大です。</li>
+                <li>再生速度：再生速度を変更できます。</li>
+                <li>テンポ：テンポを入力すると、そのテンポになるように再生速度を自動調整します。</li>
+            </ul>
+            
+            <hr>
+            
+            <h3>オフライン設定</h3>
+            <p>ページをオフラインで使用できるようにします。ただし、保存されるキャッシュが古い場合、更新プログラムがなかったため、正常に動作しない可能性があります。現在はこのバグは更新ポップアップを表示することで修正されました。</p>
+            
+        </details>
+    </div>
     
+    <script>
+        // 初回は開く、それ以降は閉じる
+        document.addEventListener("DOMContentLoaded", () => {
+            const details = document.getElementById("usageDetails");
+            const openedBefore = localStorage.getItem("usageDetailsOpened");
+            
+            if(!openedBefore) {
+                details.setAttribute("open", "true");
+                localStorage.setItem("usageDetailsOpened", "true");
+            } else {
+                details.removeAttribute("open");
+            }
+        });
+        
+    </script>
         <div class="audio-controls">
             <h2>音声コントロール</h2>
             <span>各パートの音の大きさを設定できます。自分のパートの音量を1、それ以外のパートの音量を0.3くらいにすると他のパートのタイミングを確認しながら練習できます。<br>