ギター指板の音名をランダムに表示するメモ

音名ランダム表示
ソースコード
指板の音名
参考リンク

音名ランダム表示

ソースコード

はてなブログの記事内に書くと動く。 (なぜかjquery読み込まないと動かない)

<section>
    <p class="js-key" style="font-size:400%; font-weight:bold; text-align:center;">C</p>
</section>
<script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>
<script type="text/javascript">
    $(function(){
        var tempo = 70;
        var delay = 60 / tempo * 1000;
        function random(arr) {
            return arr[Math.floor(Math.random() * arr.length)];
        }
        function display_key() {
            var keys = ['C', 'C#/Db', 'D', 'D#/Eb', 'E', 'F', 'F#/Gb', 'G', 'G#/Ab', 'A', 'A#/Bb', 'B'];
            var key = random(keys).replace(/(.+?\/)/g, '<span style="color:#eee;">$1</span>');
            $('.js-key').html(key);
        }
        display_key();
        setInterval(function(){
            display_key();
        }, delay);
    });
</script>