diff --git a/src/components/Music.vue b/src/components/Music.vue index 40c381a..34c2f32 100644 --- a/src/components/Music.vue +++ b/src/components/Music.vue @@ -119,17 +119,37 @@ const changeMusicIndex = (type) => { }; onMounted(() => { - // 空格键事件 - window.addEventListener("keydown", (e) => { + // 全局键盘事件 + const handleKeydown = (e) => { if (!store.musicIsOk) { return; } - if (e.code == "Space") { - changePlayState(); + switch (e.code) { + case "Space": // 播放/暂停 + e.preventDefault(); // 阻止页面默认滚动 + changePlayState(); + break; + case "PageUp": // 上一曲 + e.preventDefault(); + changeMusicIndex(0); + break; + case "PageDown": // 下一曲 + e.preventDefault(); + changeMusicIndex(1); + break; } - }); + }; + + // 添加键盘事件监听 + window.addEventListener("keydown", handleKeydown); + // 挂载方法至 window window.$openList = openMusicList; + + // 卸载时移除事件监听 + onUnmounted(() => { + window.removeEventListener("keydown", handleKeydown); + }); }); // 监听音量变化 diff --git a/src/utils/speech.js b/src/utils/speech.js index 010cc8b..eb66a00 100644 --- a/src/utils/speech.js +++ b/src/utils/speech.js @@ -8,7 +8,7 @@ let timeoutId = null; * Speech * Made by NanoRocky * 使用指定参数生成语音并播放音频。 - * 该功能原为 Azure 设计,理应兼容大部分使用 post 传参的 api 。请自行根据要求修改! + * 该功能原为 Azure 设计,理应兼容大部分使用 post 传参的 api 。请自行根据要求修改!如果也使用 Azure ,您可直接使用 https://github.com/NanoRocky/AzureSpeechAPI-by-PHP 完成 API 部署 * https://learn.microsoft.com/zh-cn/azure/ai-services/speech-service/speech-synthesis-markup-voice * * @param {string} text - 朗读的文本