docs: rebuild example dir

Author: codeacme17

example/public/audios/loop-1.mp3

@@ -11,39 +11,39 @@ type Props = {
 const items = reactive<Props[]>([
   {
     id: nanoid(),
-    url:`${import.meta.env.BASE_URL}audios/loop-1.wav`
+    url:`${import.meta.env.BASE_URL}audios/loop-1.mp3`
   },
   {
     id: nanoid(),
-    url:`${import.meta.env.BASE_URL}audios/loop-2.wav`
+    url:`${import.meta.env.BASE_URL}audios/loop-2.mp3`
   },
   {
     id: nanoid(),
-    url:`${import.meta.env.BASE_URL}audios/loop-3.wav`
+    url:`${import.meta.env.BASE_URL}audios/loop-3.mp3`
   },
   {
     id: nanoid(),
-    url:`${import.meta.env.BASE_URL}audios/loop-4.wav`
+    url:`${import.meta.env.BASE_URL}audios/loop-4.mp3`
   },
   {
     id: nanoid(),
-    url:`${import.meta.env.BASE_URL}audios/loop-5.wav`
+    url:`${import.meta.env.BASE_URL}audios/loop-5.mp3`
   },
   {
     id: nanoid(),
-    url:`${import.meta.env.BASE_URL}audios/loop-6.wav`
+    url:`${import.meta.env.BASE_URL}audios/loop-6.mp3`
   },
   {
     id: nanoid(),
-    url:`${import.meta.env.BASE_URL}audios/loop-7.wav`
+    url:`${import.meta.env.BASE_URL}audios/loop-7.mp3`
   },
   {
     id: nanoid(),
-    url:`${import.meta.env.BASE_URL}audios/loop-8.wav`
+    url:`${import.meta.env.BASE_URL}audios/loop-8.mp3`
   },
   {
     id: nanoid(),
-    url:`${import.meta.env.BASE_URL}audios/loop-9.wav`
+    url:`${import.meta.env.BASE_URL}audios/loop-9.mp3`
   }
 ])
 </script>
@@ -58,6 +58,6 @@ const items = reactive<Props[]>([
       </span>
     </h1>
 
-    <Demo v-for="item in items" :props="item" />
+    <Demo v-for="item in items" :key="item.id" :props="item" />
   </section>
 </template>

example/public/audios/loop-1.wav

@@ -93,7 +93,7 @@ const getDuration = () => {
       <div class="ml-5">
         <button
           @click="play"
-          class="btn text-green-400"
+          class="btn text-[#3e6bff]"
           v-show="!playing && !finished"
         >
           <PlayIcon />
@@ -102,14 +102,14 @@ const getDuration = () => {
 
         <button
           @click="pause"
-          class="btn text-yellow-400"
+          class="btn text-yellow-500"
           v-show="playing && !finished"
         >
           <PauseIcon />
           <div>PAUSE</div>
         </button>
 
-        <button @click="replay" class="btn" v-show="finished">
+        <button @click="replay" class="btn text-green-500" v-show="finished">
           <ReplayIcon />
           <div>REPLAY</div>
         </button>
@@ -120,7 +120,7 @@ const getDuration = () => {
 
 <style scoped lang="scss">
 .btn {
-  @apply flex items-center bg-neutral-800 px-5 py-1 rounded-sm;
+  @apply flex items-center bg-neutral-700 px-5 py-1 rounded-sm;
 
   & div {
     @apply ml-1 font-bold -mb-0.5;

example/public/audios/loop-2.mp3

@@ -5,9 +5,9 @@ import { resolve } from 'path'
 
 export default defineConfig({
   plugins: [vue()],
-  base: process.env.NODE_ENV  === "development" ? import.meta.url : "/1llest-waveform-vue/",
+  base: process.env.NODE_ENV  === "development" ? "" : "/1llest-waveform-vue/",
   build: {
-    outDir: resolve(__dirname,"../docs"),
+    outDir: resolve(__dirname, "../docs"),
   },
   resolve: {
     alias: {