こんにちは、AI Shiftの@jabelicです。
この記事はAI Shift Advent Calendar 2024の21日目の記事です。
この度、SSML Utilitiesというライブラリを公開しましたのでこれについて書きます。
SSMLとは
Speech Synthesis Markup Language (SSML) は、テキスト音声合成システムのためのXMLベースのマークアップ言語です。SSMLを使用することで、開発者は合成音声の発音、イントネーション、速度、ボリュームなどを細かく制御できます。
SSMLの主な特徴は以下の通りです：
- 標準化されたマークアップ言語 [1]
- XMLベースの構文
- 音声合成エンジンへの詳細な指示が可能
- 複数の音声合成プラットフォームでサポートされている
SSMLのサンプル
SSMLドキュメントの基本構造は以下のようになります：
<speak>
Here are <say-as interpret-as="characters">SSML</say-as> samples.
I can pause <break time="3s"/>.
I can play a sound
<audio src="https://www.example.com/MY_MP3_FILE.mp3">didn't get your MP3 audio file</audio>.
I can speak in cardinals. Your number is <say-as interpret-as="cardinal">10</say-as>.
Or I can speak in ordinals. You are <say-as interpret-as="ordinal">10</say-as> in line.
Or I can even speak in digits. The digits for ten are <say-as interpret-as="characters">10</say-as>.
I can also substitute phrases, like the <sub alias="World Wide Web Consortium">W3C</sub>.
Finally, I can speak a paragraph with two sentences.
<p><s>This is sentence one.</s><s>This is sentence two.</s></p>
</speak>
例えば<break time="3s"/>というのは3秒間を開ける、という意味です。他にもaudioタグを使用してmp3を差し込めたりします。
何を作ったの
Web上で使うSSMLのエディターです。syntax highlightしてくれます。validationやformatterはありません。
今のところReactのみですが、他のFWのエディターも用意できたらいいなと思っています。
このエディターを実現するために、packageをcore, highlighter, editor, の3つに分けて開発しました。
なぜ作ったの
既存の有名なエディタのライブラリはXML用というより色々な言語に対応しているものがほとんどかと思います。現状そういった機能は必要なく、必要最小限の機能に絞った軽量なライブラリを作りたいと考えました。
また、自分の要件に合わせて柔軟に機能を追加・カスタマイズできる設計にしたいということもあります。特にSSMLに特化したエディターということで、将来的にvalidatorなどの機能も追加していきたいと考えています。そのためにも、自分でコントロールできる独自のライブラリとして開発することにしました。
使用方法
@ssml-utilities/editor-react の使い方
import { SSMLEditor } from "@ssml-utilities/editor-react";
function App() {
const [ssml, setSSML] = useState("<speak>Hello, world!</speak>");
return (
<SSMLEditor
initialValue={ssml}
onChange={(value) => setSSML(value)}
width="800px"
height="400px"
/>
);
}
READMEにも書いていますが、こんな感じです。propertyは全てoptionalにしておきました。
@ssml-utilities/highlighterの使い方
react以外をお使いの方はこちらを使うことになると思います。すみません。
import { ssmlHighlighter } from "@ssml-utilities/highlighter";
const ssml = "<speak>Hello <emphasis>world</emphasis>!</speak>";
const options = {
classes: {
tag: "ssml-tag",
attribute: "ssml-attribute",
attributeValue: "ssml-attribute-value",
text: "ssml-text",
},
};
const result = ssmlHighlighter.highlight(ssml, options);
if (result.ok) {
console.log(result.value);
}
こちらもREADMEに書いてある通りですが、このように使用します。highlight関数はHTMLを返しますので、ReactならdangerouslySetInnerHTML, Vueならv-htmlを使用してください。
result.valueは以下のようになります。
<span class="ssml-tag"><speak></span><span class="ssml-text">Hello </span><span class="ssml-tag"><emphasis></span><span class="ssml-text">world</span><span class="ssml-tag"></emphasis></span><span class="ssml-text">!</span><span class="ssml-tag"></speak></span>
@ssml-utilities/core の使い方
SSMLをhighlightするにあたっての中核機能を提供するパッケージです。
SSML UtilitiesではSSMLを有向非巡回グラフを構築して、それを再度組み立てる、ということをしています。そのうち、core packageはSSMLの解析、DAG（有向非巡回グラフ）の構築を主に行なっています。
SSMLの解析を行うには以下のようにします。
import { parseSSML } from "@ssml-utilities/core";
const ssml = "<speak>Hello <emphasis>world</emphasis>!</speak>";
const result = parseSSML(ssml);
if (result.ok) {
const dag = result.value;
console.log(dag.debugPrint())
}
result.valueには構築されたDAGが返ってきます。
SSMLDAG classのdebugPrint methodで中身を確認できます：
Node node_0:
Type: root
Parents:
Children: node_1
Node node_1:
Type: element
Value: <speak>
Parents: node_0
Children: node_2, node_3, node_6, node_7
Node node_2:
Type: text
Value: Hello
Parents: node_1
Children:
Node node_3:
Type: element
Value: <emphasis>
Parents: node_1
Children: node_4, node_5
Node node_4:
Type: text
Value: world
Parents: node_3
Children:
Node node_5:
Type: element
Value: </emphasis>
Parents: node_3
Children:
Node node_6:
Type: text
Value: !
Parents: node_1
Children:
Node node_7:
Type: element
Value: </speak>
Parents: node_1
Children:
DAGを直接作ることも可能です。
import { SSMLDAG } from "@ssml-utilities/core";
const dag = new SSMLDAG();
const nodeResult = dag.createNode("element", "speak", "<speak>");
if (nodeResult.ok) {
const node = nodeResult.value;
// ノードを使用した処理
}
まとめ
この記事では、新しく公開したSSML Utilitiesライブラリについて紹介しました。
- SSMLとは何か、その特徴と使用例を説明しました。
- SSML Utilitiesの3つのパッケージ（core, highlighter, editor-react）について、その機能と使用方法を詳しく解説しました。
- このライブラリを使用することで、Web上でSSMLを簡単に編集・ハイライトできるようになります。
SSMLを扱うWebアプリケーションの開発に興味がある方は、ぜひSSML Utilitiesを試してみてください。今後も機能の拡張や他のフレームワーク対応を検討していますので、フィードバックをお待ちしています。
最後に
AI Shiftではエンジニアの採用に力を入れています！
少しでも興味を持っていただけましたら、カジュアル面談でお話しませんか？
（オンライン・19時以降の面談も可能です！）
【面談フォームはこちら】
参考
[1] https://tex2e.github.io/rfc-translater/html/rfc4267.html
Discussion