Merge branch 'hqyDev' of http://git.dayaedu.com/liushengqiang/classroom-app into jenkins-test

src/views/creation/audioVisualDraw.ts

@@ -13,13 +13,13 @@
       canvasDom.width = width
       canvasDom.height = height
       // audio
-      const audioCtx = new AudioContext()
-      const source = audioCtx.createMediaElementSource(audioDom)
-      const analyser = audioCtx.createAnalyser()
-      analyser.fftSize = fftSize
-      source?.connect(analyser)
-      analyser.connect(audioCtx.destination)
-      const dataArray = new Uint8Array(fftSize / 2)
+      //const audioCtx = new AudioContext()
+      //const source = audioCtx.createMediaElementSource(audioDom)
+      //const analyser = audioCtx.createAnalyser()
+      //analyser.fftSize = fftSize
+      //source?.connect(analyser)
+      //analyser.connect(audioCtx.destination)
+      //const dataArray = new Uint8Array(fftSize / 2)
       const draw = (data: Uint8Array, ctx: CanvasRenderingContext2D, { lineGap, canvWidth, canvHeight, canvFillColor, lineColor }: propsType) => {
         if (!ctx) return
         const w = canvWidth
@@ -66,8 +66,8 @@
       }
       const requestAnimationFrameFun = () => {
         requestAnimationFrame(() => {
-          analyser?.getByteFrequencyData(dataArray)
-          draw(dataArray, canvasCtx, {
+          //analyser?.getByteFrequencyData(dataArray)
+          draw(generateMixedData(48), canvasCtx, {
             lineGap: 2,
             canvWidth: width,
             canvHeight: height,
@@ -99,3 +99,16 @@
         pauseVisualDraw
       }
     }
+
+export function generateMixedData(size:number) {
+      const dataArray = new Uint8Array(size);
+      const noiseAmplitude = 30;
+      const frequency = 0.1;
+      const amplitude = 128;
+      for (let i = 0; i < size; i++) {
+          const noise = Math.floor(Math.random() * noiseAmplitude);
+          const wave = amplitude * (0.5 + 0.5 * Math.sin(frequency * i));
+          dataArray[i] = Math.min(255, Math.max(0, Math.floor(wave + noise)));
+      }
+      return dataArray;
+}

src/views/creation/index-share.tsx

@@ -568,21 +568,23 @@ export default defineComponent({
                     {/* 谱面 */}
                     {
                       staffState.staffSrc &&
-                      <div
-                        class={[styles.staffBox, staffState.isShow && styles.staffBoxShow]}
-                        style={
-                          {
-                            '--staffBoxHeight':staffState.height
+                      <div class={[styles.staffBoxCon, staffState.isShow && styles.staffBoxShow]}>
+                        <div
+                          class={styles.staffBox}
+                          style={
+                            {
+                              '--staffBoxHeight':staffState.height
+                            }
                           }
-                        }
-                      >
-                        <div class={styles.mask}></div>
-                        <iframe
-                          ref={staffDom}
-                          class={styles.staff}
-                          frameborder="0"
-                          src={staffState.staffSrc}>
-                        </iframe>
+                        >
+                          <div class={styles.mask}></div>
+                          <iframe
+                            ref={staffDom}
+                            class={styles.staff}
+                            frameborder="0"
+                            src={staffState.staffSrc}>
+                          </iframe>
+                        </div>
                       </div>
                     }
                   </>

src/views/creation/index.module.less

@@ -35,7 +35,6 @@
 .playSection{
   height: 210px;
   position: relative;
-  overflow: hidden;
   &::after{
     position: absolute;
     content: "";
@@ -192,18 +191,26 @@
     top: 10px;
     z-index: 15;
   }
+  .staffBoxCon{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 1;
+    overflow: hidden;
+    visibility: hidden;
+    &.staffBoxShow{
+      visibility: initial;
+    }
+  }
   .staffBox{
     width: 100%;
     height: calc(var(--staffBoxHeight) + 12px);
     position: absolute;
     bottom: 0;
     padding-bottom: 12px;
-    visibility: hidden;
     background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
-    z-index: 1;
-    &.staffBoxShow{
-      visibility: initial;
-    }
     .staff{
       width: 100%;
       height: 100%;
@@ -655,8 +662,18 @@
 }
 
 // 平板样式
-.creationTablet{
-
+.creation{
+  &.creationTablet{
+    .playSection{
+      height: 340px;
+    }
+    .musicSection{
+      min-height: calc(100vh - var(--barheight) - 20px - 14vh - 340px - 55px - 80px);
+    }
+    .musicShareSection{
+      min-height: calc(100vh - var(--barheight) - 20vh - 340px - 55px);
+    }
+  }
 }
 
 .loadingPop {

src/views/creation/index.tsx

@@ -58,6 +58,7 @@ import audioBga2 from "./images/rightCloud.json";
 import videobg from "./images/videobg.png";
 import playProgressData from "./playCreation/playProgress"
 import Loading from './loading';
+import { generateMixedData } from "./audioVisualDraw"
 
 export default defineComponent({
   name: 'creation-detail',
@@ -271,10 +272,10 @@ export default defineComponent({
       canvasDom.width = width
       canvasDom.height = height
       // audio
-      let audioCtx : AudioContext | null = null
-      let analyser : AnalyserNode | null = null
-      let source : MediaElementAudioSourceNode | null = null
-      const dataArray = new Uint8Array(fftSize / 2)
+      // let audioCtx : AudioContext | null = null
+      // let analyser : AnalyserNode | null = null
+      // let source : MediaElementAudioSourceNode | null = null
+      // const dataArray = new Uint8Array(fftSize / 2)
       const draw = (data: Uint8Array, ctx: CanvasRenderingContext2D, { lineGap, canvWidth, canvHeight, canvFillColor, lineColor }: propsType) => {
         if (!ctx) return
         const w = canvWidth
@@ -321,8 +322,8 @@ export default defineComponent({
       }
       const requestAnimationFrameFun = () => {
         requestAnimationFrame(() => {
-          analyser?.getByteFrequencyData(dataArray)
-          draw(dataArray, canvasCtx, {
+          //analyser?.getByteFrequencyData(dataArray)
+          draw(generateMixedData(48), canvasCtx, {
             lineGap: 2,
             canvWidth: width,
             canvHeight: height,
@@ -336,14 +337,14 @@ export default defineComponent({
       }
       let isPause = true
       const playVisualDraw = () => {
-        if (!audioCtx) {
-          audioCtx = new AudioContext()
-          source = audioCtx.createMediaElementSource(audioDom)
-          analyser = audioCtx.createAnalyser()
-          analyser.fftSize = fftSize
-          source?.connect(analyser)
-          analyser.connect(audioCtx.destination)
-        }
+        // if (!audioCtx) {
+        //   audioCtx = new AudioContext()
+        //   source = audioCtx.createMediaElementSource(audioDom)
+        //   analyser = audioCtx.createAnalyser()
+        //   analyser.fftSize = fftSize
+        //   source?.connect(analyser)
+        //   analyser.connect(audioCtx.destination)
+        // }
         //audioCtx.resume()  // 重新更新状态   加了暂停和恢复音频音质发生了变化  所以这里取消了
         isPause = false
         requestAnimationFrameFun()
@@ -599,21 +600,23 @@ export default defineComponent({
             {/* 谱面 */}
             {
               staffState.staffSrc &&
-              <div
-                class={[styles.staffBox, staffState.isShow && styles.staffBoxShow]}
-                style={
-                  {
-                    '--staffBoxHeight':staffState.height
+              <div class={[styles.staffBoxCon, staffState.isShow && styles.staffBoxShow]}>
+                <div
+                  class={styles.staffBox}
+                  style={
+                    {
+                      '--staffBoxHeight':staffState.height
+                    }
                   }
-                }
-              >
-                <div class={styles.mask}></div>
-                <iframe
-                  ref={staffDom}
-                  class={styles.staff}
-                  frameborder="0"
-                  src={staffState.staffSrc}>
-                </iframe>
+                >
+                  <div class={styles.mask}></div>
+                  <iframe
+                    ref={staffDom}
+                    class={styles.staff}
+                    frameborder="0"
+                    src={staffState.staffSrc}>
+                  </iframe>
+                </div>
               </div>
             }
           </div>

src/views/creation/playCreation/index.module.less

@@ -1,6 +1,6 @@
 .playCreation{
   width: 100vw;
-  height: 100vh;
+  height: var(--creationHeight, 100vh);
   position: relative;
   overflow: hidden;
   &.landscapeScreen{
@@ -19,6 +19,7 @@
         width: var(--creationHeight, 100vh) !important;
         height: 100vw !important;
         min-height: 100vw !important;
+        transform: translate(0); // 解决旋转之后 某些浏览器z-index 图层变化了
       }
     }
   }
@@ -111,6 +112,16 @@
       width: 100%;
       height: 100%;
   }
+  &.ipadPlayCreation{
+    .audioBox {
+      .audioBga{
+        margin-left: 10%;
+        margin-top: 10%;
+        width: 80%;
+        height: 62%;
+      }
+    }
+  }
   .audioBox{
       width: 100%;
       height: 100%;

src/views/creation/playCreation/index.tsx

@@ -17,6 +17,7 @@ import { usePageVisibility } from '@vant/use';
 import playProgressData from "./playProgress"
 import Loading from '../loading';
 import { NoticeBar } from "vant"
+import { generateMixedData } from "../audioVisualDraw"
 
 export default defineComponent({
   name: 'playCreation',
@@ -166,13 +167,13 @@ export default defineComponent({
       canvasDom.width = width
       canvasDom.height = height
       // audio
-      const audioCtx = new AudioContext()
-      const source = audioCtx.createMediaElementSource(audioDom)
-      const analyser = audioCtx.createAnalyser()
-      analyser.fftSize = fftSize
-      source?.connect(analyser)
-      analyser.connect(audioCtx.destination)
-      const dataArray = new Uint8Array(fftSize / 2)
+      // const audioCtx = new AudioContext()
+      // const source = audioCtx.createMediaElementSource(audioDom)
+      // const analyser = audioCtx.createAnalyser()
+      // analyser.fftSize = fftSize
+      // source?.connect(analyser)
+      // analyser.connect(audioCtx.destination)
+      // const dataArray = new Uint8Array(fftSize / 2)
       const draw = (data: Uint8Array, ctx: CanvasRenderingContext2D, { lineGap, canvWidth, canvHeight, canvFillColor, lineColor }: propsType) => {
         if (!ctx) return
         const w = canvWidth
@@ -219,8 +220,8 @@ export default defineComponent({
       }
       const requestAnimationFrameFun = () => {
         requestAnimationFrame(() => {
-          analyser?.getByteFrequencyData(dataArray)
-          draw(dataArray, canvasCtx, {
+          // analyser?.getByteFrequencyData(dataArray)
+          draw(generateMixedData(48), canvasCtx, {
             lineGap: 2,
             canvWidth: width,
             canvHeight: height,
@@ -425,7 +426,7 @@ export default defineComponent({
     })
     return () =>
     <div id="landscapeScreenPlay"
-      class={[styles.playCreation,landscapeScreen.value && styles.landscapeScreen,!loaded.value && styles.notLoaded]}
+      class={[styles.playCreation,landscapeScreen.value && styles.landscapeScreen,!loaded.value && styles.notLoaded, browser().isTablet && styles.ipadPlayCreation]}
       style={
         {
           "--creationHeight":creationHeight.value ? creationHeight.value+"px" : "100vh"