diff --git a/packages/api-connector/src/ApiConnector.ts b/packages/api-connector/src/ApiConnector.ts
index e9cf5a92..a322048d 100644
--- a/packages/api-connector/src/ApiConnector.ts
+++ b/packages/api-connector/src/ApiConnector.ts
@@ -303,8 +303,12 @@ class ApiConnector {
         );
     }
 
-    bgm(id: number, cacheDuration?: number): Promise<BgmEntity> {
-        const query = this.getQueryString(new URLSearchParams());
+    bgm(id: number, cacheDuration?: number, fileName?: string): Promise<BgmEntity> {
+        const params = new URLSearchParams();
+        if (fileName) {
+            params.append("fileName", fileName);
+        }
+        const query = this.getQueryString(params);
         const fetch = () => {
             return ApiConnector.fetch<BgmEntity>(`${this.host}/nice/${this.region}/bgm/${id}${query}`);
         };
diff --git a/packages/db/src/Api.tsx b/packages/db/src/Api.tsx
index 6bb92f98..4fb484f3 100644
--- a/packages/db/src/Api.tsx
+++ b/packages/db/src/Api.tsx
@@ -52,8 +52,8 @@ class Api {
         apiConnector = new ApiConnector({ host: Host, region, language });
     }
 
-    static bgm(id: number): Promise<Bgm.BgmEntity> {
-        return apiConnector.bgm(id, cacheDuration);
+    static bgm(id: number, fileName?: string): Promise<Bgm.BgmEntity> {
+        return apiConnector.bgm(id, cacheDuration, fileName);
     }
 
     static bgmList(): Promise<Bgm.BgmEntity[]> {
diff --git a/packages/db/src/Component/ScriptDialogueLine.tsx b/packages/db/src/Component/ScriptDialogueLine.tsx
index 367c57ed..2a3dcaf0 100644
--- a/packages/db/src/Component/ScriptDialogueLine.tsx
+++ b/packages/db/src/Component/ScriptDialogueLine.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 
 import { Region } from "@atlasacademy/api-connector";
 
-import BgmDescriptor from "../Descriptor/BgmDescriptor";
+import { BgmDescriptorFileName } from "../Descriptor/BgmDescriptor";
 import { FGOText } from "../Helper/StringHelper";
 import { useImageSize } from "../Hooks/useImageSize";
 import { lang } from "../Setting/Manager";
@@ -227,7 +227,7 @@ export const DialogueChild = ({
         case ScriptComponentType.DIALOGUE_TEXT_IMAGE:
             return <DialogueBasic region={region} component={component} index={index} wideScreen={wideScreen} />;
         case ScriptComponentType.BGM:
-            return <BgmDescriptor region={region} bgm={component.bgm} style={{ padding: "0 0.5em" }} />;
+            return <BgmDescriptorFileName region={region} bgm={component.bgm} style={{ padding: "0 0.5em" }} />;
         default:
             return null;
     }
diff --git a/packages/db/src/Component/ScriptTable.tsx b/packages/db/src/Component/ScriptTable.tsx
index 0114496b..4859d3d7 100644
--- a/packages/db/src/Component/ScriptTable.tsx
+++ b/packages/db/src/Component/ScriptTable.tsx
@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
 
 import { Region } from "@atlasacademy/api-connector";
 
-import BgmDescriptor from "../Descriptor/BgmDescriptor";
+import BgmDescriptor, { BgmDescriptorFileName } from "../Descriptor/BgmDescriptor";
 import QuestDescriptor from "../Descriptor/QuestDescriptor";
 import { useImageSize } from "../Hooks/useImageSize";
 import useWindowDimensions from "../Hooks/useWindowDimensions";
@@ -534,7 +534,7 @@ const ScriptBracketRow = (props: {
                 <tr ref={refs.get(component.bgm.audioAsset)}>
                     <td>{t("BGM")}</td>
                     <td colSpan={colSpan}>
-                        <BgmDescriptor region={region} bgm={component.bgm} />
+                        <BgmDescriptorFileName region={region} bgm={component.bgm} />
                     </td>
                     {showScriptLine && <td className="text-center">{lineNumber}</td>}
                 </tr>
diff --git a/packages/db/src/Descriptor/BgmDescriptor.tsx b/packages/db/src/Descriptor/BgmDescriptor.tsx
index c8868320..6a364b0e 100644
--- a/packages/db/src/Descriptor/BgmDescriptor.tsx
+++ b/packages/db/src/Descriptor/BgmDescriptor.tsx
@@ -18,53 +18,41 @@ export const getBgmName = (bgm: Bgm.Bgm) => {
     }
 };
 
-export const BgmDescriptorId = ({
-    region,
-    bgmId,
-    showName,
-    showLink,
-    style,
-    className,
-}: {
+interface BgmProps {
     region: Region;
-    bgmId: number;
     showName?: string;
     showLink?: boolean;
     style?: React.CSSProperties;
     className?: string;
-}) => {
-    const { data: bgm } = useApi("bgm", bgmId);
+}
+
+export const BgmDescriptorId = (props: BgmProps & { bgmId: number }) => {
+    const { data: bgm } = useApi("bgm", props.bgmId);
     if (bgm === undefined) return <></>;
 
-    return (
-        <BgmDescriptor
-            region={region}
-            bgm={bgm}
-            showName={showName}
-            showLink={showLink}
-            style={style}
-            className={className}
-        />
-    );
+    return <BgmDescriptor {...props} bgm={bgm} />;
 };
 
-export default function BgmDescriptor(props: {
-    region: Region;
-    bgm: Bgm.Bgm;
-    showName?: string;
-    showLink?: boolean;
-    style?: React.CSSProperties;
-    className?: string;
-}) {
-    const { bgm, region, className } = props;
+export const BgmDescriptorFileName = (props: BgmProps & { bgm: Bgm.Bgm }) => {
+    const { data: bgmApi } = useApi("bgm", -1, props.bgm.fileName);
+
+    if (bgmApi === undefined) {
+        return <BgmDescriptor {...props} />;
+    } else {
+        return <BgmDescriptor {...props} bgm={bgmApi} />;
+    }
+};
+
+export default function BgmDescriptor(props: BgmProps & { bgm: Bgm.Bgm }) {
+    const { bgm, region, className, style } = props;
     if (bgm.id === 0) {
         return null;
     } else if (bgm.audioAsset !== undefined) {
         const showName = getBgmName(bgm);
         const toLink = props.showLink ? (
             <>
-                <Button variant="primary" as={Link} to={`/${props.region}/bgm/${bgm.id}`}>
-                    <FontAwesomeIcon icon={faShare} title={`Go to ${props.region} BGM ${showName}`} />
+                <Button variant="primary" as={Link} to={`/${region}/bgm/${bgm.id}`}>
+                    <FontAwesomeIcon icon={faShare} title={`Go to ${region} BGM ${showName}`} />
                 </Button>
             </>
         ) : null;
@@ -80,7 +68,7 @@ export default function BgmDescriptor(props: {
         );
         return (
             <>
-                <ButtonGroup size="sm" style={props.style}>
+                <ButtonGroup size="sm" style={style}>
                     <VoiceLinePlayer audioAssetUrls={[bgm.audioAsset]} delay={[0]} title={bgm.name} />
                     {downloadButton}
                     {toLink}
@@ -89,7 +77,7 @@ export default function BgmDescriptor(props: {
         );
     } else {
         return (
-            <Button variant={"info"} disabled style={props.style} className={className}>
+            <Button variant={"info"} disabled style={style} className={className}>
                 <span lang={lang(region)}>{bgm.name}</span>
             </Button>
         );