I've added note names

[jamesdeluk]

I wanted to note names to be visible, so I added them. Sharing here in case it helps anyone else. It also adds all the piano key names (remove the key_wrapper block if you don't want them).

You'll need browser extensions for CSS such as Stylus and JavaScript such as Tampermonkey.

It's a bit hacky (it has to re-add them every 100ms as currently they disappear as the notes change), but it seems to work :-)

EDIT: I've changed the position of the label (with top and left), made the font bold, and added a background (otherwise sometimes the label is over the line so an F looks like an E).

The CSS:

.note.labeled:before {
    content: attr(data-note);
    position: absolute;
    top: 50%;
    left: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #999;
    background: rgba(255,255,255,0.9);
}

.staff {
    margin: 90px 0 90px 0 !important;
}

The JavaScript

// ==UserScript==
// @name         Sight Reading Trainer Add Note Names
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Add notes to SRT
// @author       jamesdeluk
// @match        https://sightreading.training/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    var intv = setInterval(function() {
        var x = document.getElementsByClassName('key_wrapper');
        Array.from(x).forEach((e) => {
            var y = e.childNodes[0];
            y.classList.add("labeled");
        });

        var m = document.getElementsByClassName('note');
        Array.from(m).forEach((e) => {
            e.classList.add("labeled");
        });
     }, 100);
})();

Stylus: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne Tampermonkey: https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo

[RayReddingtonx]

I support note names on the clefs for learners or for those on too basic beginner level. It is essential. I dont know how to put this code there; plz update this feature asap, it will be very great. Also, plz add the rhythm/time and metronome, and also include all basic etudes for piano (such as Hanon and any basic etudes) in its generator for technique. The other site https://dcellismusic.com › sightreading has audio input from speakers as well, not just midi; so you can add the audio sound input that way proper piano (non midi) can also use this great tool. I find the output volume a bit low by the way.

Providing category of difficulty levels will be great idea that will save us time of adjusting the intervals etc for the generator.

[RayReddingtonx]

I tried your tampermonkey and stylus code trick but I have no idea where and how to put those text into the source code, I was desperate coz I needed the notenames. I am subsequently using musictheory.net which does have notenames in help mode. Then slowly this tool will be more useful if I keep practicing into it. However the stupid musictheory net has no keyboard and midi feature.

[jamesdeluk]

@RayReddingtonx You have to create custom ones. On Tampermonkey, "Create a new script...". On Stylus, "Write style for". If you Google/YouTube I'm sure you can find some tutorials.

[RayReddingtonx]

@jamesdeluk Thank you so much, it worked after some searching, it's so easy. You are really God sent. However, I wanted to see the label fixed on the lines, that would be much better. Like it is on musictheory net help mode. I wouldnt want to show the names like this (in fact the names attached with Notes themselves will give eye strain when we try to read them moving) and also in front of the Clef Symbols; and also the B C D in between the two clefs thats not shown here. Can you plz do that? also while turning the Stylus css on and off we see that it increases gap in both the clefs for some reason. Even while using just one clef you can see the Configure and Full Screen tabs disappearing.

[jamesdeluk]

@RayReddingtonx I'm not a software developer so this is very much YMMV. But try this in Stylus (no need for Tampermonkey)

.line:before {
    white-space: pre-wrap;
    font-size: 16px;
    font-weight: bold;
    line-height: 100%;
    color: #999;
    position: absolute;
    top: -6px;
    left: -38px;
}

.g_staff .line1:before { content: "F \A     E"; }
.g_staff .line2:before { content: "D \A     C"; }
.g_staff .line3:before { content: "B \A     A"; }
.g_staff .line4:before { content: "G \A     F"; }
.g_staff .line5:before { content: "E"; }

.f_staff .line1:before { content: "A \A     G"; }
.f_staff .line2:before { content: "F \A     E"; }
.f_staff .line3:before { content: "D \A     C"; }
.f_staff .line4:before { content: "B \A     A"; }
.f_staff .line5:before { content: "G"; }

[RayReddingtonx]

Hello! Just to update, I just checked and found out musictheory net automatically accepts the midi keyboard without any settings. It's working. Its range selection is way better than sightreading.trainer. Check out https://www.musictheory.net/exercises/keyboard-reverse (turn on helper and next note: after sound, if thats disabled)

I must say the practise of note reading isnt that fun and helpful. I recommend anyone reading get the Alford or Piano adventure book series and they will be greatly helpful. Also, note identification for ear training is great in musictheory https://www.musictheory.net/exercises/ear-keyboard