I am making a tutorial on how to learn JavaScript using Tone.js. I am using the Ace editor to run the code in. Everything is working but every time you press play it doubles that sound each time causing distortion.
I tried to use ace's editor.setValue(''); to clear the value on stop but that remove everything from the code editor. I need to clear the value from the script but leave it in the editor div. Not sure what I can do here.
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>Try moving the stop function outside of the go function.
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>