diff --git a/src/lib/audio/getAudioIDMetadata.ts b/src/lib/audio/getAudioIDMetadata.ts
new file mode 100644
index 0000000..22f11dd
--- /dev/null
+++ b/src/lib/audio/getAudioIDMetadata.ts
@@ -0,0 +1,22 @@
+import * as musicMetadata from 'music-metadata-browser';
+import localforage from 'localforage';
+
+export default function (audioId: string, callback: Function) {
+    localforage.getItem(`${audioId}-metadata`, function (err, metadata) {
+        if (metadata) {
+            callback(metadata);
+        } else {
+            localforage.getItem(`${audioId}-file`, function (err, file) {
+                if (file) {
+                    const f = file as File;
+                    musicMetadata.parseBlob(f).then((metadata) => {
+                        if (metadata) {
+                            localforage.setItem(`${audioId}-metadata`, metadata);
+                            callback(metadata);
+                        } else callback(null);
+                    });
+                }
+            });
+        }
+    });
+}
diff --git a/src/lib/components/cover.svelte b/src/lib/components/cover.svelte
index 91b966d..40df60d 100644
--- a/src/lib/components/cover.svelte
+++ b/src/lib/components/cover.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import localforage from '$lib/storage';
-    import { page } from '$app/stores';
     export let coverId;
 
     let coverPath = '';
diff --git a/src/lib/getAudioCoverURL.ts b/src/lib/getAudioCoverURL.ts
index 6fae09f..7b3a9f0 100644
--- a/src/lib/getAudioCoverURL.ts
+++ b/src/lib/getAudioCoverURL.ts
@@ -1,5 +1,4 @@
 import * as musicMetadata from 'music-metadata-browser';
-import convertCoverData from './convertCoverData';
 
 export default function getAudioMeta(audio: File, callback: Function) {
     musicMetadata.parseBlob(audio).then((metadata) => {
diff --git a/src/routes/play/[id]/+page.svelte b/src/routes/play/[id]/+page.svelte
index 7d97ea2..d91aa06 100644
--- a/src/routes/play/[id]/+page.svelte
+++ b/src/routes/play/[id]/+page.svelte
@@ -1,14 +1,28 @@
 <script lang="ts">
     import { page } from '$app/stores';
+    import getAudioIDMetadata from '$lib/audio/getAudioIDMetadata';
     import Background from '$lib/components/background.svelte';
     import Cover from '$lib/components/cover.svelte';
     import InteractiveBox from '$lib/components/interactiveBox.svelte';
+    import extractFileName from '$lib/extractFileName';
+    import localforage from 'localforage';
 
     const audioId = $page.params.id;
-    const name = "晨曦旅客";
-    const singer = "乐正绫";
-    const duration = 218;
-    const currentProgress = 0;
+    let name = "";
+    let singer = "";
+    let duration = 0;
+    let currentProgress = 0;
+
+    localforage.getItem(`${audioId}-file`, function (err, file) {
+        if (file) {
+            const f = file as File;
+            name = extractFileName(f.name);
+        }
+    });
+    getAudioIDMetadata(audioId, (metadata: any) => {
+        console.log(metadata);
+        duration = metadata.format.duration ? metadata.format.duration : 0;
+    })
 </script>
 
 <Background coverId={audioId} />