Web Speech APIをAngularJSで試す #JavaScript

AngularJS Advent Calendar 2014 11日目

概要

音声スピーチ機能に興味があったのでWeb Speech APIを使ったディレクティブを作ってみました。これであなたのサイトのアクセシビリティは激アップ！！（爆）

Chrome、Safariで動きます（2014/12/10現在） ⇒ Can I Use

実装

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Web Speech API</title>
</head>
<body ng-app="app">
    <div>
        <div speech>テスト</div>
        <div speech>そこにしびれるあこがれるぅぅぅ！！</div>
        <div speech lang="en-US">Hi I'm speeker</div>
        <input type="text" ng-model="inputText" placeholder="入力してね">
        <div speech ng-bind="inputText" ></div>
    </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="speech.js"></script>
</body>
</html>

app.js

angular.module("app", ["speech"]);

speech.js

var app = angular.module("speech", []);

// Speech service
app.service("speech", function() {
    this.speak = function(text, options) {
        options = angular.extend({
            "volume": 1,
            "rate"  : 1,
            "pitch" : 2,
            "lang"  : "ja-JP"
        }, options);
        var msg = new SpeechSynthesisUtterance();
        msg.volume = options["volume"];
        msg.rate = options["rate"];
        msg.pitch = options["pitch"];
        msg.lang = options["lang"];
        msg.text = text;
        speechSynthesis.speak(msg);
    }; 
});

// Speech directive
app.directive("speech", ["speech", function(speech) {
    return {
        restrict: "A",
        link: function(scope, element, attrs) {
            var lang = attrs.lang || "";

            element.bind("click", function() {
                var text = angular.element(element).text();
                var options = {};
                if (lang) {
                    options["lang"] = lang;
                }
                speech.speak(text, options);
            });
        }
    };
}]);

サンプル

テキストをクリックすると、しゃべります

まとめ

想像以上に手軽で、ほとんどコードを書く必要がなかった・・・。
Web Speech APIには音声入力の機能も含まれてるため、input要素と組み合わせも可能

※当初はVoiceText Web APIなるWeb上の音声合成APIと組み合わせる予定だったが、中継サーバーが必要なためこれを使うのは別の機会に

参考

[HTML5] Web Speech APIに入門
http://www.yoheim.net/blog.php?q=20140701