|
|
@@ -104,7 +104,7 @@ export default defineComponent({
|
|
|
shareData._plrl.on('pause', () => {
|
|
|
pauseVisualDraw()
|
|
|
});
|
|
|
- }, 500); // 弹窗动画是0.25秒 这里用定时器 确保canvas 能获取到宽高
|
|
|
+ }, 600); // 弹窗动画是0.25秒 这里用定时器 确保canvas 能获取到宽高
|
|
|
}
|
|
|
shareData.isInitPlyr = true;
|
|
|
});
|
|
|
@@ -123,10 +123,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
|
|
|
@@ -172,30 +172,44 @@ export default defineComponent({
|
|
|
ctx.fillRect(0, 0, w, h)
|
|
|
}
|
|
|
const requestAnimationFrameFun = () => {
|
|
|
- requestAnimationFrame(() => {
|
|
|
- analyser?.getByteFrequencyData(dataArray)
|
|
|
- draw(dataArray, canvasCtx, {
|
|
|
- lineGap: 2,
|
|
|
- canvWidth: width,
|
|
|
- canvHeight: height,
|
|
|
- canvFillColor: "transparent",
|
|
|
- lineColor: "rgba(255, 255, 255, 0.3)"
|
|
|
- })
|
|
|
- if (!isPause) {
|
|
|
- requestAnimationFrameFun()
|
|
|
- }
|
|
|
- })
|
|
|
+ // requestAnimationFrame(() => {
|
|
|
+ // //analyser?.getByteFrequencyData(dataArray)
|
|
|
+ // draw(generateMixedData(48), canvasCtx, {
|
|
|
+ // lineGap: 2,
|
|
|
+ // canvWidth: width,
|
|
|
+ // canvHeight: height,
|
|
|
+ // canvFillColor: "transparent",
|
|
|
+ // lineColor: "rgba(255, 255, 255, 0.3)"
|
|
|
+ // })
|
|
|
+ // if (!isPause) {
|
|
|
+ // requestAnimationFrameFun()
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ const _time = setInterval(() => {
|
|
|
+ if (isPause) {
|
|
|
+ clearInterval(_time)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ //analyser?.getByteFrequencyData(dataArray)
|
|
|
+ draw(generateMixedData(38), canvasCtx, {
|
|
|
+ lineGap: 3,
|
|
|
+ canvWidth: width,
|
|
|
+ canvHeight: height,
|
|
|
+ canvFillColor: "transparent",
|
|
|
+ lineColor: "rgba(255, 255, 255, 0.3)"
|
|
|
+ })
|
|
|
+ }, 300);
|
|
|
}
|
|
|
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()
|
|
|
@@ -214,7 +228,22 @@ export default defineComponent({
|
|
|
pauseVisualDraw
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+ function generateMixedData(size:number) {
|
|
|
+ const dataArray = new Uint8Array(size);
|
|
|
+ const baseNoiseAmplitude = 30;
|
|
|
+ const minFrequency = 0.01;
|
|
|
+ const maxFrequency = 0.2;
|
|
|
+ const minAmplitude = 50;
|
|
|
+ const maxAmplitude = 150;
|
|
|
+ for (let i = 0; i < size; i++) {
|
|
|
+ const frequency = minFrequency + Math.random() * (maxFrequency - minFrequency);
|
|
|
+ const amplitude = minAmplitude + Math.random() * (maxAmplitude - minAmplitude);
|
|
|
+ const wave = amplitude * (0.5 + 0.5 * Math.sin(frequency * i));
|
|
|
+ const noise = Math.floor(Math.random() * baseNoiseAmplitude) - baseNoiseAmplitude / 2;
|
|
|
+ dataArray[i] = Math.min(255, Math.max(0, Math.floor(wave + noise)));
|
|
|
+ }
|
|
|
+ return dataArray;
|
|
|
+ }
|
|
|
return () => (
|
|
|
<>
|
|
|
<div class={[styles.headerTop, browserInfo.android && styles.android]}>
|
|
|
@@ -233,7 +262,7 @@ export default defineComponent({
|
|
|
|
|
|
{/* 音准、节奏、完整度纬度 */}
|
|
|
|
|
|
- <div class={[styles.middle, isPad.value && styles.padMiddle]}>
|
|
|
+ <div class={[styles.middle, isPad && styles.padMiddle]}>
|
|
|
{state.isPercussion ? null : (
|
|
|
<div onClick={() => handleChange("intonation")} class={[styles.cItem, "evaluting-report-1", itemType.value === "intonation" && styles.active]}>
|
|
|
<span class={styles.mScore}>{scoreData.value.intonation}分</span>
|
|
|
@@ -436,7 +465,7 @@ export default defineComponent({
|
|
|
shareData._plrl?.pause();
|
|
|
}}
|
|
|
>
|
|
|
- <div class={[styles.playerBox, isPad.value && styles.padPlayerBox]}>
|
|
|
+ <div class={[styles.playerBox, isPad && styles.padPlayerBox]}>
|
|
|
{mediaType.value === "audio" ? (
|
|
|
<div class={styles.audioBox}>
|
|
|
<canvas class={styles.audioVisualizer} id="audioVisualizer"></canvas>
|
