日々のコンピュータ情報の集積と整理

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

2015年3月22日日曜日

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

WiiU : ゲームパッドに表示された video タグのオブジェクト 音楽の再生を行うことが出来る  (この画像はカメラによって撮影したため、荒く、歪んでいる) (※ タイトルに"for WiiU"がついているが、 その部分のみ修正する前に撮影したものであるため、 機能的には今回のソースコードによるものと同等である)

イントロダクション

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


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



前回までは、音楽ファイルを文字通り”開く”ことで、WiiU 上の動画再生機能で音楽を再生していました。

しかし、考えてみれば、WiiU は audio タグを使用して音楽ファイルを再生することはできないようですが、video タグはサポートしているんですね。

対応しているウェブ標準
DOM1-3/ECMAScript/XMLHttpRequest/canvas/Video/Web Storageの一部

Wii U|インターネットブラウザーの主な仕様|Nintendo
http://www.nintendo.co.jp/wiiu/hardware/features/internetbrowser/browser/
より引用


ならば、video タグを使用して音楽ファイルを再生させれば、前回までの「音楽ファイルを文字通り”開く”」ことで再生する方式よりも、よりスマートです。

何より、WiiU のみならず、パソコン環境でも、同じ操作性を提供することができます。


ということで、今回は前回までの html ファイルを少し修正して、video タグを使用して、WiiU 上で音楽再生をしてみます。


WiiUのインターネットブラウザーを使用して、家庭内ネットワーク内のWebサーバ上の音楽ファイルを再生する - video タグ編


前提条件

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


準備作業

(1) HTML ファイルの修正

HTML ファイルの中身を次のように修正します。
<html>
<head>
    <title></title>
</head>
<body>

<h1>Music Room!</h1>

<video src="sample-aac1.m4a" controls loop></video>



</body>
</html>


今回は video タグの属性に、次のように controls と loop を指定することで、

<video src="sample-aac1.m4a" controls loop></video>


以下の機能を動画再生機能として持たせています。

controls : 再生・一時停止・シークバー・ボリューム等のインターフェースを表示
loop : ループ再生を行う

<video>-HTML5タグリファレンス
http://www.htmq.com/html5/video.shtml


実行結果

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

すると、video タグによって動画再生コントロールが作成されています。

WiiU : ゲームパッドに表示された video タグのオブジェクト 音楽の再生を行うことが出来る  (この画像はカメラによって撮影したため、荒く、歪んでいる) (※ タイトルに"for WiiU"がついているが、 その部分のみ修正する前に撮影したものであるため、 機能的には今回のソースコードによるものと同等である)
WiiU : ゲームパッドに表示された video タグのオブジェクト
音楽の再生を行うことが出来る

(この画像はカメラによって撮影したため、荒く、歪んでいる)
(※ タイトルに"for WiiU"がついているが、
その部分のみ修正する前に撮影したものであるため、
機能的には今回のソースコードによるものと同等である)


再生ボタンを押すと音楽(動画)の再生が始まります。

音楽(動画)の再生が最後まで終わると、loop 属性によって、また最初から音楽(動画)の再生が始まります。


これでもう、音楽が停止したら、再生ボタンを押して再び音楽を流し始める必要はありません。
音楽をずっと聴きながら作業を行うことができます。


なお、パソコン(Windows)上のChromeなどからアクセスした場合も、ほぼ同様に画面が表示されます。

Windows 上の Chrome : ブラウザに表示された video タグのオブジェクト WiiU のゲームパッドで見た場合と、ほぼ同じ操作性で、音楽を聴くことが出来る
Windows 上の Chrome : ブラウザに表示された video タグのオブジェクト
WiiU のゲームパッドで見た場合と、ほぼ同じ操作性で、音楽を聴くことが出来る


そのため、同じ音楽を WiiU 上でも、パソコン 上でも楽しむことができます。

ただ、画像から見て取れるように、それぞれで多少再生をコントロールするためのユーザインターフェースが異なっていることが分かります。


まとめ

このように、video タグを使用することで、WiiU のインターネットブラウザーでも、パソコン環境でも、同じような操作性で音楽を視聴することが出来るようになりました。

また、video タグの loop 属性によって、簡単に音楽をずっと流しっぱなしにする環境を作ることが出来ました。


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

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


注意点

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

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

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

  • 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 サーバをたてることが出来る場合もあります。



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




関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...
Related Posts Plugin for WordPress, Blogger...