midiをHPにつけてみよう(応用編)

では、これから本番です!
midiをHPにつけるにはいろいろな方法があります。
私が考えうるものをひとつひとつ挙げていきますね。
それぞれに対しサンプルテンプレートをつけます。
ふわふわ。り様のものを使ってみました。
6つのバージョンを考えてみました。


①ひとつのページだけにつける

私小説やテキストサイト様にお勧め。
ただし、これは『midiをサイトにつける場合のマナー』でもかいてありますが、このページの一つ前に音がなる旨を書きましょう!

↑別窓が開きます。
付け方をマスターしよう!
音楽を鳴らしたいページに、
『<embed src="midiファイル名.mid" loop="-1" width="0" height="0">』
というタグを書くだけ!


②サイト全体につける

これもmidiの再生ボタンがないやつです。
使い方には注意しましょう。

↑別窓が開きます。
付け方をマスターしよう!
まずはフレームファイルとmidiファイルを作ります。
ソースは基本編を参考にしてください。
テンプレートは既存のものそのままでおっけいです。
フレームファイルから読み込めば音が鳴るテンプレートの完成です!


③音楽が鳴る小窓をつける

Javacsriptによって小窓を開き、そこで音楽を鳴らします。
小窓を閉じれば音楽は止まります。

↑別窓が開きます。
付け方をマスターしよう!
小窓を表示させるのにはjavascriptというものを使います。
ソースは次のを参考に。
midiのボタンをつけたいページを開きます。
<head>タグ内に

小窓の名前はなくても動きますが何か設定したほうが窓がたくさん開かないのでいいと思います。
以下は小窓の設定です。
値はyes/noあるいは1/0です。
resizable・・・ウィンドウサイズの変更可/変更不可
menubar・・・メニューバーの表示/非表示
directories・・・ディレクトリバーの表示/非表示
status・・・ステータスバーの表示/非表示
location・・・ロケーションバーの表示/非表示
scrollbars・・・スクロールバーの表示/非表示
toolbar・・・ツールバーの表示/非表示
width・・・ウィンドウの幅
height・・・ウィンドウの高さ
left・・・ウィンドウの表示位置左から?px
top・・・ウィンドウの表示位置上から?px

そして<body>タグ内に
<a href="javascript:openWindow()">ON?</a>
を入れましょう。

midiを鳴らすファイルは
『<embed src="midiファイル名.mid" loop="-1" width="0" height="0">』
などで設定して音楽を鳴らしましょう。


④フレームでON/OFFボタン

フレーム構造になっています。
見えるフレームでmidiを鳴らす、いろいろ応用のきく付け方。
6番が応用バージョン。

↑別窓が開きます。
付け方をマスターしよう!
フレームファイルとmidiを鳴らすファイルとmidiを止めるページを作りましょう。
ソースは以下を参考に。
フレームファイル

midiを止めるファイル

midiを鳴らすファイル



⑤ON/OFFボタン+ランダム再生

フレーム構造になっています。
見えないフレームでmidiを鳴らす、基本にもあった典型的な付け方。
javascriptを使ってランダムに音楽が流れます。

↑別窓が開きます。
付け方をマスターしよう!
これは基本編のフレームファイルとjavascriptのファイルを組み合わせただけです。
ソースは基本編を参考にしてください。


⑥ON/OFFボタン+ランダム再生+タイトル付き

4番の応用でかなり多機能なjavascriptを使っています。
このスクリプトは03.Java script Tipsで配布中。

↑別窓が開きます。
付け方をマスターしよう!
4番を参考にしてください。
midiを鳴らすファイルは、Javascriptの小技のmidiランダム再生スクリプトからダウンロードして、それを使ってください。


駆け足できてしまいましたが、わかったでしょうか?
付け方がわからない場合は遠慮なく聞いてください。
midiの付け方、鳴らし方もこれが全てではないはずです。
いろいろ工夫してつけてみるもの楽しいと思いますよ!
top

ホームページ作成に役立つコーナー