stash

VOICEVOX · Apr 25, 2024 · 6a018ba · 6a018ba
1 parent 1567593
commit 6a018ba
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 26 deletions.
diff --git a/src/pages/song/index.tsx b/src/pages/song/index.tsx
@@ -72,32 +72,38 @@ const VoiceCard = React.memo(
             </LinkToProductPage>
           </h3>
 
-          <div className="buttons">
-            <button
-              className={`button circle-icon is-small`}
-              style={coloredStyle}
-              type="button"
-              aria-label="次のサンプル音声へ"
-            >
-              <FontAwesomeIcon icon={faBackwardStep} />
-            </button>
-
-            <PlayButton
-              url={"url"}
-              name={`${characterInfo.name}のサンプル音声${index + 1}}`}
-              color={characterInfo.color}
-              style={{ backgroundColor: "transparent" }}
-            />
-
-            <button
-              className={`button circle-icon is-small`}
-              style={coloredStyle}
-              type="button"
-              aria-label="次のサンプル音声へ"
-            >
-              <FontAwesomeIcon icon={faForwardStep} />
-            </button>
-          </div>
+          {characterInfo.songVoiceUrls.length > 0 && (
+            <div className="buttons">
+              <button
+                className={`button circle-icon is-small`}
+                style={coloredStyle}
+                type="button"
+                aria-label="次のサンプル音声へ"
+              >
+                <FontAwesomeIcon icon={faBackwardStep} />
+              </button>
+
+              {/* 
+とりあえずどんぐりころころを先頭に持ってくる
+んでスタイル変える方法を、← →にするかスタイル変更ボタンにするか考える
+ */}
+              <PlayButton
+                url={characterInfo.songVoiceUrls[0].urls[0]}
+                name={`${characterInfo.name}のサンプル音声${index + 1}}`}
+                color={characterInfo.color}
+                style={{ backgroundColor: "transparent" }}
+              />
+
+              <button
+                className={`button circle-icon is-small`}
+                style={coloredStyle}
+                type="button"
+                aria-label="次のサンプル音声へ"
+              >
+                <FontAwesomeIcon icon={faForwardStep} />
+              </button>
+            </div>
+          )}
         </div>
       </div>
     )

diff --git a/src/types/dormitoryCharacter.ts b/src/types/dormitoryCharacter.ts
@@ -46,6 +46,11 @@ export type CharacterInfo = {
   description: string
   labelInfos: readonly { label: string; value: string; size: 1 | 2 }[]
   talkVoiceUrls: { style: string; urls: readonly string[] }[]
+  songVoiceUrls: {
+    style: string
+    styleType: "song" | "humming"
+    urls: readonly string[]
+  }[]
   dormitoryVoiceUrls?: readonly string[]
   infoImages?: readonly IGatsbyImageData[]
   detailUrl: string | undefined