评分组件

/**
 * 挂载到 DOM 上
 * @param container div 容器元素或容器元素的 id。
 * @param config UI 配置
 */
public mount(container: HTMLElement | string, config?: ZegoPitchConfig): void

/** 传入音高线数组 */
public setStandardPitch(pitchList: ZegoPitch[]): void

/**
 * 设置当前播放时间和音阶，两个参数必须同时设置，保证数据同步性
 *
 * @param progress 当前播放时间
 * @param pitch 实时音高
 */
public setCurrentSongProgress(progress: number, pitch: number): void

/**
 * 设置高潮片段 当前播放时间和音阶，两个参数必须同时设置，保证数据同步性(仅用于高潮片段资源)
 *
 * @param progress 当前播放时间
 * @param pitch 实时音高
 * @param segmentBegin 高潮片段开始时间 （该字段在请求高潮片段资源时返回）
 * @param krcFormatOffset krc歌词对歌曲的偏移量 （该字段在krc歌词中返回）
 */
public setAccompanimentClipCurrentSongProgress(
    progress: number,
    pitch: number,
    segmentBegin: number,
   krcFormatOffset: number
): void

/**
 * 添加分数在当前时间点展示
 *
 * @param {number} score 分数
 */
public addScore(score: number): void

/**
 * 重置音高线数据
 */
public reset(): void

/**
 *获取标准音高线开始的时间
 * @returns
 */
public getPitchStartTime(): number;

/**
 * 设置 UI 配置
 * @param config
 */
public setUIConfig(config: ZegoPitchConfig): void

/**
 * 将音高线原始数据模型转为控件数据模型
 * 仅截取高潮片段开始时间到结束时间那段的数据(仅用于高潮片段资源)
 * @param pitchList 完整音高线原始model
 * @param segmentBegin 高潮片段开始时间 （该字段在请求高潮片段资源时返回）
 * @param segmentEnd 高潮片段结束时间 （该字段在请求高潮片段资源时返回）
 * @param preludeDuration 高潮片段前奏时间 （该字段在请求高潮片段资源时返回）
 * @param krcFormatOffset krc歌词对歌曲的偏移量 （该字段在krc歌词中返回）
 * @return
 */
public parseAccompanimentClipPitch(
    pitchList: ZegoPitch[],
    segmentBegin: number,
    segmentEnd: number,
   preludeDuration: number,
   krcFormatOffset = 0
): ZegoPitch[]

interface ZegoPitch {
  begin_time: number; // 开始时间，单位为毫秒，此时间以歌曲起始时间为基准。
  duration: number; // 持续时长。
  value: number; // 音高值
}

interface ZegoPitchConfig {
    /**五线谱横线颜色 */
    staffColor: string;
    /**竖线颜色 */
    verticalLineColor: string;
    /**默认音高线颜色 */
    standardPitchColor: string;
    /**击中音高线颜色 */
    hitPitchColor: string;
    /**音调指示器颜色 */
    pitchIndicatorColor: string;
    /**分数文本颜色 */
    scoreTextColor: string;
}

<div id="pitchView" style="width: 100%; height: 120px; background-color: #1d0741; border-radius: 5px; padding: 0 20px;"></div>

// 初始化音高线组件
const pitchView = new ZegoPitchView();
pitchView.mount("pitchView");

// 设置样式
pitchView.setUIConfig({
    standardPitchColor: "#5e3b8e", //默认音高线颜色
    hitPitchColor: "#f34160", // 击中音高线颜色
    pitchIndicatorColor: "#fff", // 音调指示器颜色
    staffColor: "#28104d", //五线谱横线颜色
    verticalLineColor: "#3e2869", //竖线颜色
    scoreTextColor: "#fff" //分数文本颜色
})

/** 获取 Express 引擎实例 */
const zg = new ZegoExpressEngine();

/** 获取版权音乐实例 */
const copyrightedMusic = zg.createCopyrightedMusic();

/** 调用接口获取标准音高线 */
copyrightedMusic.getStandardPitch().then(({ errorCode, pitch }) => {
  if (errorCode == 0) {
    // 获取音高线数据给评分 UI 组件
    pitchView.setStandardPitch(pitch);
  }
})

parseAccompanimentClipPitch(
    pitchList: ZegoPitch[],
    segmentBegin: number,
    segmentEnd: number,
    preludeDuration: number,
    krcFormatOffset = 0
  ): ZegoPitch[]

/** 获取播放器对象 */
const accompanyPlayer = document.getElementById("accompanyPlayer");

/** 设置播放器对象回调 */

accompanyPlayer.addEventListener("play", async (event) => {
    if (!accompanyPlayer.paused) {
        // 请注意，需要在播放器 play 事件回调中监听到歌曲资源已经开始播放，才能调用 startScore 接口
        const res = await copyrightedMusic.startScore({
            localStream, // localStream 为采集麦克风音频的媒体流对象，通过 createZegoStream 接口创建
            accompanyPlayer, // accompanyPlayer 为播放伴奏的播放器
            resourceID
        })
        if(res === 0) {
            console.log("开始打分")
        }
    }
});

/** 播放器进度变化回调 */
let pitchTimer = setInterval(async () => {
    if (!accompanyPlayer.paused && pitchView) {
        const value = await copyrightedMusic.getCurrentPitch(resourceID);
        console.info("getCurrentPitch", value)
        // 音高线组件更新播放进度
        pitchView.setCurrentSongProgress(
            accompanyPlayer.currentTime * 1000,
            value
        );
    }
  // 更新频率 60ms
}, 60);

// 音高线组件更新播放进度
pitchView.setCurrentSongProgress(
    accompanyPlayer.currentTime * 1000,
    value
);

/**
 * 设置高潮片段 当前播放时间和音阶，两个参数必须同时设置，保证数据同步性(仅用于高潮片段资源)
 *
 * @param progress 当前播放时间
 * @param pitch 实时音高
 * @param segmentBegin 高潮片段开始时间 （该字段在请求高潮片段资源时返回）
 * @param krcFormatOffset krc 歌词对歌曲的偏移量 （该字段在 krc 歌词中返回）
 */
pitchView.setAccompanimentClipCurrentSongProgress(
    songPlayer.currentTime * 1000,
    value,
    segmentBegin,
    krcFormatOffset
);

 /** 设置换行监听 */
async function playLineFinished(currentIndex) {
    // 在某些情况下，打分处理结果会出现延迟，建议开发者延迟 100ms 获取分数
    setTimeout( async () => {
        const total = await copyrightedMusic.getTotalScore(resourceID);
        const average = await copyrightedMusic.getAverageScore(resourceID);
        const preScore = await copyrightedMusic.getPreviousScore(resourceID);
        console.log(`满分：${fullScore}, 总分：${total}, 平均分：${average}, 上句分: ${preScore}
          暂停：${isScorePaused}, 打分中：${isScoreRunning}
        `)
        if (preScore >= 0) {
          pitchView.addScore(preScore);
          console.warn("zc.cm addScore", postion, preScore);
        }
    }, 100)
};
lyricView.onLyricLineFinished = playLineFinished