ルパン風タイプ音をChromeで実現

ルパン三世風のタイプ音を実現したかった

前置き

むかし、こんな動画を見た
職場のPCのキー音とエンター音ルパンのに変えたら滅茶苦茶怒られた

この動画を見たとき、正直、自分も作りたいと思った、けどすべての入力に対して、
キーの監視をしようものなら、PC自体にめっちゃ負担かかるし（あんま気にしてないけど）
C#やらC++でデスクトップアプリケーション作らなきゃいけないし正直めんどくさい。
バックグランドで動くようにして〜すべてのキーにマップ張って〜とかやりたくない。

丁度、自分がChromeExtensionを作るのにハマっていた、のとJavaScriptに抵抗が最近なくなった
そんで同じようなExtension作ってやろうと思った、
(本当はElectronで作ろうと思ったけどめんどかった）

どうでもいいが最近JavaScript扱えるようになって、ここ最近JavScriptしか触ってない。
デキることの幅が増えたし、JavaScriptは色々楽しい。
今後はElectronでなんかおもちゃを作っていこうと思う。

うごき

そーす＠ぎっとはぶ

そんなに大したことはしていないが、manifest.jsonでは、大体の入力ページで
こいつを動かしたいので、matches にてワイルドカード使ってhttps://*/*と
指定する。これでhttpとhttpsまあおまけでfileから始まるurl上のinputortextarea tag では動く,divとかで入力ボックス作ってるサイトは知らん(´・ω・`)

{
    "name": "Typing Sound with Lupin",
    "version": "x.x.x",
    "manifest_version": 2,
    "content_scripts": [
        {
            "matches": ["https://*/*", "http://*/*", "file://*/*"],
            "js": [
                "scripts/jquery.min.js",
                "main.js"
            ]
        }
    ],
    "web_accessible_resources": [
        "sounds/enter.wav",
        "sounds/input.mp3"
    ]
}

生でJs扱うのは危ないのでJqueryを使って、行きます。
扱う音声ファイルは、web_accessible_resourcesで有効化してます。

なんか ionとかいうJavaScriptだけで音声再生できるクエリがあったけど、
うまく動かなかったので HTML5+Jqueryの最近よくある(?)感じでやっていきます

  $("body").append('<audio id="input"> <source src="' + chrome.extension.getURL('sounds/input.mp3') + '" type="audio/mp3"> </audio>')
  $("body").append('<audio id="enter"> <source src="' + chrome.extension.getURL('sounds/enter.wav') + '" type="audio/wav"> </audio>')

読み込んだWebPageの最後尾にSEファイルを読み込ませさせます。

あとはかんたんでinputとtextareaに対して、keyupのイベントを設定して、
文字が入力されたら、そのたびに関数が実行されるので、関数内でSEを再生させればいいですね。

$("input,textarea").keyup( input => {
    if ( input.key === "Enter" ) {
      $('#enter')[0].play();
    } else {
      $('#input')[0].currentTime = 0;
      $('#input')[0].play();
    }
  });

keyupの引数(input)にkeyを指定して、何のキーが押されたか取得することがデキるので
Enterが押された、ときだけてれれ〜〜〜てってっててってててて〜というのを再生するように
指定しています。またcurrentTimeは現在のSEが再生中でも強制終了し、次のSEを再生させる
停止ボタンのような役割です、これがあるとか、か、か、か、か、代わりは居るもの と
連続再生が可能になりますね。

$(() => {
  $("body").append('<audio id="input"> <source src="' + chrome.extension.getURL('sounds/input.mp3') + '" type="audio/mp3"> </audio>')
  $("body").append('<audio id="enter"> <source src="' + chrome.extension.getURL('sounds/enter.wav') + '" type="audio/wav"> </audio>')
  $("input,textarea").keyup( input => {
    if ( input.key === "Enter" ) {
      $('#enter')[0].play();
    } else {
      $('#input')[0].currentTime = 0;
      $('#input')[0].play();
    }
  });
});

つくってみて

結構楽しかった2時間ぐらいでぱぱっと作ったおもちゃだけど、疲れたときなどに、
たまにONにして、楽しもうと思う。

前置きにも書いたが、JavaScriptの可能性はやばい。

気になる方はぜひ入れてみてください、
crxファイルをダウンロードして chrome://extensionにアクセスして、
ドラックアンドドロップするだけです。

ダウンロード