Estoy haciendo un tutorial sobre cómo aprender JavaScript usando Tone.js. Estoy usando el editor Ace para ejecutar el código. Todo funciona, pero cada vez que presiona reproducir, el sonido se duplica cada vez y causa distorsión.
Traté de usar el editor.setValue(''); para borrar el valor en stop pero eso elimina todo del editor de código. Necesito borrar el valor del script pero dejarlo en el editor div. No estoy seguro de lo que puedo hacer aquí.
const editor = ace.edit("editor"); editor.setTheme("ace/theme/monokai"); editor.session.setMode("ace/mode/javascript"); editor.setOptions({fontSize:"14pt"}); const go = () => { const userCode = editor.getSession().getValue(); try { new Function(userCode)(); console.log(userCode); } catch (err) { console.error(err); } Tone.Transport.start(); } const stop = () => { Tone.Transport.stop(); } #editor { width: 100%; height: 91%; position: relative; min-height: 500px; } .run { display: inline-block; width: 100px; height: 30px; background-color: #f0f0f0; border-radius: 4px; text-align: center; line-height: 20pt; font-weight: 900; cursor: pointer; margin: 0 11px 11px 0; } #go { margin-left: 0; } .run:hover { background-color: #75e9e9; } <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/13.8.9/Tone.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.4/ace.js"></script> <div> <div id="go" class="run" onclick="go()">Play</div> <div id="stop" class="run" onclick="stop()">Stop</div> </div> <div id="editor"> const synth = new Tone.Synth(); synth.toMaster(); // C major cord const notes = [ "C4", "E4", "G4", "C5", "E5", "G5" ]; var index = 0; Tone.Transport.scheduleRepeat((time) => { repeat(time); }, '8n'); function repeat(time) { let note = notes[index % notes.length]; synth.triggerAttackRelease(note, '8n', time); index++; } </div> </div>Intente mover la función de parada fuera de la función de marcha.
const go = () => { Tone.Transport.start(); }; const stop = () => { Tone.Transport.stop(); }; const synth = new Tone.Synth(); synth.toMaster(); // C major cord const notes = ["C4", "E4", "G4", "C5", "E5", "G5"]; var index = 0; Tone.Transport.scheduleRepeat((time) => { repeat(time); }, "8n"); function repeat(time) { let note = notes[index % notes.length]; synth.triggerAttackRelease(note, "8n", time); index++; } <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/13.8.9/Tone.js"></script> <div> <div id="go" class="run" onclick="go()">Play</div> <div id="stop" class="run" onclick="stop()">Stop</div> </div> <div id="editor"> </div> </div>