WEBブラウザで音楽再生_04

Last-modified: 2014-08-16 (土) 12:41:50 (2015d)

WMPプラグインを使いWEBブラウザで動作する音楽プレイヤーを作成する

.asx形式のプレイリストが作成されたので、いよいよWindows Media Player のActiveXプラグインを使って、WEBブラウザで動作する音楽プレイヤーを作成する。

基本的にはhtmlファイルにプラグインを配置し、プレイリストファイルを読み込ませるだけで動作する。

[後記] 実際に作ってみて気づいたのですが、WMPプラグインはやはりWindows Media Player だけあって音が悪いです。

タイマー機能

個人的に、音楽プレイヤーにはどうしてもタイマーによって再生が停止する機能がほしかったので組み込んだ。

再生を停止するには、メディアプレイヤーオブジェクトに用意されているStop();というメソッドをJavaScript?から呼ぶだけでOK。

ベーシック認証

音楽再生アプリケーションが含まれているディレクトリに丸ごと、音楽ファイルにベーシック認証でアクセスする場合と同等のID/パスワードでベーシック認証をかける。これにより、後からHTA等で呼ぶ場合もスムーズに動作する。

プレイリストファイルのキャッシュについて

環境によってはプレイリストファイルがキャッシュされ、再生成した場合でも昔のプレイリストファイルが読み込まれてしまう場合がある。

webサーバがプレイリストファイルを送出する際、ヘッダーにno-chacheかなにかつければ良いのだと思うが、設定が面倒だったため、プレイリストファイルを要求する際に無駄なタイムスタンプをクエリとして渡し、キャッシュから読むことを回避している。

…そのため無駄なキャッシュが溜まることになるが、とりあえず気にしない。

player_wmp.png
動作サンプル
music: Jellybelly (c)2006

ソースの一例

index.php

<?PHP
include("config.php");
?>
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="default.css" />
<TITLE>music player</TITLE>
<SCRIPT src="default.js" LANGUAGE="JavaScript"></SCRIPT>
<SCRIPT FOR="MediaPlayer1" EVENT="ScriptCommand(bstrType, bstrParam)" LANGUAGE="Jscript">
	if (bstrType.toLowerCase() == "caption") {
		document.all.contentIE.innerHTML = bstrParam;
	} 
</SCRIPT>

</HEAD>
<BODY BGCOLOR="#ffffff" onload="bodyOnLoad();">

<DIV id="wrapper">

<DIV id="timer">
<INPUT type="checkbox" id="timer_enable" />TIMER
<SELECT id="timer_h">
<?PHP
for($i=0;$i<24;$i++){
	if($i==3) $selected = "selected " ;else $selected = "";
	echo "<OPTION value=\"".$i."\" ".$selected.">".sprintf("%02d",$i)."</OPTION>\n";
}
?>
</SELECT>
 : 
<SELECT id="timer_m">
<?PHP
for($i=0;$i<60;$i+=1){
	if($i==0) $selected = "selected " ;else $selected = "";
	echo "<OPTION value=\"".$i."\" ".$selected.">".sprintf("%02d",$i)."</OPTION>\n";
}
?>
</SELECT>

<DIV id="clock"></DIV>
</DIV>

<OBJECT ID="MediaPlayer1" width="300" height="144"
	classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
	CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715"
	standby="Loading MicrosoftR WindowsR Media Player components..." 
	type="application/x-oleobject"
>
	<PARAM NAME="AutoStart" VALUE="True" />
	<PARAM NAME="FileName" VALUE="<?=$list_file?>" />
	<PARAM NAME="ShowControls" VALUE="True" />
	<PARAM NAME="ShowStatusBar" VALUE="True" />
	<PARAM name="ShowAudioControls" value="true">
	<PARAM name="ShowDisplay" value="true">
	<PARAM name="Volume" value="100">
	<EMBED type="application/x-mplayer2" 
		pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
		SRC="<?=$list_file?>"
		name="MediaPlayer1"
		width="300"
		height="144"
		autostart="1"
		showcontrols="1"
	>
	</EMBED>
</OBJECT>  

<FORM id="make_playlist" action="make_playlist.php">
<SELECT name="filter">
<?PHP
foreach($aryRegFilter as $i => $tmp){
	echo "<OPTION value=\"".$i."\">".$i."</OPTION>\n";
}
?>
<OPTION value="">full</OPTION>
</SELECT>
<SELECT name="songnum">
<OPTION value="1">1</OPTION>
<OPTION value="5">5</OPTION>
<OPTION value="10" selected >10</OPTION>
<OPTION value="25">25</OPTION>
<OPTION value="50">50</OPTION>
</SELECT>
<INPUT type="submit" value="リストシャッフル" />
</FORM>
</DIV>

</BODY>
</HTML>

config.php

<?PHP
mb_http_output('UTF8');
mb_internal_encoding('UTF8');
mb_regex_encoding('UTF8');

define('SOURCE_FOLDER','X:/datadir/[PC内部から見たこのアプリケーションのあるディレクトリ]/');
define('DESTINATION_URL_HEADER','http://example.com/インターネットから見た音楽フォルダ/');

define('REMOVE_FILEHEADER',"Y:\\[音楽ファイルのあるディレクトリ]\\");

define('SOURCE_LIST','list_fullmusic.m3u'); //全曲リストファイル名

define('DESTINATION_LIST','list.asx'); //部分プレイリストファイル名

define('INT_SONG_NUM_DEFAULT',10);

define('ENCODING_SYSTEM','SJIS');
define('ENCODING_GET','EUC-JP');

$aryRegFilter = array(
	'mp3'        => '/\.mp3$/i',
	'Steely Dan' => '/STEELY DAN.*\.mp3/i',
);

$list_file = "list.asx?".time(); //部分プレイリストファイル名。キャッシュしない。
?>

default.js

function bodyOnLoad(){
	var hTimer = setInterval("fTimer()",20000);
	fTimer();
}

//★イベントタイマー
function fTimer(){
	var d = new Date();
	
	//時計を描画
	document.getElementById("clock").innerHTML = digitTrim(d.getHours(),2)+":"+digitTrim(d.getMinutes(),2);
	
	//時間が来たら停止
	if(d.getHours()==document.getElementById('timer_h').value &&
		d.getMinutes()==document.getElementById('timer_m').value
		 && document.getElementById('timer_enable').checked
		 ){
			MediaPlayer1.Stop();
			document.getElementById('timer_enable').checked = false;
	}
}

//★桁数をそろえる
function digitTrim(getMyNumber,getMyDigit){
	setMyNumber = getMyNumber.toString();
	while(setMyNumber.length < getMyDigit){
		setMyNumber = "0" + setMyNumber;
	}
	return(setMyNumber);
}

default.css

BODY,DIV,FORM,OBJECT{
	margin:0;
	padding:0;
}

SELECT{
	font-size:75%;
	}

BODY{
	margin:0;
	padding:0;
	background:#777;
	text-align:center;
	vertical-align:middle;
	}

DIV#wrapper{
	position:absolute;
	top:50%;
	left:50%;
	margin:auto;
	margin-left:-150px;
	margin-top:-103px;
	width:300px;
	text-align:left;
	background:#eee;
}
	
DIV#timer{
	margin:0;
	padding:2px;
	background:#ccc;
	position:relative;
	border:1px solid #b2b2b2;
}
DIV#clock{
	margin:0;
	padding:1px;
	position:absolute;
	top:3px;
	right:3px;
	width:60px;
	font-size:90%;
	font-weight:bold;
	text-align:center;
	background:#000;
	color:#89A4FF;
	border:1px solid #eee;
}


FORM#make_playlist{
	margin:0;
	padding:2px;
	background:#aaa;
	border:solid #b2b2b2;
	border-width:0 1px 1px 1px;
}