更新

index.html

@@ -8,11 +8,11 @@
     content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
   <meta http-equiv="Cache-control" content="no-cache">
   <meta http-equiv="Cache" content="no-cache">
-  <meta http-equiv="Content-Security-Policy" content="
+  <!-- <meta http-equiv="Content-Security-Policy" content="
                               default-src * data: blob: ws: wss: gap://ready file://*;
                               style-src * 'unsafe-inline';
                               script-src * 'unsafe-inline' 'unsafe-eval';
-                              connect-src * ws: wss:;">
+                              connect-src * ws: wss:;"> -->
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <!-- 设置苹果工具栏颜色 -->
   <meta name="apple-mobile-web-app-status-bar-style" content="black" />
@@ -68,4 +68,4 @@
   <script type="module" src="/src/student/main.ts"></script>
 </body>
 
-</html>
+</html>

package-lock.json

@@ -29,7 +29,7 @@
         "mitt": "^3.0.0",
         "normalize.css": "^8.0.1",
         "numeral": "^2.0.6",
-        "plyr": "^3.7.3",
+        "plyr": "^3.7.8",
         "qrcode": "^1.5.1",
         "qrcode.vue": "^3.3.3",
         "query-string": "^7.1.1",
@@ -3676,8 +3676,7 @@
     "node_modules/custom-event-polyfill": {
       "version": "1.0.7",
       "resolved": "https://registry.npmmirror.com/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz",
-      "integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==",
-      "license": "MIT"
+      "integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w=="
     },
     "node_modules/dayjs": {
       "version": "1.11.3",
@@ -6607,10 +6606,9 @@
       "license": "MIT"
     },
     "node_modules/loadjs": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmmirror.com/loadjs/-/loadjs-4.2.0.tgz",
-      "integrity": "sha512-AgQGZisAlTPbTEzrHPb6q+NYBMD+DP9uvGSIjSUM5uG+0jG15cb8axWpxuOIqrmQjn6scaaH8JwloiP27b2KXA==",
-      "license": "MIT"
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/loadjs/-/loadjs-4.3.0.tgz",
+      "integrity": "sha512-vNX4ZZLJBeDEOBvdr2v/F+0aN5oMuPu7JTqrMwp+DtgK+AryOlpy6Xtm2/HpNr+azEa828oQjOtWsB6iDtSfSQ=="
     },
     "node_modules/locate-path": {
       "version": "5.0.0",
@@ -7856,9 +7854,9 @@
       }
     },
     "node_modules/plyr": {
-      "version": "3.7.3",
-      "resolved": "https://registry.npmjs.org/plyr/-/plyr-3.7.3.tgz",
-      "integrity": "sha512-ORULENBvEvvzMYXRQBALDmEi8P+wZt1Hr/NvHqchu/t7E2xJKNkRYWx0qCA1HETIGZ6zobrOVgqeAUqWimS7fQ==",
+      "version": "3.7.8",
+      "resolved": "https://registry.npmmirror.com/plyr/-/plyr-3.7.8.tgz",
+      "integrity": "sha512-yG/EHDobwbB/uP+4Bm6eUpJ93f8xxHjjk2dYcD1Oqpe1EcuQl5tzzw9Oq+uVAzd2lkM11qZfydSiyIpiB8pgdA==",
       "dependencies": {
         "core-js": "^3.26.1",
         "custom-event-polyfill": "^1.0.7",
@@ -8222,8 +8220,7 @@
     "node_modules/rangetouch": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/rangetouch/-/rangetouch-2.0.1.tgz",
-      "integrity": "sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA==",
-      "license": "MIT"
+      "integrity": "sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA=="
     },
     "node_modules/readable-stream": {
       "version": "3.6.0",
@@ -9343,8 +9340,7 @@
     "node_modules/url-polyfill": {
       "version": "1.1.12",
       "resolved": "https://registry.npmmirror.com/url-polyfill/-/url-polyfill-1.1.12.tgz",
-      "integrity": "sha512-mYFmBHCapZjtcNHW0MDq9967t+z4Dmg5CJ0KqysK3+ZbyoNOWQHksGCTWwDhxGXllkWlOc10Xfko6v4a3ucM6A==",
-      "license": "MIT"
+      "integrity": "sha512-mYFmBHCapZjtcNHW0MDq9967t+z4Dmg5CJ0KqysK3+ZbyoNOWQHksGCTWwDhxGXllkWlOc10Xfko6v4a3ucM6A=="
     },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
@@ -14718,9 +14714,9 @@
       "integrity": "sha512-Rhowlq24ey1VOeor+3wYOt9+MjaxBOJm1u4KlQgNC3+0xJ0LS4wq4iG57D/BPzvuD/7HHDGQOWJ+81oR2EI9bQ=="
     },
     "loadjs": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmmirror.com/loadjs/-/loadjs-4.2.0.tgz",
-      "integrity": "sha512-AgQGZisAlTPbTEzrHPb6q+NYBMD+DP9uvGSIjSUM5uG+0jG15cb8axWpxuOIqrmQjn6scaaH8JwloiP27b2KXA=="
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/loadjs/-/loadjs-4.3.0.tgz",
+      "integrity": "sha512-vNX4ZZLJBeDEOBvdr2v/F+0aN5oMuPu7JTqrMwp+DtgK+AryOlpy6Xtm2/HpNr+azEa828oQjOtWsB6iDtSfSQ=="
     },
     "locate-path": {
       "version": "5.0.0",
@@ -15586,9 +15582,9 @@
       }
     },
     "plyr": {
-      "version": "3.7.3",
-      "resolved": "https://registry.npmjs.org/plyr/-/plyr-3.7.3.tgz",
-      "integrity": "sha512-ORULENBvEvvzMYXRQBALDmEi8P+wZt1Hr/NvHqchu/t7E2xJKNkRYWx0qCA1HETIGZ6zobrOVgqeAUqWimS7fQ==",
+      "version": "3.7.8",
+      "resolved": "https://registry.npmmirror.com/plyr/-/plyr-3.7.8.tgz",
+      "integrity": "sha512-yG/EHDobwbB/uP+4Bm6eUpJ93f8xxHjjk2dYcD1Oqpe1EcuQl5tzzw9Oq+uVAzd2lkM11qZfydSiyIpiB8pgdA==",
       "requires": {
         "core-js": "^3.26.1",
         "custom-event-polyfill": "^1.0.7",

package.json

@@ -42,7 +42,7 @@
     "mitt": "^3.0.0",
     "normalize.css": "^8.0.1",
     "numeral": "^2.0.6",
-    "plyr": "^3.7.3",
+    "plyr": "^3.7.8",
     "qrcode": "^1.5.1",
     "qrcode.vue": "^3.3.3",
     "query-string": "^7.1.1",

public/osmd/index.html

@@ -52,7 +52,7 @@
       autoGenerateMutipleRestMeasuresFromRestMeasures: true,
       autoGenerateMultipleRestMeasuresFromRestMeasures: true,
     });
-    // osmd.EngravingRules.RenderMultipleRestMeasures = true;
+    osmd.EngravingRules.RenderMultipleRestMeasures = true;
     osmd.EngravingRules.CompactMode = true;
     osmd.EngravingRules.PageTopMarginNarrow = 5.0; // for compact mode
     osmd.EngravingRules.PageBottomMargin = 15.0;
@@ -172,4 +172,4 @@
   </script>
 </body>
 
-</html>
+</html>

src/views/accompany/music-detail.tsx

@@ -175,24 +175,16 @@ export default defineComponent({
       })
 
       player.value.on('ready', () => {
-        console.log('ready, playing')
         staffData.audioReady = true
         nextTick(async () => {
           // if (staffData.details.musicSheetType === 'SINGLE') {
           //   loading.value = false
           //   return
           // }
+
           await toDetail(staffData.details)
           renderStaff()
         })
-        player.value.muted = true
-        player.value.play()
-      })
-      player.value.on('loadedmetadata', () => {
-        if (player.value.muted) {
-          player.value.muted = false
-          player.value.pause()
-        }
       })
     }
 
@@ -294,66 +286,70 @@ export default defineComponent({
           </div>
         </div>
 
-        <OSticky position="bottom" varName="--footer-height">
-          <div class={styles.bottomStyle} style={{ background: '#fff' }}>
-            <div
-              class={[styles.audio, styles.collectCell]}
-              style={{ opacity: staffData.audioReady ? 1 : 0 }}
-            >
-              <audio id="player" controls ref={audioRef} style={{ height: '40px' }}>
-                <source src={staffData.details?.audioFileUrl} type="audio/mp3" />
-              </audio>
-            </div>
-
-            <div class={styles.footers}>
-              <div class={styles.iconGroup}>
+        {staffData.details.id && (
+          <OSticky position="bottom" varName="--footer-height">
+            <div class={styles.bottomStyle} style={{ background: '#fff' }}>
+              {staffData.details?.audioFileUrl && (
                 <div
-                  class={styles.icon}
-                  onClick={() => {
-                    if (loading.value) return
-                    downloadStatus.value = true
-                  }}
+                  class={[styles.audio, styles.collectCell]}
+                  style={{ opacity: staffData.audioReady ? 1 : 0 }}
                 >
-                  <img src={iconDownload} />
-                  <span>下载</span>
+                  <audio id="player" controls ref={audioRef} style={{ height: '40px' }}>
+                    <source src={staffData.details?.audioFileUrl} type="audio/mp3" />
+                  </audio>
                 </div>
-                {staffData.details?.musicSheetType === 'CONCERT' ? (
-                  <div
-                    class={styles.icon}
-                    onClick={() => {
-                      if (loading.value) return
-                      staffData.open = true
-                    }}
-                  >
-                    <img src={iconMusic} />
-                    <span>声轨</span>
-                  </div>
-                ) : (
+              )}
+
+              <div class={styles.footers}>
+                <div class={styles.iconGroup}>
                   <div
                     class={styles.icon}
                     onClick={() => {
                       if (loading.value) return
-                      staffData.status = true
+                      downloadStatus.value = true
                     }}
                   >
-                    <img src={iconChange} />
-                    <span>转谱</span>
+                    <img src={iconDownload} />
+                    <span>下载</span>
                   </div>
-                )}
+                  {staffData.details?.musicSheetType === 'CONCERT' ? (
+                    <div
+                      class={styles.icon}
+                      onClick={() => {
+                        if (loading.value) return
+                        staffData.open = true
+                      }}
+                    >
+                      <img src={iconMusic} />
+                      <span>声轨</span>
+                    </div>
+                  ) : (
+                    <div
+                      class={styles.icon}
+                      onClick={() => {
+                        if (loading.value) return
+                        staffData.status = true
+                      }}
+                    >
+                      <img src={iconChange} />
+                      <span>转谱</span>
+                    </div>
+                  )}
+                </div>
+                <Button
+                  round
+                  block
+                  type="primary"
+                  disabled={loading.value}
+                  color={'#FF8057'}
+                  onClick={onSubmit}
+                >
+                  开始练习
+                </Button>
               </div>
-              <Button
-                round
-                block
-                type="primary"
-                disabled={loading.value}
-                color={'#FF8057'}
-                onClick={onSubmit}
-              >
-                开始练习
-              </Button>
             </div>
-          </div>
-        </OSticky>
+          </OSticky>
+        )}
 
         <Popup
           v-model:show={staffData.status}