MMLをウェブサイトで鳴らす
JSMMLを使って鳴らす方法。
一般的な方法
- JSMML.swf, JSMML.js を手に入れる
- 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(/&/,"&").replace(/</g, "<").replace(/>/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()の引数は
- MMLテキストの id
- MMLテキストを隠すか否か (true | false)
- 実体参照("<"や">")が含まているか否か (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;
Last modified:2008/02/04 16:28:20
0.077287