Step.31 - ポップアップウィンドウ(小窓)でＢＧＭを流す

新しいウィンドウを開いてそこで BGM を流します。
トップページで BGM を流しても、サブページへ移動すれば BGM は切れてしまいます。
別ウィンドウであれば BGM は切れることなく、また、訪問者が聞きたくなければ、閉じれば良いだけです。

Step テーマ


● window.open ウィンドウを開く
● window.close ウィンドウを閉じる

実行例


よろしければ、ＢＧＭをお聞きください →
▲TOP

リスト


<form>
よろしければ、ＢＧＭをお聞きください →
<input type="button" value="今週のＢＧＭ" onclick="window.open( 'bgmwin.htm', 'bgm', 'width=360,height=250' )">
</form>

↓　このフォームには、上記のリストと同じものが入っています。[CTRL]+[A]で全選択して、コピーできます。
▲TOP

リスト -BGMウィンドウ 例-


<html>
<head>
<title>BGM WINDOW</title>
</head>
<body bgcolor="#FFC0CB">
<p align="center">
Tatsuya's Home Page<br>
イヌでもわかるJavaScript講座<br>
<br>
♪ 今週のBGM ♪<br>
「日曜画家」<br>
作曲 K.K.<br>
</p>
<form><p align="center">
<input type="button" value="閉じる" onclick="window.close()">
</p></form>
<p align="center">
<embed src="sunday.mp3" hidden="false" loop="true" autostart="true">
</p>
</body>
</html>

↓　このフォームには、上記のリストと同じものが入っています。[CTRL]+[A]で全選択して、コピーできます。
▲TOP
サンプルだけの HTMLは こちらへ

説明


BGM専用ウィンドウを作成して BGMを流します。
BGMを流すのは、結構嫌う方が多いです。当然、音が出ない端末も多いわけです。
ならば、トップページの先頭にでも確認ボタンを設けて、BGMの ON、OFF を訪問者に選択してもらえば良いわけです。

また、トップページで BGMを流しても、サブページへ移動したら、BGMは終わってしまいます。
ポップアップウィンドウを作って、そこで BGMを流せば、閉じるまで（飽きるまで）流れつづけます。(^^;

今回は確認ボタンを押して、ポップアップウィンドウを window.open で開きます。
別ウィンドウの作成は Step.13 と全く同じですが、今回はＢＧＭを流すだけのウィンドウなので、サイズを調整しています。
window.open( "bgmwin.htm" , "bgm", "width=360,height=250" );
width は幅、height が高さです。

ポップアップウィンドウ側に、BGMを止める（ウィンドウを閉じる）ための「閉じる」ボタンをつけます。
<input type="button" value="閉じる" onclick="window.close()">
window.close() を実行するとウィンドウを閉じます。
この小窓側で、BGMを流します。

<embed>タグ

音声ファイルを再生します。また音声ファイルを再生するためにはブラウザにプラグインがインストールされている必要があります。
<embed src="sunday.mp3" hidden="false" loop="true" autostart="false">

属性説明
autostarttrue:自動再生
false:ユーザ操作で再生する
heightプレーヤーの高さ
hiddentrue:プレーヤーの非表示
false:プレーヤーの表示
looptrue:繰り返し再生
false:1回のみ再生
src音楽ファイルのURL
type audio/midi : MIDI
audio/mp4 : MP4
video/mpeg : MPEG
audio/ogg : ogg
audio/wav : WAV
audio/x-ms-wma : WMA
video/x-ms-wmv : WMV
widthプレーヤーの幅


<audio>タグ

<embed>タグで音楽を再生するにはブラウザにプラグインのインストールが必要です。しかし、多くの人はプラグインは入れていないと思います。
HTML5からプラグインを使わずに音声を再生することができる <audio>タグが追加されました。ほとんどのブラウザで使えますが、IE8以下は使えません。
また、対応している音声形式は、mp3、m4a、oggです。
<audio src="sunday.mp3" loop controls></audio>


属性説明
autoplay自動再生を行う
controlsコントローラを表示する
loop繰り返し再生する
mute設定をミュートにする
preload="先読み指定"none : 先読みをしない
metadata : メタデータのみ先読みする
auto : 先読みを行う
src="url"音楽ファイルのURL



MIDIデータは、K.K.さんからお借りしました。Thanks.
"sunday.mid" Copyright (C) K.K. All rights reserved.
Intermezzo http://www1.linkclub.or.jp/~medaka34/
▲TOP

Q&A 1


▲TOP