kowaza MENU

アクセスアップには、ホームページ登録ドットコム
Click Here!
音楽ファイルを操る

音楽ファイルを操る

≫今回は音楽ファイルを扱う小技を紹介します

通常HPで音楽ファイルを使うときは、BGSOUND　タグやプラグインで実現します、 BGSOUNDはHPが開く前に実行される為に、回線速度が遅い場合はHPが中々開かない と言った問題やユーザー側でコントロールが出来ないと言った問題があります。

プラグインの場合はもっと柔軟に対応できますが、一つのプラグインで一つの コントロールバーが出現します、コントロールバーを無くす事も出来るのですが 無くしてしまうとコントロールが出来ないと言う問題も残ります、それに コントロールバーは既存のプレーヤーのバーですので見栄えがしません。

それを補うのが今回の小技です、曲数は無限にストック出来、 さらにコントロールバーを一つにする事でスペースを大幅に節約出来、 そしてあらゆるタグに柔軟に対応出来、 デザインも思いのままって言う今回の小技を使ってみてください。

★今回使う音楽素材は

　　　　　『　Rascal,s Heart Song　』
http://www7.ocn.ne.jp/~rasurasu/hapu/hapumid.htm

様でフリー配布しているMIDIを3曲お借りしています、良い曲ばかりです♪
音楽ファイルはMIDIやMP3等ストリーミングできる素材を使いましょう。



線
●最も基本的な設置

まず、JavaScriptを<head>〜</head>の間に記述します、FrontPageExpressを 使っている方はメニューバーの挿入からスクリプトをクリックすると、入力画面が でてきますので其方から入力して下さい、その時<script language="JavaScript"> <!--　　　//--></script>のタグは省いて下さい。

◎スクリプトを記述したら、<body onload="syoki()">　とbodyの属性でonloadを 必ず入力して下さい、この場合でも通常の背景色等のタグは仕えます。
FrontPageExpressは表示→HTMLでタグが直接入力できますので其方から打って下さい。


◎そして、プラグインの設定部分は下のようになっています

<embed id="media1" autostart="0" loop="1" src="1曲目音楽ファイル" 
hidden="true" width="0" height="0">

貴方が設定する所は「src="1曲目音楽ファイル"」この部分です、
ここに流したい曲のファイル名を絶対パスか相対パスで設定して下さい。

現在は3曲分のタグを書いていますが、お好みで何曲でも増やすことが出来ます！
その際は　id="media1"　の数字の部分を増やして対処して下さい。


◎音楽選択部

<a href="javascript:setNo(media1)">1曲目タイトル</a>

貴方が設定する個所は「一曲目タイトル」の部分です、現在フォントサイズ1で表示
されるようになっていますのでお好みで変化させて下さい。

プラグインの所で曲数を増やした方はここのタグも増やして対応させて下さい。
setNo(media1)　の数字の部分を増やして対処して下さい。


◎ボタン操作部

<a href="javascript:play_setNo()"><img border="0" src="プレイ画像ファイル" 
width="20" height="20"></a>

貴方の設定する個所は　src="プレイ画像ファイル"　で、使用したい画像ファイル
名を絶対パスか相対パスで入力して下さい。

画像では無くテキストを使用したい場合は、
<a href="javascript:play_setNo()">スタート</a>
こんな感じで記述します。


●基本設置終了
ここまでが最も基本的な設置です、後のレイアウトは皆さんに任せます が、FrontPageExpressを使用している方は、通常の編集画面に「Ｊ」と言う マークと、プラグのマークが出現してレイアウトを邪魔してしまいます、 しかし、このマークは何処に移動させてもOKなのでレイアウト上邪魔にならない 所へ追いやってご使用下さい、音楽選択部やボタン部の文字や画像は 通常の操作で移動させれますのでお試し下さい。

ウインドウ0　←基本的例です。

●応用設置
ここでは、このスクリプトを基本に2種類の設置を紹介しています、このまま使用しても OKですので、色々変えるのが面倒な方はお使いください。

ウインドウ1　←バータイプ

ウインドウ2　←背景画像タイプ



線
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>プラグイン（音楽を操る）</title>

<!--プレーヤー操作部//-->

注意：この部分は変更しないようにして下さい

<script language="JavaScript">
<!--
function syoki(){
music=media1;
}

function setNo(set) {
music.stop();
music = set;
}

function play_setNo() {
music.CurrentPosition=0;
music.play();
}

function stop_setNo() {
music.stop();
}

//-->
</script>
</head>


<body onload="syoki()"> 　←このonload部分を忘れずに記述して下さい。




<!--プラグイン設定部//-->

src＝””このダブルフォーテーションの中に音楽ファイルまでの絶対パス又は
相対パスを入れて下さい。

<embed id="media1" autostart="0" loop="1" src="1曲目音楽ファイル" 
hidden="true" width="0" height="0">

<embed id="media2" autostart="0" loop="1" src="2曲目音楽ファイル" 
hidden="true" width="0" height="0"> 　

<embed id="media3" autostart="0" loop="1" src="3曲目音楽ファイル" 
hidden="true" width="0" height="0"> 




<!--音楽選択部//-->

このタイトルを自分の設定に変えます。

<p><a href="javascript:setNo(media1)">
<font size="1">1曲目タイトル</font></a></p>

<p><a href="javascript:setNo(media2)">
<font size="1">2曲目タイトル</font></a></p>

<p><a href="javascript:setNo(media3)">
<font size="1">3曲目タイトル</font></a></p>




<!--ボタン操作部//-->

　src＝””各画像を絶対パス又は相対パスで設定します、画像では無く
普通にテキスト（文字）でもOKです、その場合は
<a href="javascript:play_setNo()">スタート</a>
こんな感じです。

<p><a href="javascript:play_setNo()"><img border="0" 
src="プレイ画像ファイル" width="20" height="20"></a></p>

<p><a href="javascript:stop_setNo()"><img border="0" 
src="ストップ画像ファイル" width="20" height="20"></a></p>


</body>

</html>

今回の小技は、少々長くて初心者の方には難しい面も多々あるかとは思います、若し上手く
設置出来なかったら、解説を良くお読みになって慎重に設置していって下さい。



線
共同コンテンツ：誰でも解る無料ホームページ作成講座
共同コンテンツ：今時のHP作り！


前へ 次へ PageTop