feat:静态页面修改 音乐页面修改

src/manifest.json

@@ -1,113 +1,114 @@
 {
-    "name" : "unibest",
-    "appid" : "__UNI__1C998EE",
-    "description" : "",
-    "versionName" : "1.0.0",
-    "versionCode" : "100",
-    "transformPx" : false,
-    "app-plus" : {
-        "usingComponents" : true,
-        "nvueStyleCompiler" : "uni-app",
-        "compilerVersion" : 3,
-        "splashscreen" : {
-            "alwaysShowBeforeRender" : true,
-            "waiting" : true,
-            "autoclose" : true,
-            "delay" : 0
-        },
-        "modules" : {},
-        "distribute" : {
-            "android" : {
-                "permissions" : [
-                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
-                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
-                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
-                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
-                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
-                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
-                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
-                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
-                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
-                    "<uses-feature android:name=\"android.hardware.camera\"/>",
-                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
-                ],
-                "minSdkVersion" : 30,
-                "targetSdkVersion" : 30,
-                "abiFilters" : [ "armeabi-v7a", "arm64-v8a" ]
-            },
-            "ios" : {
-                "dSYMs" : false
-            },
-            "sdkConfigs" : {},
-            "google" : {
-                "keypwd" : "123456"
-            },
-            "icons" : {
-                "android" : {
-                    "hdpi" : "unpackage/res/icons/72x72.png",
-                    "xhdpi" : "unpackage/res/icons/96x96.png",
-                    "xxhdpi" : "unpackage/res/icons/144x144.png",
-                    "xxxhdpi" : "unpackage/res/icons/192x192.png"
-                },
-                "ios" : {
-                    "appstore" : "unpackage/res/icons/1024x1024.png",
-                    "ipad" : {
-                        "app" : "unpackage/res/icons/76x76.png",
-                        "app@2x" : "unpackage/res/icons/152x152.png",
-                        "notification" : "unpackage/res/icons/20x20.png",
-                        "notification@2x" : "unpackage/res/icons/40x40.png",
-                        "proapp@2x" : "unpackage/res/icons/167x167.png",
-                        "settings" : "unpackage/res/icons/29x29.png",
-                        "settings@2x" : "unpackage/res/icons/58x58.png",
-                        "spotlight" : "unpackage/res/icons/40x40.png",
-                        "spotlight@2x" : "unpackage/res/icons/80x80.png"
-                    },
-                    "iphone" : {
-                        "app@2x" : "unpackage/res/icons/120x120.png",
-                        "app@3x" : "unpackage/res/icons/180x180.png",
-                        "notification@2x" : "unpackage/res/icons/40x40.png",
-                        "notification@3x" : "unpackage/res/icons/60x60.png",
-                        "settings@2x" : "unpackage/res/icons/58x58.png",
-                        "settings@3x" : "unpackage/res/icons/87x87.png",
-                        "spotlight@2x" : "unpackage/res/icons/80x80.png",
-                        "spotlight@3x" : "unpackage/res/icons/120x120.png"
-                    }
-                }
-            }
-        },
-        "compatible" : {
-            "ignoreVersion" : true
-        }
+  "name": "unibest",
+  "appid": "__UNI__1C998EE",
+  "description": "",
+  "versionName": "1.0.0",
+  "versionCode": "100",
+  "transformPx": false,
+  "app-plus": {
+    "usingComponents": true,
+    "nvueStyleCompiler": "uni-app",
+    "compilerVersion": 3,
+    "splashscreen": {
+      "alwaysShowBeforeRender": true,
+      "waiting": true,
+      "autoclose": true,
+      "delay": 0
     },
-    "quickapp" : {},
-    "mp-weixin" : {
-        "appid" : "wxa2abb91f64032a2b",
-        "setting" : {
-            "urlCheck" : false
+    "modules": {},
+    "distribute": {
+      "android": {
+        "permissions": [
+          "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+          "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+          "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+          "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+          "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+          "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+          "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+          "<uses-feature android:name=\"android.hardware.camera\"/>",
+          "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+        ],
+        "minSdkVersion": 30,
+        "targetSdkVersion": 30,
+        "abiFilters": [
+          "armeabi-v7a",
+          "arm64-v8a"
+        ]
+      },
+      "ios": {},
+      "sdkConfigs": {},
+      "google": {
+        "keypwd": "123456"
+      },
+      "icons": {
+        "android": {
+          "hdpi": "static/app/icons/72x72.png",
+          "xhdpi": "static/app/icons/96x96.png",
+          "xxhdpi": "static/app/icons/144x144.png",
+          "xxxhdpi": "static/app/icons/192x192.png"
         },
-        "usingComponents" : true
-    },
-    "mp-alipay" : {
-        "usingComponents" : true,
-        "styleIsolation" : "shared"
-    },
-    "mp-baidu" : {
-        "usingComponents" : true
-    },
-    "mp-toutiao" : {
-        "usingComponents" : true
+        "ios": {
+          "appstore": "static/app/icons/1024x1024.png",
+          "ipad": {
+            "app": "static/app/icons/76x76.png",
+            "app@2x": "static/app/icons/152x152.png",
+            "notification": "static/app/icons/20x20.png",
+            "notification@2x": "static/app/icons/40x40.png",
+            "proapp@2x": "static/app/icons/167x167.png",
+            "settings": "static/app/icons/29x29.png",
+            "settings@2x": "static/app/icons/58x58.png",
+            "spotlight": "static/app/icons/40x40.png",
+            "spotlight@2x": "static/app/icons/80x80.png"
+          },
+          "iphone": {
+            "app@2x": "static/app/icons/120x120.png",
+            "app@3x": "static/app/icons/180x180.png",
+            "notification@2x": "static/app/icons/40x40.png",
+            "notification@3x": "static/app/icons/60x60.png",
+            "settings@2x": "static/app/icons/58x58.png",
+            "settings@3x": "static/app/icons/87x87.png",
+            "spotlight@2x": "static/app/icons/80x80.png",
+            "spotlight@3x": "static/app/icons/120x120.png"
+          }
+        }
+      }
     },
-    "uniStatistics" : {
-        "enable" : false
+    "compatible": {
+      "ignoreVersion": true
+    }
+  },
+  "quickapp": {},
+  "mp-weixin": {
+    "appid": "wxa2abb91f64032a2b",
+    "setting": {
+      "urlCheck": false
     },
-    "vueVersion" : "3",
-    "h5" : {
-        "router" : {
-            "base" : "/unibest/"
-        }
+    "usingComponents": true
+  },
+  "mp-alipay": {
+    "usingComponents": true,
+    "styleIsolation": "shared"
+  },
+  "mp-baidu": {
+    "usingComponents": true
+  },
+  "mp-toutiao": {
+    "usingComponents": true
+  },
+  "uniStatistics": {
+    "enable": false
+  },
+  "vueVersion": "3",
+  "h5": {
+    "router": {
+      "base": "/unibest/"
     }
-}
+  }
+}

src/pages/music/component/musicPlayback.vue

@@ -56,8 +56,8 @@
           />
           <!-- </view> -->
           <view class="time-info">
-            <text class="current-time">{{ audio.startTime }}</text>
-            <text class="total-time">{{ song.duration }}</text>
+            <text class="current-time">{{ formatTime(currentTime) }}</text>
+            <text class="total-time">{{ formatTime(duration) }}</text>
           </view>
         </view>
         <!-- 上一曲下一曲播放 -->
@@ -121,14 +121,40 @@
   const song = ref({})
   const audioSrc = ref('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3') // 替换为你的音频文件路径
   const isPlaying = ref(true) // 用来标识播放状态
-  const currentTime = ref(0)
+  const currentTime = ref(0) // 当前播放时间
+  const duration = ref(0) // 歌曲总时长
   const audio = uni.createInnerAudioContext()
-  audio.autoplay = true
+
+  // 格式化时间
+  const formatTime = (time) => {
+    const minutes = Math.floor(time / 60)
+    const seconds = Math.floor(time % 60)
+    return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
+  }
+
   onLoad((query) => {
     if (query.songDate) {
       song.value = JSON.parse(decodeURIComponent(query.songDate))
     }
   })
+  onMounted(() => {
+    // audio.autoplay = true
+    // audio.src = audioSrc.value
+    // 获取音频的总时长
+    audio.onCanplay(() => {
+      duration.value = audio.duration
+      console.log('Total duration:', duration.value) // 用于调试
+    })
+    // 更新 currentTime
+    audio.onTimeUpdate(() => {
+      currentTime.value = audio.currentTime
+    })
+    // 当音频播放完时，自动重置播放
+    audio.onEnded(() => {
+      isPlaying.value = false
+    })
+  })
+
   //   实现返回逻辑
   const goBack = () => {
     uni.navigateBack()
@@ -153,16 +179,31 @@
     console.log('下一曲')
   }
   // 实现播放/暂停切换逻辑
+  // const togglePlayPause = () => {
+  //   if (isPlaying.value) {
+  //     audio.autoplay = true
+  //     audio.src = audioSrc.value
+  //   } else {
+  //     audio.autoplay = false
+  //     audio.src = audioSrc.value
+  //   }
+  //   isPlaying.value = !isPlaying.value
+  // }
+  // 切换播放/暂停
   const togglePlayPause = () => {
     if (isPlaying.value) {
-      audio.autoplay = true
-      audio.src = audioSrc.value
+      console.log(111)
+      audio.pause()
     } else {
-      audio.autoplay = false
-      audio.src = audioSrc.value
+      audio.play()
+      console.log(222)
     }
     isPlaying.value = !isPlaying.value
-    console.log(audio.currentTime)
+  }
+
+  // 进度条拖动时，更新音频时间
+  const onSliderChange = () => {
+    audio.seek(currentTime.value)
   }
 </script>