とりあえずサンプルを再生可能に

VOICEVOX · Apr 25, 2024 · 03bc6a4 · 03bc6a4
1 parent 5f0b36f
commit 03bc6a4
Show file tree

Hide file tree

Showing 17 changed files with 116 additions and 28 deletions.
diff --git a/src/audios/song/namine_ritsu-humming-queen-001.wav b/src/audios/song/namine_ritsu-humming-queen-001.wav
diff --git a/src/audios/song/namine_ritsu-humming-queen-002.wav b/src/audios/song/namine_ritsu-humming-queen-002.wav
diff --git a/src/audios/song/namine_ritsu-humming-queen-003.wav b/src/audios/song/namine_ritsu-humming-queen-003.wav
diff --git a/src/audios/song/shikoku_metan-humming-hiso-001.wav b/src/audios/song/shikoku_metan-humming-hiso-001.wav
diff --git a/src/audios/song/shikoku_metan-humming-hiso-002.wav b/src/audios/song/shikoku_metan-humming-hiso-002.wav
diff --git a/src/audios/song/shikoku_metan-humming-hiso-003.wav b/src/audios/song/shikoku_metan-humming-hiso-003.wav
diff --git a/src/audios/song/zundamon-humming-herohero-001.wav b/src/audios/song/zundamon-humming-herohero-001.wav
diff --git a/src/audios/song/zundamon-humming-herohero-002.wav b/src/audios/song/zundamon-humming-herohero-002.wav
diff --git a/src/audios/song/zundamon-humming-herohero-003.wav b/src/audios/song/zundamon-humming-herohero-003.wav
diff --git a/src/audios/song/zundamon-humming-hiso-001.wav b/src/audios/song/zundamon-humming-hiso-001.wav
diff --git a/src/audios/song/zundamon-humming-hiso-002.wav b/src/audios/song/zundamon-humming-hiso-002.wav
diff --git a/src/audios/song/zundamon-humming-hiso-003.wav b/src/audios/song/zundamon-humming-hiso-003.wav
diff --git a/src/audios/song/zundamon-humming-namidame-001.wav b/src/audios/song/zundamon-humming-namidame-001.wav
diff --git a/src/audios/song/zundamon-humming-namidame-002.wav b/src/audios/song/zundamon-humming-namidame-002.wav
diff --git a/src/audios/song/zundamon-humming-namidame-003.wav b/src/audios/song/zundamon-humming-namidame-003.wav
diff --git a/src/components/layout.scss b/src/components/layout.scss
@@ -784,15 +784,29 @@ $dropdown-item-active-background-color: $primary;
         .voice-card-content {
           @extend .has-text-centered;
 
+          display: flex;
+          flex-direction: column;
+          gap: 0.5rem;
+
           .title {
             @extend .is-6;
             @extend .has-text-weight-medium;
-            @extend .mb-3;
+            @extend .mb-0;
           }
 
           .buttons {
             align-items: center;
             justify-content: center;
+            @extend .mb-0;
+
+            .button {
+              @extend .mb-0;
+            }
+          }
+
+          .style-name {
+            @extend .is-size-7;
+            // @extend .has-text-weight-light;
           }
         }
       }

diff --git a/src/pages/song/index.tsx b/src/pages/song/index.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from "react"
+import React, { useContext, useMemo, useState } from "react"
 import "../../components/layout.scss"
 import { Page } from "../../components/page"
 import Seo from "../../components/seo"
@@ -41,6 +41,68 @@ const VoiceCard = React.memo(
       }
     }, [color])
 
+    const audioSamples = useMemo(
+      () => characterInfo.songVoiceUrls,
+      [characterInfo]
+    )
+
+    // スタイルがまだ時を考慮している
+    const [styleState, setStyleState] = useState<
+      | {
+          styles: { name: string; type: string }[]
+          selectedStyleIndex: number
+        }
+      | undefined
+    >(
+      audioSamples.length > 0
+        ? {
+            styles: audioSamples.map(value => {
+              return { name: value.style, type: value.styleType }
+            }),
+            selectedStyleIndex: 0,
+          }
+        : undefined
+    )
+
+    // スタイルタイプを含んだスタイル名
+    const fullStyleName = useMemo(() => {
+      if (styleState == undefined) {
+        return undefined
+      }
+      return (
+        (styleState.styles[styleState.selectedStyleIndex].type == "humming"
+          ? "ハミング"
+          : "ソング") +
+        "：" +
+        styleState.styles[styleState.selectedStyleIndex].name
+      )
+    }, [styleState])
+
+    // 次のスタイルへ
+    const nextStyle = () => {
+      if (!styleState) {
+        throw new Error("styleState is undefined.")
+      }
+      setStyleState({
+        ...styleState,
+        selectedStyleIndex:
+          (styleState.selectedStyleIndex + 1) % styleState.styles.length,
+      })
+    }
+
+    // 前のスタイルへ
+    const prevStyle = () => {
+      if (!styleState) {
+        throw new Error("styleState is undefined.")
+      }
+      setStyleState({
+        ...styleState,
+        selectedStyleIndex:
+          (styleState.selectedStyleIndex - 1 + styleState.styles.length) %
+          styleState.styles.length,
+      })
+    }
+
     const LinkToProductPage = ({
       children,
       className,
@@ -72,33 +134,45 @@ const VoiceCard = React.memo(
             </LinkToProductPage>
           </h3>
 
-          {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" }}
-              />
+          {styleState && (
+            <>
+              <div className="buttons">
+                {styleState.styles.length > 1 && (
+                  <button
+                    className={`button circle-icon is-small`}
+                    style={coloredStyle}
+                    type="button"
+                    aria-label="前のサンプル音声へ"
+                    onClick={prevStyle}
+                  >
+                    <FontAwesomeIcon icon={faBackwardStep} />
+                  </button>
+                )}
+
+                <PlayButton
+                  url={
+                    characterInfo.songVoiceUrls[styleState.selectedStyleIndex]
+                      .urls[0]
+                  }
+                  name={`${fullStyleName}のサンプル音声}`}
+                  color={characterInfo.color}
+                  style={{ backgroundColor: "transparent" }}
+                />
 
-              <button
-                className={`button circle-icon is-small`}
-                style={coloredStyle}
-                type="button"
-                aria-label="次のサンプル音声へ"
-              >
-                <FontAwesomeIcon icon={faForwardStep} />
-              </button>
-            </div>
+                {styleState.styles.length > 1 && (
+                  <button
+                    className={`button circle-icon is-small`}
+                    style={coloredStyle}
+                    type="button"
+                    aria-label="次のサンプル音声へ"
+                    onClick={nextStyle}
+                  >
+                    <FontAwesomeIcon icon={faForwardStep} />
+                  </button>
+                )}
+              </div>
+              <h4 className="style-name">{fullStyleName}</h4>
+            </>
           )}
         </div>
       </div>