油库里合成器的纯前端实现

仓库: Love-Kogasa/zh-yukkuri-offline
tip: 前端模拟合成性能较差

依赖

构建

aquestalk.js的使用需要构建一下，我用的rollup整和到一个文件里，这样方便
我在zh-yukkuri-offline中放了构建后微改动的版本，可以直接使用
就普通的构建(tsc或者npm run build)，然后rollup整和，我懒得写上命令了
unicorn-x86.js我们使用aquestalk.js docs-src中构建过的版本，会快一些

基本合成

加载aquestalk.js需要jszip，encoding-japanese以及unicorn来模拟
aquestalk.js只是一个AquesTalk1 f1的加载器，f1的dll文件可以去官网下载，也可以直接从仓库里下载zip
使用zip加载aqtk的原因详见y52en/aquestalk.js的自述文件，简单来说是用来规避AqLicence限制的举措
建议使用mjs编写主要脚本，这样可以省点事

1
2
3
4
import {loadAquesTalk} from "aquestalk.js"
var engine = await loadAquesTalk("存放dll的zip文件名.zip", "dll线路")
var wav = engine.run("一些支持的字符"/*, 速度(默认100) 但似乎用不了*/)
// wav是一个Uint8Array对象

播放和下载功能直接基于y52en/aquestalk.js的demo的play_wav函数改编就好

1
2
3
4
5
6
7
8
9
10
// 该函数用来播放音频
async function play_wav(wav) {
  const blob = new Blob([wav], { type: "audio/wav" });
  const url = URL.createObjectURL(blob);
  // 如果是下载，把下面换成
  // window.open(url) 即可
  const audio = new Audio(url);
  await audio.play();
  URL.revokeObjectURL(url);
}

词汇转换

只涉及中文转换我们直接用tiny-pinyin，PinyinToKana就可以 

1
2
3
4
5
6
7
8
9
var conv = await PinyinToKana.loadDict("converter.tsv")
// 直接用默认的tsv就行
function converter(text) {
    text = text.replaceAll(" ", "_")
    // 这里是为了防止错误处理非拼音
    return converter.pinyinToKana(
        Pinyin.parse( text ).map( t => t.type === 2 ? t.target + " " : t.source ).join( "" )
    ).replaceAll("_", " ")
}

数字转换使用number-to-chinese-words，使用正则匹配数字替换成中文即可.
正则如下:

1
/-{0,1}\d+(\.\d+){0,1}/g

虽然不好看，但是有效
number-to-chinese-words食用方法，参见 https://www.npmjs.com/package/number-to-chinese-words

使用wanakana处理romaji，我这里把这一步放在了converter的最后，整个函数是这样的.
该函数可以在xlib/converter/converter.js中找到

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// xlib/converter/converter.js
var chineseNumber = window.index.NumberToChineseWords

async function initConverter() {
    var converter = await PinyinToKana.loadDict("static/converter.tsv")
    return string => {
        string = string.replace(/-{0,1}\d+(\.\d+){0,1}/g, matched => {
            try {
                return chineseNumber.toWords(Number (matched))
            } catch(error) {
                return matched
            }
        }).replaceAll(" ", "_")
        var kana = converter.pinyinToKana(
            Pinyin.parse( string ).map( t => t.type === 2 ? t.target + " " : t.source ).join( "" )
        ).replaceAll("_", " ")
        return wanakana.toKatakana(kana)
    }
}

// static/index.js
// ...
const convert = await initConverter()
// ...

结合起来

1
2
3
var text = "要播放的字符114514"
var wav = await engine.run(convert(text))
await play_wav(wav)

部署

zh-yukkuri-offline 可以在线体验，也可以自己部署
zh-yukkuri-offline是一个纯前端页面，直接克隆仓库，不需要构建即可按正常的部署方法部署
静态页部署就不用我教了吧(

感谢阅读(◦˙▽˙◦)

说些什么吧！

waline