- ベストアンサー
Javascriptを用いてリアルタイムソルフェージュウェブページを作成する方法
- Javascriptを使って、リアルタイムソルフェージュ（読譜訓練）を行うウェブページを作成する方法について教えてください。
- 譜面がスクロールし、同時に音源が再生されるリアルタイムソルフェージュのセクションを設置したいです。
- HTMLやCSSの知識が少なく、動的な要素を追加するためにJavascriptを活用したいと考えています。どのような方法がありますか？
- bistort
- お礼率90% (49/54)
- JavaScript
- 回答数2
- ありがとう数6
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
レスがつきませんね～。 たたき台に！ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>dokodemo kanntann?</title> <style> ul { list-style-type: none; } ul,li { margin:0px; padding:0px; } ul li img { width:640px; height:80px; margin:20px 0px;} #score2 { display:none;border:2px red solid; padding:16px; position:absolute; top:260px; left:30px; width:560px; background-color:#fff; height:140px;} #score3 { margin-top:16px; border:1px #555 solid; overflow:hidden; position:relative;} #score4 { border:1px #555 solid; height:100px; } #score4 img { floar:left; width:640px; height:80px; margin:0px; padding:0px; } </style> <div> <h3>椅子の上でボニョボニョ</h3> <p><input type="button" id="bt0" value="Open"></p> <ul id="SCORELIST"> <li><img src="gakufu00.gif" alt="gakufu00"></li> <li><img src="gakufu01.gif" alt="gakufu01"></li> <li><img src="gakufu02.gif" alt="gakufu02"></li> <li><img src="gakufu03.gif" alt="gakufu03"></li> <li><img src="gakufu04.gif" alt="gakufu04"></li> </ul> </div> <div id="score2"> <div> <input type="button" id="bt1" value="|<"> <input type="button" id="bt2" value="<<"> <input type="button" id="bt3" value="■"> <input type="button" id="bt4" value=">"> <input type="button" id="bt5" value=">>"> <input type="button" id="bt6" value=">|"> </div> <div id="score3"> <div id="score4"> </div> </div> </div> <script type="text/javascript"> //@cc_on var x = 0, w = 0; var timerId = null; var tempo = 50; addEvent(window, 'load', function (){ var i = 0, c, o, imgs = document.getElementById('SCORELIST').getElementsByTagName('img'); while (o = imgs[i++]) { w += o.offsetWidth; document.getElementById('score4').appendChild(o.cloneNode()); } document.getElementById('score4').style.width = w + 'px'; document.getElementById('score4').style.marginLeft = '0px'; }); addEvent(document.body, 'click', function (evt) { var o, s; o = evt.target || evt.srcElement; if (o.tagName != 'INPUT' || !o.id ) return; switch (o.id) { case 'bt0': s = document.getElementById('score2').style; s.display = (s.display == 'none' || s.display == '')? 'block': 'none'; break; case 'bt1': if (timerId) clearInterval(timerId); timerId = null; x = 0; document.getElementById('score4').style.marginLeft = '0px'; break; case 'bt2': if (timerId) { clearInterval(timerId); tempo +=5; if (tempo>200) tempo = 10; timerId = setInterval(move0, tempo); } break; case 'bt3': if (timerId) clearInterval(timerId); timerId = null; break; case 'bt4': if (!timerId) { timerId = setInterval(move0, tempo); } break; case 'bt5': if (timerId) { clearInterval(timerId); tempo -=5; if (tempo<10) tempo = 10; timerId = setInterval(move0, tempo); } break; } }); function move0() { document.getElementById('score4').style.marginLeft = -x + 'px'; x+=4; if (w < x) { clearInterval(timerId); timerId = null; } } function addEvent(obj, evt, eventHandler) { obj./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/evt, eventHandler, false); } </script>
その他の回答 (1)
締め切って、再度質問をあおぐとか・・・。 http://www.openspc2.org/reibun/javascript/#21
お礼
_pipi_さん，度重なる対応有難うございます。 ご教授頂いたリンク先は私も拝見しましたが， 個別にサウンドを鳴らす方法はあるようです。 しかしながら，「連動」となると応用の範囲に 含められるので掲載されていないですね。 やはり，丁寧な対応に甘えてしまうので， 私自身の理解の為にも一旦締め切り試行錯誤 してみたいと思います。 1クリックによって二動作を同時に行う事が キーワードになると予想されるので _pipi_さんのたたき台を基に，しばらく 個人的に探ってみます。 ありがとうございました。
お礼
_pipi_さん，ご回答ありがとうございます。 早速実行したところ，スコア部分にあたる 画像はスクロールし且つテンポによって 調整が出来ました。 ひとまず，スクロールについては土台と なりました。 やはり欲が出てしまいますが，音源との 連動に関してです。 私自身も参考サイトが無いものかと 探している最中ですがやはり的確な プログラムを見つけられずにいます。 宜しければさらにお知恵を賜ることが 出来ればと思います。