音楽のプレイリスト再生 - WiiUのインターネットブラウザーを使用して、家庭内ネットワーク内のWebサーバへ接続する

LinkStation の Web サーバに設置した html ファイルの音楽ファイルのリンクを開いたところ（Wii Uゲームパッド画面）音楽がWiiU のゲームパッドと、テレビから再生されている (カメラで撮影したため、映像が荒く、歪んでいる)

イントロダクション

前回は、WiiU のインターネットブラウザーを使用して、ローカルネットワーク（家庭内ネットワーク等）上に設置した LinkStation の Web サーバの音楽ファイルを再生するものを作成してみました。

音楽の再生 - WiiUのインターネットブラウザーを使用して、家庭内ネットワーク内のWebサーバへ接続する
http://upa-pc.blogspot.com/2015/03/wiiu-linkstation-web-server-html-music.html
Dr.ウーパのコンピュータ備忘録

その動作を確認しているときに気が付きました。
音楽を再生する機能は、元のページとは別途に開くということに。

それならば、元のページに JavaScript などのプログラムを記載すれば、音楽のループ再生や、音楽のプレイリスト再生が可能になるのではないかと考えました。

そこで、WiiU のインターネットブラウザー上で、”音楽のプレイリスト再生”を行う JavaScript コードを作成してみました。

WiiUのインターネットブラウザーを使用して、家庭内ネットワーク内のWebサーバに設置した音楽ファイルのプレイリスト再生

前提条件

前提条件として、前回の"音楽の再生 - WiiUのインターネットブラウザーを使用して、家庭内ネットワーク内のWebサーバへ接続する"までの環境が整っていることとします。

準備作業

(1) 複数の音楽ファイルを、LinkStation の Web サーバのフォルダへ格納

前回と同様に、WiiU で再生可能なフォーマットの音楽ファイルを再生し、LinkStation の Web サーバのフォルダへ格納します。

LinkStation の Web サーバのフォルダへ設置した、
WiiU で再生可能な音楽ファイル群

(2) HTML ファイルの修正

HTML ファイルの中身を次のように修正します。

index.html の中身 :

<html>
<head>
    <title></title>
</head>
<body>

<h1>Music Room! for WiiU</h1>

<input type="button" value="Play Start" onclick="startMusic()" /><br />
Play Stop : Push Stop Button, and reload this page.<br />


<script type="text/javascript">
<!--
    // ミュージック情報を保持する
    function musicInfo(file, length) {
        this.file = file;                   // ファイル名
        this.length = length;               // 再生時間(ミリ秒)
    }

    // このページで再生する"音楽情報のリスト"
    var musicInfoList = [
        new musicInfo("sample-aac1.m4a", 5000),
        new musicInfo("sample-aac2.m4a", 10000),
        new musicInfo("sample-aac3.m4a", 15000)
        // 最後の項目の再生時間は無視されます
    ];

    // 再生開始
    function startMusic() {

        var now = 0;            // "音楽情報のリスト"中の再生位置
        (function playMusic() {

            // 再生
            window.location.href = musicInfoList[now].file;

            // プレイリストの最後の項目になるまで、再生を続ける
            if (now < musicInfoList.length - 1) {

                // 指定時間後に、次の曲を再生
                setTimeout(playMusic, musicInfoList[now].length);
                now++;
            }
        })();
        
    }

//-->
</script>

</body>
</html>

なお、musicInfoList の音楽ファイル名と、再生時間(ミリ秒) は各自の環境にあわせて書き直してください。

実行結果

以上の設置手順を実行した後に、WiiU のインターネットブラウザーから、LinkStation の Web サーバへアクセスしてみます。

WiiU のインターネットブラウザーから、
LinkStation の Web サーバへアクセスしたところ

（なお、WiiU のゲームパッドの画面キャプチャが面倒なため、
パソコン上の Chrome の画面を掲載。
WiiU のゲームパッドも上記と同じ表示になる。）

「Play Start」ボタンを押すと、プログラム中の音楽のプレイリストに従って、音楽の再生を実行します。

上記のデフォルトでは、

    // このページで再生する"音楽情報のリスト"
    var musicInfoList = [
        new musicInfo("sample-aac1.m4a", 5000),
        new musicInfo("sample-aac2.m4a", 10000),
        new musicInfo("sample-aac3.m4a", 15000)
        // 最後の項目の再生時間は無視されます
    ];

となっているので、

開始

↓

sample-aac1.m4a が 5 秒間再生

↓

sample-aac2.m4a が 10 秒間再生

↓

sample-aac3.m4a が最後まで再生

↓

停止

という流れになります。

音楽の再生を止めるには、音楽再生機能のストップボタンを押したのちに、このページをリロード（再読み込み）してください。

音楽再生機能のストップボタンを押しても、ページ側の JavaScript は音楽が止まったことを認識しないため、指定時間後に次の音楽の再生が開始されます。

なお、このプログラムは WiiU 専用（のようなもの）です。

パソコン上の Web ブラウザで、「Play Start」ボタンを押して音楽の再生を開始しようとすると、ブラウザの設定によっては、音楽が再生される代わりに、音楽ファイルがプレイリストに従って、ファイルとしてダウンロードされるような動作となります。

まとめ

このように、WiiU のインターネットブラウザーで、JavaScript を使うことで、自由自在に音楽の再生をつかさどることが出来ることが分かりました。

"WiiU のインターネットブラウザー" と "LinkStation の Webサーバ機能" を使用することで、WiiU の新しい楽しみ方を創造することが出来ました。

まだまだ、"WiiU のインターネットブラウザー" と "LinkStation の Webサーバ機能" を使った、新しい楽しみ方を模索していきたいと思います。

次回

次回は、video タグを使用して、音楽の再生を行います。

videoタグを使用して音楽再生を行う - WiiUのインターネットブラウザーを使用して、家庭内ネットワーク内のWebサーバへ接続する
http://upa-pc.blogspot.com/2015/03/wiiu-linkstation-web-server-html-music-video.html
Dr.ウーパのコンピュータ備忘録

注意点

LinkStation の Web サーバのデータは、LinkStation へアクセスできる端末から見ることが出来てしまいます。

そのため、そのネットワークへ接続されている端末とその利用者が、LinkStation の Web サーバのデータを見ても問題の無い端末とその利用者なのか、事前に確認してから行ってください。

特に注意しなければならないケースとして、次の２点が挙げられます。

Wi-Fi などの無線 LAN 接続をしている場合に、第三者がそのネットワークに自由に接続できるようになっていないか？
ローカルのネットワークに対して、インターネットなどの外部のネットワークからアクセスが可能となっていないか？

もし、それらが不明な場合には、LinkStation の Web サーバ機能は使用しない、使用する場合は外部に流出したら困るようなデータを公開しないという対策が必要になります。

その他注意点

※ LinkStation であっても、シリーズによって搭載している機能が異なるため、Webサーバ機能が搭載されているかどうかは確認が必要です。

下記ページの、「Webサーバー機能に対応している製品は以下の通りです。」に、Webサーバ機能に対応している製品シリーズについての記載があります。

Webサーバー機能を停止する方法 - アンサー詳細 | BUFFALO バッファロー
http://faq.buffalo.jp/app/answers/detail/a_id/15526/kw/Web%E3%82%B5%E3%83%BC%E3%83%90/p/31,33,553

※ LinkStation 以外の NAS や、その他ネットワーク製品を利用することで、ローカルネットワークに Web サーバをたてることが出来る場合もあります。

このブログ内の、他の”WiiU”についての情報を見る

Wii U ベーシックセット (WUP-S-WAAA)

新品価格
￥26,318から
(2015/3/22 13:33時点)

BUFFALO RAID1対応静音&省エネ NAS(ネットワークHDD) 【iPhone5対応(WebAccess i)】 2ドライブモデル 1TB LS-WSX1.0L/R1J

Dr.ウーパのコンピュータ備忘録

2015年3月22日日曜日