Linkin' Rings: DHTML

2005年9月23日 (金)

DHTML備忘録-ストリーミング再生-

HTML上でメディアファイルをストリーミング再生する方法は何種類かあるが、今回はWindows Media Player(以下WMP)でwma(Windows Media Audio)ファイルをwaxファイル(メタファイル)で指定して再生する方法を記す。

・wmaファイルの作成

Windows Media Encoder(無料で入手可。以下WME)を使ってwmaファイルを作成する。元ファイルは、wav、mp3等が使用可能。

※	WMEではavi、mpg等から、wmv(Windows Media Video)ファイルも作成できるが、以降の手順を使えばwmvもストリーミング再生が可能(但し、メタファイルの記述方法はwaxと同じだがメタファイルの拡張子はwvxとなる)。
※	言うまでもないが、他人の著作物を無断で公開するようなことの無い様に！

・waxファイルの作成

後述するWMPオブジェクトに直接wmaを指定しても良いが、今回はwaxファイルを作成して、WMPで再生する方法にする。

テキスト形式のファイルを作成し拡張子を「.wax」に変更する。ここでは仮に「test.wax」を作成した事にする。

test.wax内の記述

上記は曲情報等も記述しているが、最低限必要なのは

だけとなる。

さらに詳しい情報も記述できるが割愛。詳細はWindows Media™ メタファイルの活用を参照の事。

尚、下記のように<Entry>～</Entry>を複数記述することで、複数の曲を順に再生させる事が出来る。
<ASX version = "3.0">
  <Entry>
    <Ref href = "http://xxx/xxx.wma" />
  </Entry>
  <Entry>
    <Ref href = "http://xxx/yyy.wma" />
  </Entry>

～中略～

</ASX>

・WMPオブジェクトの定義

下記のタグをHTMLファイル内の<body>～</body>内の表示したい部分に記述する。

上記でIEの場合object(ActivXコントロール)による再生、NNではembed(プラグイン)再生となる。

尚、<param name="～">の部分でプレイヤの外観を変更できる。「WEBに音楽を」内にあるWindowsMediaPlayer埋め込み用タグ自動生成スクリプトが便利。

※	文中の太字部分はファイルパス。環境に合わせて必ず変更すること。

投稿者トムヤン時刻 21時50分 DHTML, WEB-TIPS, パソコン・インターネット | 固定リンク | コメント (0) | トラックバック (0)

2005年9月22日 (木)

DHTML備忘録-動的に文字列を変える-

「あるアクションをすると動的に文字列が変わる」という動作には「document.all[id].innerHTML = String;」を使用する(※ IEの場合。NNの場合はサンプルを参照)。

サンプルは「<div id="TXT_01"></div>」というようにdivタグにid属性を持たせて、onMouseOverイベントでリンク上にマウスカーソルが来ると文字列が変わるようになっている(マウスカーソルが外れると元の文字に戻るようにonMouseOutイベントも使用している)。

なお、ブラウザの種類、バージョンによって記述方法が違うため、ブラウザバージョンチェック後に処理を分岐している。

※

NN4では未確認。

2005.09.26 追記
NN(6以上?)ではid属性を与えたdivタグにpositionスタイルを明記しなければ動作しない(事がある)。
NN4以下ではdivではなくlayerタグを使用する事になっていたが、現行バージョンではlayerタグは廃止されているので上手く動作しない。NN4まで動作対象とするのならば、ブラウザバージョンによってdivタグとlayerタグを入れ替えるようスクリプトを記述しなくてはならない。

投稿者トムヤン時刻 19時44分 DHTML, WEB-TIPS, パソコン・インターネット | 固定リンク | コメント (0) | トラックバック (0)

FLASH備忘録-FS Command(JavaScriptとの連携)-

例えばFLASHムービー内のボタンを押すと、JavaScriptを介してポップアップウィンドウを開く等、FLASHムービーとHTMLでの連携した動作を行うには、「FS Command」を使用する。

※	画面はFLASH4。FLASH5以降ではActionScript実装により、アクション定義が大幅に変わっている可能性はあるが、基本的な考え方はおそらく一緒。

シンボル(ここではボタンシンボル)を定義して、シンボルのアクション設定に「FS Command」を加える。「コマンド」、「引数」に与える値については後述。

「FS Command」の動作を有効にするには、パブリッシュ設定でのHTML書き出しで「Flash(FSCommandサポート)」を選択する必要がある。

※	下記のようにパブリッシュ実行時にOBJECTタグにID属性が付与されるだけなので、自分で付け加えても可。尚、パブリッシュ実行で付与されるIDはflaファイル名が使用される様子。

HTMLファイルの<head>～</head>に下記のように記述する。

「FS Command」での呼び出し関数名は

JavaScriptの場合	…「objectタグのid属性名」＋「_DoFSCommand」
VBScriptの場合	…「objectタグのid属性名」＋「_FSCommand」

となる。ここではid属性名が「command」なので、それぞれ「command_DoFSCommand」、「command_FSCommand」としている。

それぞれの引数には

command	…FLASHのアクション設定で「コマンド」に与えた文字列
args	…FLASHのアクション設定で「引数」に与えた文字列

が渡される。

ブラウザがNNの場合、JavaScript関数が呼び出されるが、ブラウザがIEの場合はVBScript関数が呼び出されるため、VBScriptの関数では引数をそのままJavaScript関数に渡して実行する形にすることで、両ブラウザに対応しつつ処理の記述を簡潔にしている。

※	この方法でNNでは上手く動作しないという話もあるので、あくまでIEでの動作を主眼に置いた方法であることに注意。

今回の例では、FLASHムービーのボタンを押下すると、引数で設定したHTMLファイルを幅240ピクセル、高さ240ピクセルのポップアップウィンドウで表示する。

・2005/9/25追記
「FS Command」を使用するより、GetURL()呼び出しで「javascript:」する方が汎用性が高いようなので追記。

FLASHでのシンボルのアクション定義で、GetURLを追加しURLに「javascript:関数名(引数)」とし、HTMLには対応する関数を定義する。

前述の例で言うと

FLASHのGetURL()の設定: URL→javascript:popup("window_open","test"); ウィンドウ→空欄; 変数→送信しない

HTML内の関数定義: <SCRIPT LANGUAGE="JavaScript">; ; </SCRIPT>

参考リンク
Flash でポップアップブラウザウィンドウを作成する方法

投稿者トムヤン時刻 16時32分 DHTML, FLASH, WEB-TIPS, パソコン・インターネット | 固定リンク | コメント (0) | トラックバック (0)