解析エンジニアの自動化 blog

コツコツと自動化した方法を残す blog

コピペで音声データの作成アプリが出来るようになる【Windows】【HTML】【JavaScript】【VBS】



こんにちは。
仕事の自動化にやりがいと達成感を感じるガッくんです。


この記事の目次



背景・目的


なんのキッカケかは忘れましたが、音声データの作成をやってみたくなり、調べたところ簡単だったので、雑ですが、音声データ作成アプリっぽいものを作りました。



動作環境


Windows 7
・HTML
JavaScript
VBScript

また、音声読み上げに関するランタイム、ライブラリは画像の通りです。




構成


3 つのファイルから構成されるアプリにしました。

デスクトップに speak というフォルダを作成して、 3 つのファイルを保存しました。




プログラム

speak.html ソースコード


<html>
        <head>
                <title>テキスト読み上げ音声ファイルメーカー</title>
                <script language="javascript" type="text/javascript">
                        function OnLinkClickAudition() {
                                var txt = document.form1.msg.value;
                                var sh = new ActiveXObject("WScript.Shell");
                                sh.Exec("cmd /C wscript C:\\Users\\UserName\\Desktop\\speak\\Speak_Audition.vbs " + txt);
                                sh.null;
                        }
                        function OnLinkClickOutput() {
                                var txt = document.form1.msg.value;
                                var sh = new ActiveXObject("WScript.Shell");
                                sh.Exec("cmd /C wscript C:\\Users\\UserName\\Desktop\\speak\\Speak_Output.vbs " + txt);
                                sh.null;
                        }
                </script>
                <style type="text/css">
                        .btn-real-dent {
                                /*周りの凹み*/
                                display: inline-block;
                                position: relative;
                                text-decoration: none;
                                color: rgba(3, 169, 244, 0.54);
                                width: 100px;
                                height: 100px;
                                border-radius: 50%;
                                text-align: center;
                                background: #f7f7f7;
                                box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.08);
                        }
                        .btn-real-dent i {
                                /*ボタン自体*/
                                position: absolute;
                                content: '';
                                width: 80px;
                                height: 80px;
                                line-height: 80px;
                                left: 10px;
                                top: 9px;
                                border-radius: 50%;
                                font-size: 30px;
                                background-image: linear-gradient(#e8e8e8 0%, #d6d6d6 100%);
                                text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
                                box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
                                border-bottom: solid 2px #b5b5b5;
                        }
                        .btn-real-dent .fa:active {
                                box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
                                border-bottom: solid 2px #d8d8d8;
                        }
                        .textlines {
                                padding: 0.5em;          /* 内側の余白量 */
                                background-color: snow;  /* 背景色 */
                                width: 40em;             /* 横幅 */
                                height: 350px;           /* 高さ */
                                font-size: 1em;          /* 文字サイズ */
                                line-height: 1.2;        /* 行の高さ */
                        }
                </style>
        </head>
        <body>
                <form name="form1">
                        <p>
                                <textarea name="msg" cols="30" rows="7" class="textlines"></textarea>
                        </p>
                </form>
                <a href="#" class="btn-real-dent" onClick="OnLinkClickAudition()">
                        <i class="fa fa-home">試聴</i>
                </a>
                <a href="#" class="btn-real-dent" onClick="OnLinkClickOutput()">
                        <i class="fa fa-home">出力</i>
                </a>
        </body>
</html>


Speak_Audition.vbs ソースコード


cntArgs = WScript.Arguments.Count
 
If cntArgs <> 1 Then
        WScript.Echo "引数が" & intArgsCount & "個渡されました。" & vbCrLf _
                                & "指定可能な引数の数は 1 個なので処理を中止します。"
        ' 処理を中断
        WScript.Quit
End If
 
arg = WScript.Arguments(0)
 
Set tts = WScript.CreateObject("Speech.SpVoice")
tts.Rate = 2
tts.Speak(arg)


Speak_Output.vbs ソースコード


 
cntArgs = WScript.Arguments.Count
 
If cntArgs <> 1 Then
        WScript.Echo "引数が" & intArgsCount & "個渡されました。" & vbCrLf _
                                & "指定可能な引数の数は 1 個なので処理を中止します。"
        ' 処理を中断
        WScript.Quit
End If
 
arg = WScript.Arguments(0)
 
Set tts = WScript.CreateObject("Speech.SpVoice")
Set stream = WScript.CreateObject("Speech.SpFileStream")
tts.Rate = 2
stream.Open "speak.wav", 3
Set tts.AudioOutputStream = stream
tts.Speak(arg)
stream.Close



結果

インターフェースを図1 に示します。


図1 インターフェース


視聴ボタンを押すとテキストを読み上げた音声がスピーカーから流れます。

出力ボタンを押すとデスクトップに図2 のファイルが出来ます。

図2 出力ファイル



コメント

使い道はあまり思いつかないですが、たった 3 つのファイルを作成するだけで音声データが作成出来ました。



以上