概要

簡単な音楽プレイヤーWebアプリケーションを作成。
音楽の再生をボタン制御から、Websocketから取得したデータを元にした制御に変更しています。
データの取得は、node-redでほぼコーディングせずに行うことができました。

用意するもの

作成する上で以下を使用しました。
・Bluemix(node-red)
・sensortag

それぞれの環境構築や使用方法については、以下を参考にしてください。
準備中

音楽プレイヤーアプリの作成

まず、元となる音楽プレイヤーを作成します。
以下を参考に、html,jsファイルを作成してください。
サンプルコードはできるだけシンプルにしています。

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>快眠プレイヤー</title>
        <script type="text/javascript" src="js/control.js"></script>
    </head>
    <body>
        <h1>快眠プレイヤー</h1>
        <div>
            <audio id="myMusic" controls loop>
                <source src="music/sample.mp3">
        </div>
        <form>
            <input type="button" value="再生" onclick="start_music()">
            <input type="button" value="停止" onclick="start_pause()"><br>
            <input type="button" value="音量アップ" onclick="volume_up()">
            <input type="button" value="音量ダウン" onclick="volume_down()">
        </form>
    </body>
</html>

※今回は、音声ファイルにmp3を使用します。ブラウザによっては正常に再生されない可能性があります。

control.js

// 再生
function start_music(){
    var audioObj = document.getElementById("myMusic");
    audioObj.play();
}
// 一時停止
function start_pause(){
    var audioObj = document.getElementById("myMusic");
    audioObj.pause();
}
// 音量アップ
function volume_up(){
    var audioObj = document.getElementById("myMusic");
    audioObj.volume = audioObj.volume + 0.1;
}
// 音量ダウン
function volume_down(){
    var audioObj = document.getElementById("myMusic");
    audioObj.volume = audioObj.volume - 0.1;
}

次に、mp3ファイルを用意します。

そして、用意したファイルを以下の様にフォルダに格納します。

GoodSleepMusic
　├ index.html
　├ control.js
　└ music
　　└ Sample.mp3

これで土台となる音楽プレイヤーは完成しました。

SensorTagとの接続

次にNodeRedで、SensorTagより明るさを取得し、取得したデータをWebSocketで送信するフローを作成します。
以下をコピーし、フローを作成します。

[{"id":"7945edfe.269dd4","type":"ibmiot in","z":"86357cf8.9262c","authentication":"boundService","apiKey":"","inputType":"evt","deviceId":"sensortag001","applicationId":"","deviceType":"+","eventType":"+","commandType":"","format":"json","name":"IBM IoT","service":"registered","allDevices":false,"allApplications":"","allDeviceTypes":true,"allEvents":true,"allCommands":"","allFormats":"","qos":0,"x":50,"y":120,"wires":[["1a9df657.84aac2","84b8dc15.667d7"]]},{"id":"25b07664.5f77a2","type":"debug","z":"86357cf8.9262c","name":"","active":false,"console":"false","complete":"false","x":570,"y":120,"wires":[]},{"id":"1a9df657.84aac2","type":"function","z":"86357cf8.9262c","name":"ペイロード","func":"\nreturn {payload:msg.payload.d};","outputs":1,"noerr":0,"x":194.5,"y":174.75,"wires":[["e35eee88.5025a"]]},{"id":"e35eee88.5025a","type":"function","z":"86357cf8.9262c","name":"","func":"return {payload:{\n    a: msg.payload.light}};","outputs":1,"noerr":0,"x":340.5,"y":205.75,"wires":[["25b07664.5f77a2","b3b48eb4.25a2b"]]},{"id":"9e13b636.e551b8","type":"websocket out","z":"86357cf8.9262c","name":"","server":"14d557ff.17ae9","client":"","x":1000,"y":180,"wires":[]},{"id":"b3b48eb4.25a2b","type":"delay","z":"86357cf8.9262c","name":"","pauseType":"delay","timeout":"30","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":620,"y":200,"wires":[["9e13b636.e551b8","bb663078.55ae88"]]},{"id":"bb663078.55ae88","type":"debug","z":"86357cf8.9262c","name":"","active":false,"console":"false","complete":"false","x":850,"y":140,"wires":[]},{"id":"84b8dc15.667d7","type":"debug","z":"86357cf8.9262c","name":"","active":false,"console":"false","complete":"false","x":250,"y":100,"wires":[]},{"id":"14d557ff.17ae9","type":"websocket-listener","z":"","path":"/wss/sensorData","wholemsg":"false"}]

SensorTagデータによる制御へ変更

最後に、音楽プレイヤーアプリの作成で作成したソースを書き換えます。

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>快眠プレイヤー</title>
        <script type="text/javascript" src="js/control.js"></script>
    </head>
    <body>
        <h1>快眠プレイヤー</h1>
        <div>
            <audio id="myMusic" controls loop>
                <source src="music/sample.mp3">
        </div>
        <form>
            <input type="button" value="スタンバイ" onclick="standby_music()">
            <!--<input type="button" value="再生" onclick="start_music()">-->
            <input type="button" value="停止" onclick="start_pause()"><br>
            <input type="button" value="音量アップ" onclick="volume_up()">
            <input type="button" value="音量ダウン" onclick="volume_down()">
        </form>
    </body>
</html>

control.js

/*
// 再生
function start_music(){
    var audioObj = document.getElementById("myMusic");
    audioObj.play();
}
*/

// スタンバイ
var socket;
//以下のxxxxには、アプリケーション名を入れてください
var wsUrl = 'wss://xxxx.mybluemix.net/wss/sensorData';
var playFlag = 0;

function standby_music() {

    socket = new WebSocket(wsUrl);
    socket.onmessage = function (e) {
        //WebSocketのデータを取得
        var sensorData = JSON.parse(e.data);
        //再生中の時の制御を行う
        v.addEventListener("play", function () {playFlag = 1;},
            function () { playFlag = 0; });

        if (playFlag == 0) {
            //明るさが１０Lux以下の時音楽再生
            if (sensorData.a <= 10) {
                var audioObj = document.getElementById("myMusic");
                audioObj.play();
            }
        }
    }
}

// 一時停止
function start_pause(){
    var audioObj = document.getElementById("myMusic");
    audioObj.pause();
}
// 音量アップ
function volume_up(){
    var audioObj = document.getElementById("myMusic");
    audioObj.volume = audioObj.volume + 0.1;
}
// 音量ダウン
function volume_down(){
    var audioObj = document.getElementById("myMusic");
    audioObj.volume = audioObj.volume - 0.1;
}

スタンバイボタンを押し、sensortagが明るさを10Lux以下と感知すると音楽が再生されます。

Bluemixへのデプロイ

ローカル環境の状態でも使用可能ですが、せっかくなのでBluemixにデプロイしてみます。
今回は、Gitでデプロイを行います。
ここではバージョン管理については、割愛します。
以下は個人用の環境なので全てmasterブランンチで行なっています。

まず、デプロイをしたいアプリケーションのページにアクセスし、画面横のタブより「Overview」を選択。

画面下の「Continuous delivery」のView toolchainをクリックします。

Toolchain設定画面が出てくるので、「Git」をクリックします。

アプリケーションのディレクトリが表示されます。
「音楽プレイヤーアプリの作成」で作成したGoodSleepMusic配下のファイル、フォルダを「public」配下にコピーします。（GoodSleepMusicは必要ありません）

完成！

最後に、アプリケーションへの反映を待ち、再起動を行います。
あとは、再起動が完了したら、以下のURLにアクセスするだけです。(XXXXはアプリケーション名)
https://xxxx.mybluemix.net/music.html

これで、スマホからボタンを押して部屋を暗くするだけで済みます。
きっと”睡眠用BGM”の効果を最大限受けることができるはずです。

※効果には個人差があります。個人の感想であり、効果・効能を示すものではありません。