jpcj-h5/src/hooks/exercise/audio.ts

import { Howl } from "howler";
import { ref, watch, ComputedRef } from "vue";

/**语音设置 */
export function useAudioSet(currentSubject: ComputedRef<any>) {
	const aotuPlayFlag = ref(false);

	let sound: Howl;
	/**
	 * 播放音频
	 * @param audioUrl
	 */
	const audioPlay = (audioUrl: string | string[]) => {
		audioPause();
		sound = new Howl({
			src: audioUrl,
		});
		sound.once("load", function () {
			sound.play();
		});
		if (typeof audioUrl === "object") {
			sound.once("end", () => {
				sound = new Howl({
					src: audioUrl[1],
				});
				sound.once("load", function () {
					sound.play();
				});
			});
		}
	};

	/**
	 * 读题
	 */
	const subjectAudioPlay = (type: "读题" | "读官方解释" | "读技巧解释" | "读题+答案") => {
		switch (type) {
			case "读题":
				currentSubject.value.issuemp3 && audioPlay(currentSubject.value.issuemp3);
				break;
			case "读官方解释":
				currentSubject.value.explainjsmp3 && audioPlay(currentSubject.value.explainjsmp3);
				break;
			case "读技巧解释":
				currentSubject.value.explainMp3 && audioPlay(currentSubject.value.explainMp3);
				break;
			case "读题+答案":
				currentSubject.value.issuemp3 && currentSubject.value.answermp3 && audioPlay([currentSubject.value.issuemp3, currentSubject.value.answermp3]);
				break;
			default:
				break;
		}
	};

	/**
	 * 停止播放
	 */
	const audioPause = () => {
		sound && sound.pause();
	};

	//音频模块end
	const aotuPlaySet = () => {
		aotuPlayFlag.value = !aotuPlayFlag.value;
		aotuPlayFlag.value ? subjectAudioPlay("读题") : audioPause();
	};

	//自动读题
	watch(currentSubject, () => {
		if (aotuPlayFlag.value) subjectAudioPlay("读题"); //自动读题
	});

	return {
		aotuPlayFlag,
		aotuPlaySet,
		subjectAudioPlay,
	};
}