Waterfall config example

[zhuzixu900818]

I'm an absolute Javascript newbie. Not sure where to put config code. I'm using the below script in a WordPress Custom HTML Code block

<script src="https://cdn.jsdelivr.net/combine/npm/tone@14.7.58,npm/@magenta/music@1.23.1/es6/core.js,npm/focus-visible@5,npm/html-midi-player@1.4.0">
</script>

(midi-player src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid" visualizer="#myPianoRollVisualizer">
</midi-player)

(midi-visualizer type="waterfall" id="myPianoRollVisualizer">
<script>
visualizer.config = {showOnlyOctavesUsed:True};
</script>
</midi-visualizer)

Thank you!

[cifkao]

In your script, you first need to get a reference to your visualizer, e.g.: const visualizer = document.getElementById("myPianoRollVisualizer"). Also, you should pay attention to < vs. ( and true vs True.

This should work:

<script src="https://cdn.jsdelivr.net/combine/npm/tone@14.7.58,npm/@magenta/music@1.23.1/es6/core.js,npm/focus-visible@5,npm/html-midi-player@1.4.0">
</script>

<midi-player src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid" visualizer="#myPianoRollVisualizer">
</midi-player>

<midi-visualizer type="waterfall" id="myPianoRollVisualizer">
</midi-visualizer>

<script>
const visualizer = document.getElementById("myPianoRollVisualizer");
visualizer.config = {showOnlyOctavesUsed: true};
</script>

[zhuzixu900818]

Thank you so much! I put parenthesis because no sure why <> symbol causes code not displaying correct. Good catch on true vs 'True'.
Also const visualizer = document.getElementById("myPianoRollVisualizer"); seems to be a problem. I use below code, which works:
<script> document.getElementById("myVisualizer").config = {showOnlyOctavesUsed: true}; </script>