2022年8月21日 - 2023年7月31日

为了在掘金水篇文，我写了个诗词朗诵网站 🤦‍♂️

最近参加掘金的更文挑战，着实被榨干 🤦‍♂️，日更实在是太可怕了。为了今天的日更，不得不花了大几十分钟写了个诗词朗诵的网站。前排先放链接：poetry-reader

先放个动图吧：

emm，不过动图没声音，想要体验的还是去上面的网站去看下吧。

下面介绍下站点用到的一些东西。

诗词数据

诗词数据主要来自这个 chinese-poetry 库，其中包含了几十万首唐诗宋词，然而里面主要是静态数据，要直接用在站点要么得搞个服务端、要么得直接把数据都扒下来，然后无意间在该库的网站中找到了关于今日诗词 API 的鸣谢。然后果断使用了今日诗词的 API。

直接通过 npm install 安装

npm -i jinrishici --save

然后引入即可：

import { load, Res } from 'jinrishici';
load(result => {
    poetry.value = result;
});

至于官网的示例代码：

const jinrishici = require('jinrishici');
jinrishici.load(result => {
    console.log(result);
});

由于使用 vite3 改成了 import，由于今日诗词 API 没有提供 ts 描述，所以自己补充了下描述文件。

declare module 'jinrishici' {
    interface Res {
        status: 'success' | 'error';
        data: {
            id: string;
            content: string;
            popularity: number;
            origin: {
                title: string;
                dynasty: string;
                author: string;
                content: string[];
            };
            matchTags: string[];
            recommendedReason: string;
        };
        token: string;
        ipAddress: string;
        warning: null;
    }

    interface LoadHandler {
        (poetry: Res): void;
    }
    interface Load {
        (handler: LoadHandler): void;
    }
    export const load: Load;
    export { Res };
}

朗读

朗读直接使用 Web Speech API，将诗词通过 speechSynthesis 进行播放，也遇到一些问题：

无法主动播放音频

就是无法通过脚本主动调用播放的 API，比如进入页面后直接播放当前诗歌，会直接报错 not-allowed，了解了下大概还是被滥用，导致和弹窗一样被浏览器限制了，必须由用户行为触发才能正常播放。

所以无奈的将进入页面自动播放取消了，改成了点击按钮才能播放。

部分浏览器无法播放

调用 speechSynthesis.speak() 时，Safari 无效果，并且在 Safari 下，getVoices 列表是空的，在 stackoverflow 找到了对应的提问但是却没回答。

由于事件原因没多研究，只能随手加了个报错处理解决了一下。

动画

为了避免页面太单调，使用了 Web Animations API 快速随手写了个渐入动画。之前一篇文有介绍该系列 API：孤陋寡闻了，才知道已经可以用 JS 来控制 CSS 动画了

由于 Web Animations API 可以方便的插入动画，并在动画完成后做处理，写起来非常简单：

const doAnimate = async (target: keyof typeof selector, index: number = 0) => {
    const dom = document.querySelectorAll(selector[target]);
    const animate = dom[index]?.animate(keyframes, animateOptions);
    await animate.finished;
    (dom[index] as HTMLElement).style.opacity = '1';
};