Widget:乐器

<style> .button {

 padding: 20px;
 border: none;
 margin: 4px 2px;
 cursor: pointer;

}

.button {border-radius: 8px; width:4.0em;}

</style>

<button onclick="ASFun.play(0)" class="button">do-</button> <button onclick="ASFun.play(2)" class="button">re-</button> <button onclick="ASFun.play(4)" class="button">mi-</button> <button onclick="ASFun.play(5)" class="button">fa-</button> <button onclick="ASFun.play(7)" class="button">so-</button>
<button onclick="ASFun.play(9)" class="button">ra-</button> <button onclick="ASFun.play(11)" class="button">xi-</button> <button onclick="ASFun.play(12)" class="button">do</button> <button onclick="ASFun.play(14)" class="button">re</button> <button onclick="ASFun.play(16)" class="button">mi</button>
<button onclick="ASFun.play(17)" class="button">fa</button> <button onclick="ASFun.play(19)" class="button">so</button> <button onclick="ASFun.play(21)" class="button">ra</button> <button onclick="ASFun.play(23)" class="button">xi</button> <button onclick="ASFun.play(24)" class="button">do+</button>
<button onclick="ASFun.play([[4],[4],[5],[7],[7],[5],[4],[2],[0],[0],[2],[4],[4,,1.5],[2,,0.5],[2,,2],[4],[4],[5],[7],[7],[5],[4],[2],[0],[0],[2],[4],[2,,1.5],[0,,0.5],[0,,1.5]])">欢乐颂</button>

<script> /** score=[ [音符,音阶,节拍,音色,响度], [音符,音阶,节拍,音色,响度], …… ]

• /

ASFun={ "initialize":function(){ ASMeta={ "synth":new WebAudioTinySynth(), "bpm":135, "volume":100, "scale":4, "timbre":0, } }, "play":function(score){ try{ ASMeta } catch(e){ ASFun.initialize() } let time=0 for(let i=0;i<score.length;i++){ let sound=score[i] setTimeout(function(){ ASFun.playNote(sound[1]||ASMeta.scale,sound[0],sound[3]||ASMeta.timbre,sound[4]||ASMeta.volume) },time) time+=(sound[2]||1)*60/ASMeta.bpm*1000 } }, "playNote":function(scale,note,timbre,volume){ if(note==null){ return } ASFun.setTimbre(timbre) ASMeta.synth.send([0x90,scale*12+note,volume]) }, "setTimbre":function(timbre){ ASMeta.synth.send([0xc0,timbre]) }, "keyboardtry":function(){ let keynote={ "KeyA":-3, //la- "KeyW":-2, //#la- "KeyS":-1, //xi- "KeyD":0, //do "KeyR":1, //#do "KeyF":2, //re "KeyT":3, //#re "KeyG":4, //mi "KeyH":5, //fa "KeyU":6, //#fa "KeyJ":7, //so "KeyK":9, //la "KeyO":10, //#la "KeyL":11, //xi "Semicolon":12, //do+ "BracketLeft":13, //#do+ "Quote":14, //re+ "BracketRight":15 //#re } let keyfun={ "Minus":function(){ if(ASMeta.scale==0){ return } ASMeta.scale-- }, "Equal":function(){ if(ASMeta.scale==10){ return } ASMeta.scale++ }, } window.addEventListener("keydown",function(e){ try{ ASMeta } catch(e){ ASFun.initialize() } if(keynote.hasOwnProperty(e.code)){ ASFun.play([[keynote[e.code]]]) } if(keyfun.hasOwnProperty(e.code)){ keyfun[e.code]() } try{ document.getElementById(e.code).classList.remove("pressup") document.getElementById(e.code).classList.add("pressdown") } catch(e){ } }) window.addEventListener("keyup",function(e){ try{ document.getElementById(e.code).classList.remove("pressdown") document.getElementById(e.code).classList.add("pressup") } catch(e){ } }) } } ASFun.keyboardtry() </script> <scr