WebはWeb Componentsによって新しい世界を迎えようとしています。高度な機能、UIが簡単に再利用できるようになれば、どんどん開発ができるようになります。標準で提供されるタグの範囲を超えた機能を簡単に実現できるようになるでしょう。 今回紹介するvoice-elementsもWeb Componentsの一つと言えます。音声読み上げAPIを簡単に使えるようにするカスタムタグになります。

voice-elementsの使い方

例えばこんな感じのタグです。

<voice -player autoplay text="Welcome to the jungle! hahaha just kidding!"></voice>

これで Welcome to the jungle! hahaha just kidding! と自動で読み上げます。

自動でない場合は次のようになります。

<voice -player id="mi-elemento" accent="es-ES" text="Me gusta la gasolina"></voice>

document.querySelector('#mi-elemento').speak();

HTML5の音声読み上げAPIを使っていますので、日本語ももちろん使えます。さらにマイクを使って音声からのテキスト入力も可能です。

<voice -recognition id="recognition-element"></voice>

<script>
var form = document.querySelector('#recognition-form'),
    input = document.querySelector('#recognition-input'),
    element = document.querySelector('#recognition-element');

form.addEventListener('submit', function(e) {
    e.preventDefault();
    element.start();
});

element.addEventListener('result', function(e) {
    input.textContent = e.detail.result;
});
</script>

使うのが難しい気がしていた音声関係のAPIがとても簡単に使えるようになりそうですね。

voice-elementsはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

<voice -elements> zenorocha/voice-elements