音声ファイルデータを後につけて実行するメモ
自分用メモ
音声データをBase64でテキスト化して,最後に付け足して使うことが可能だったこと。
<!doctype html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE11=edge" charset="utf-8"> <title>テスト中</title> <script> window.onload=function(){ mus.play() new Vue({ el:"#app", data:{ myText:"今日はいい天気です。" } }) } </script> </head> <body> <div id="app"> <textarea v-model="myText"></textarea> <p>文章は,「{{ myText }}」</p> <p>文字数は{{myText.length}}文字です。</p> </div> </body> </html> <script> var mus=Audio() mus.src="data:audio/mp3;base64,//uQZAAAA31jQQZSQAI3LFhAwRQATV1VJBz0AADZgCODhjAA8CRkDJjfFWDi3g ~音声の長いテキストデータ~ " </script> <script> /*! * Vue.js v2.5.22 * (c) 2014-2019 Evan You * Released under the MIT License. */ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof de ・・・ </script>
音声や画像のSVGデータ,またはJQueryやVue.jsなどのライブラリをHTML内に全部放り込めば,
他ファイル依存がなくなって,作ってかなーり経ったHTAファイルでもファイル依存から解放されるんじゃないかということを試しています。
無知だからいろんなことを試行錯誤するしかない。
音声についてはとりあえずちゃんと動いた。
これであまり長い音声を使わない前提でなら,音声ファイルをどこどこに忘れずに入れておいてとかいうことから解放される。
画像データもAdobeのソフト群にお世話になっている自分としてはSVGでだいたい事足りそう。
データ部分はできれば最後に付け足しておいて,読み返さないといけないコード部分は上に固まってほしい派です。
あと,ライブラリもあまりにも長いものでなければつけてしまえそう。こちらは個人使用の段階ではある程度好き勝手でいいと思うんですが,
他人に紹介しようとしたものができた場合微妙でもあります。
ただ,依存する外部ファイルを極力消したいと思う場合たぶん私は避けないと思う。
テキストで数百キロバイトというのはコードで見るとすごいけど,データサイズとしては小さいですしね。
上記のHTMLの中には音声データとVue.jsを入れてみるということをしました。ライブラリも音声もとても長いのでぶちっと切ってますからもちろん上のコードそのままでは動きませんが,
数十キロバイトのライブラリや画像データなら最後に内部に放り込んでおけば一つのファイルでいいものができそうな気がします。
外部ファイルとする方が使いまわし等で適正なんでしょうけど,
私を含めて,あまり深くその言語を知らない場合,しばらくして忘れてしまうと前提となるファイルとの位置関係が変わってしまったり,絶対参照しているファイルが年度を超えていくうちに
なくなってしまったりということは往々にしてあります。
なので,その方法の是非は抜きにして,一つのファイルで納めてしまいたいという強い希望がいつも頭にあるので,無駄なこととはいえできることを試した。
これでかなりストレスが減るなぁ。
本収集以上にはあまり進んではいませんが,自分がしたいことはSPAと呼ばれるやつのようで,Vue.jsととても相性が良いようです。
JQueryで作られたものもよく出会うため,JQueryの本とかも可能な限りたくさん集めました。
プレーンなJavascriptももちろんたくさん。
本にまみれてますが,なんとなく方向性ができつつあるので,来年度はけっこう楽しみ。
ただコードの中にライブラリを内包する場合,ライブラリによくあるMITライセンスというのとの上手な付き合い方はどうなるのか,調べないとなぁと思っているところです。