MMLをウェブサイトで鳴らす

JSMMLを使って鳴らす方法。

一般的な方法

1. JSMML.swf, JSMML.js を手に入れる
2. JavaScriptをウェブページのHTMLソースに挿入

JSMML.swf, JSMML.js を手に入れる

JSMML - CodeRepos::Share - Tracの Download - src からダウンロードして、サーバの適当な場所に置く。

JavaScriptをウェブページのHTMLソースに挿入

<script type="text/javascript" src="JSMML.js"></script>
<script type="text/javascript">
JSMML.swfurl = "http://hogehoge/JSMML.swf"; // JSMML.swfへのURL

JSMML.onLoad = function() 
{
	mml = new JSMML();
};

</script>

<p><button onclick="mml.play(document.getElementById('mmlpre').innerHTML);">play</button></p>
<pre id="mmlpre">
t120l8 cdefgfedc;
</pre>

拙作簡易MMLプレイヤー

MMLテキストの上に、再生ボタンと停止ボタンが現れます。

以下のソースをコピーして保存

config以下で設定が変えられます。

var config = {

	// URL to JSMML.swf
	swfurl         : "http://hogehoge/JSMML.swf",

	// text
	playbtntxt     : "play",
	stopbtntxt     : "stop",
	showbtntxt     : "show",
	hidebtntxt     : "hide",

	// CSS class
	playerclass    : "mmlplayer",
	playbtnclass   : "mmlplaybtn",
	stopbtnclass   : "mmlstopbtn",
	togglebtnclass : "mmltogglebtn"

};


var mml;

var functions = new Array();

JSMML.swfurl = config.swfurl;

window.onload = function(){
	if(functions.length == 0) return;

	JSMML.onLoad = function(){
		mml = new JSMML();
	};

	for(var i in functions){
		functions[i]();
	}
};


function mmlplayer(id, hidden, eref)
{
functions.push(function(){
	var t = document.getElementById(id);
	var d = document.createElement("div");
	var bplay = document.createElement("input");
	var bstop = document.createElement("input");

	d.setAttribute("class", config.playerclass);

	bplay.setAttribute("class", config.playbtnclass);
	bplay.type = "button";
	bplay.value = config.playbtntxt;
	bplay.onclick = function(){
		var a = document.getElementById(id);
		var t = a.tagName.match(/^textarea|input$/i) ?
			(a.value || "t100") :
			a.innerHTML;

		if(eref)
			t = t.replace(/<.+?>/g, "").replace(/&amp;/,"&").replace(/&lt;/g, "<").replace(/&gt;/g, ">");

		mml.play(t);
	};

	bstop.setAttribute("class", config.stopbtnclass);
	bstop.type = "button";
	bstop.value = config.stopbtntxt;
	bstop.onclick = function(){ mml.stop(); };

	d.appendChild(bplay);
	d.appendChild(bstop);
	t.parentNode.insertBefore(d,t);

	if(hidden){
		var n = document.createElement("input");
		n.setAttribute("class", config.togglebtnclass);
		n.type = "button";
		n.onclick = function(){
			var q = t.style.display;
			if(!q || q == "block"){
				t.style.display = "none";
				n.value = config.showbtntxt;
			}else{
				t.style.display = "block";
				n.value = config.hidebtntxt;
			}
		};
		d.appendChild(n);
		n.onclick();
	}
});
}

JavaScriptをHTMLソースに挿入

上記で保存したファイル名を hoge.js とすると、

<script type="text/javascript" src="JSMML.js"></script>
<script type="text/javascript" src="hoge.js"></script>

鳴らしたいMMLテキストを pre やら textarea やらに記入して、idを付ける。

<pre id="mml01">
t120 l8 cdefgfedc;
</pre>

スクリプト内で、mmlplayer()を実行する。引数はMMLテキストの書かれた要素の id。

<script type="text/javascript">mmlplayer("mml01");</script>

mmlplayer()の引数は

1. MMLテキストの id
2. MMLテキストを隠すか否か (true | false)
3. 実体参照("<"や">")が含まているか否か (true | false)

MMLをHikiで鳴らす

Hiki向けのMMLプラグインを作ってみました。Hiki/MMLプラグイン

t130l4 @e1,0,127,0,0 o5
e4.d8cdeee r ddd r egg r e4.d8cdeee r dde4.d8 c2;