サンリオピューロランドのミラクル♡ライトの制御プログラムを作ったよ

エムスリーエンジニアリングGの岩本です。

会社ではiOS開発からサーバサイドの開発を担当していますが、家でDIY・IoT・スマホアプリなどを作る小学校1年生のパパエンジニアやっています。最近下記の記事をホットエントリで見つけました。

togetter.com

すごい面白い！と興奮して秒でポチってしまいました。送料込みで900円。メルカリ便利。

子供のためにおもちゃを買ってあげるなんてなんて優しいパパなんでしょう。

きっとこのおもちゃを自作のプログラムから動かしてあげたらすごい興奮するんだろうな〜。

「どうやってプログラムしたの！？仕様どうなってるの！？すごい！私もJavaScript書く！」ってなったらどうしよう。

夢が広がりますね。ところで、このサンリオピューロランドのミラクル♡ライトを制御するHTMLを作ったので紹介します。

なお、エムスリーテックブログのものづくり系の記事はいくつもあるのでよければ参照ください。

作ったもの

youtu.be

実際にミラクル♡ライトを持っている人は下記の画面から制御できます。

ミラクル♡ライトコントローラー

仕組み

サンリオピューロランドのミラクル♡ライトの仕組み。制御と解析。 - 名前で調査してくれていた内容をそのまま実装した形になりますので詳細はそちらを参照ください。かんたんに説明するとミラクル♡ライトは人間には聞こえづらい周波数の音を使って制御することができます。しかし、id:titn-nananaさんめっちゃ調べてくれていてすごい。

この周波数をWeb Audio APIを使って再生してやることでブラウザからミラクル♡ライトを制御できます。

音を出すプログラム

音を出すコア部分は下記のプログラムです。数十行でかんたんですね。音の周波数を125msできりかえて一連の周波数を出力します。

async function play(freqs) {
    const context = new AudioContext();
    const oscillator = context.createOscillator();
    const gain = context.createGain();
    oscillator.connect(gain);
    gain.connect(context.destination);

    oscillator.start(0);
    for (let i = 0; i < freqs.length; i++) {
        oscillator.frequency.value = freqs[i];
        await wait(125);
    }
    oscillator.stop(0);
}

async function wait(ms) {
    return new Promise(resolve => {
        setTimeout(resolve, ms);
    });
}