Going beyond creating a chord library

[sedwardmino]

Hope someone can help with this! So using the tonal js libary i was able to create a chord library but now i want to expand on that. I am trying to be able to have the button speak the name of the button. If the button m7 is clicked we want the audio to say "minor seven". Is there a certain place where the names of these buttons are, for example where do we find the list of names for the chord buttons? Is there a specific place they are stored, or possibly a line of code I could use to call each chord button type?

Example with the code below, when I click on the button named "minor 7"

Speak

<script> /* JS comes here */ function textToAudio() { let msg = document.getElementById("button").value;

            let speech = new SpeechSynthesisUtterance();
            speech.lang = "en-US";
            
            speech.text = msg;
            speech.volume = 1;
            speech.rate = 1;
            speech.pitch = 1;
            
            window.speechSynthesis.speak(speech);
        }

[mrjacobbloom]

I think ChordType.get() should do what you're looking for:

Tonal.ChordType.get('M7').name; // "major seventh"

[sedwardmino]

I tried chordType.get, I am very new to JS so maybe I am not inserting the code you provided in the correct space.

[mrjacobbloom]

Something like this maybe?

import { ChordType } from "@tonaljs/tonal";

function textToAudio() { 
            let msg = document.getElementById("button").value;
            let longChordName = ChordType.get(msg).name;
            let speech = new SpeechSynthesisUtterance();
            speech.lang = "en-US";
            
            speech.text = longChordName;
            speech.volume = 1;
            speech.rate = 1;
            speech.pitch = 1;
            
            window.speechSynthesis.speak(speech);
}

[sedwardmino]

update: I do have textToSpeech working, the code does pronounce what the dictionary is set to. The small issues I have ran into have been that the setTimeout is not working properly, What should occur is that the speech audio says the name of the chord and then wait 1 second = 1000 ms (the amount of time in milliseconds) and then play the chord sound.

The other issues that the textToSpeech will randomly repeat saying the chord name 2-5 times. It should only say the chord name once. I am not sure how to add a stop to the textToSpeech after chord is clicked.

I have set it to 100, 1000, and 10000 ms but none of these have worked, This is the code I wrote:
play(soundSequence) {
const buttons =
document.querySelector(".buttons");

    const chordNameTable = {
    "5": " perfect fifth",
    "M7#5sus4": "major seven augmented fifth suspended fourth",
    "7#5sus4": "dominant seven augmented fifth suspended fourth",
    "sus4": "suspended fourth",
    "M7sus4": "major seven suspended fourth",
    "7sus4": "dominant seven suspended fourth",
    "7no5": "dominant seven no fifth",
    "aug": "Augmented",
    "M7b6": "major seven minor sixth",
    "maj7#5": "major seven augmented fifth",
    "7#5": "dominant seven augmented fifth"
      }

      buttons.addEventListener("click", (event) => {
        const sayThis = chordNameTable[event.target.textContent];
        textToSpeech(sayThis, event.target.textContent);
      })
      function textToSpeech(message, chord) {
        const speech = new SpeechSynthesisUtterance();
        speech.lang = "en-US";
        speech.text = message;
        speech.volume = 1;
        speech.rate = 1;
        speech.pitch = 1;
        window.speechSynthesis.speak(speech);
        // When speaking has finished
        speech.onend = function() {
          playChord(chord);
        }
      }

      function playChord(chord) {
        // Wait a second (1000 miliseconds) before playing the chord
        setTimeout(() => {
          // Play the chord here
          console.log("Chord to be played", chord);
        }, 1000);
      }

[mrjacobbloom]

Verify that the whole textToAudio() function is only running once by adding a log line at the top of it. Also maybe print speech.text to verify that the text isn't duplicated for some reason?

[vellebelle]

@sedwardmino DId you see the video and code I sent to Rene yesterday on Discord? That looks like the same code you're posting here. I tried it out in a CodePen and it works fine for me. I also sent him a video explaining how it works, where you can see that the setTimeout runs.. Here it is.

You will have to add the code actually playing the chord where it says or "Play the chord here" or call a function playing the chord from there.

The issue that it repeats is probably because you hit a button multiple times. You could remove the event listener from the button-div at the top of the playChord function, the re-add it inside the setTimeout after the chord has played.

[sedwardmino]

Update: Thank you for all the help, I managed to get everything working the way I wanted the code to work as mentioned. I was just seeking how to be able to call certain chord buttons instead of all the chord buttons like in the video showed using entries to call the whole chord library.
https://youtu.be/5EW5MDrqitc?t=708

[sedwardmino]

The first code (#1) shows the buttons as we want it but does not play any of the chords or say their names. The second code (#2) populates all the chord buttons along with the ones we want played. How would I be able to maintain only the chord buttons I want to be played (the four buttons in the top row which are M, m, dim and aug) and eliminate the other chord buttons (all the buttons that are below row 1) I do not want to see in the UI?

code #1
//In order to run in terminal insert the following code to activate localhost: npx parcel src/index.html
import { chordType, transpose, note } from '@tonaljs/tonal';
import { chord } from '@tonaljs/chord';
import { entries } from '@tonaljs/chord-dictionary';
import { Howler, howl } from 'howler';

const buttons = document.querySelector(".buttons");

const arrayOfChordNames = ["M", "m", "aug", "dim"];

arrayOfChordNames.forEach((chord) => {
let buttonElement = createElement("button", chord);
buttons.appendChild(buttonElement);
});

function createElement(element, content) {
let newElement = document.createElement(element);
newElement.textContent = content;
return newElement;
}

code #2
//The code below is showing all the chord buttons and playing the chord sound and chord names
// we're trying combine the chord from below so that it plays the audio from the chord names and sounds for the four chords above

const sound = new Howl({
src: ['assets/pianosprite.mp3'],
onload() {
console.log('Sound file has been loaded. Do something here!');
soundEngine.init();
},
onloaderror(e, msg) {
console.log('Error', e, msg);
}
});

const startNotes = ['C', 'C#', 'Db', 'D', 'D#', 'Eb', 'E', 'F', 'F#', 'Gb', 'G', 'G#', 'Ab', 'A', 'A#', 'Bb', 'B'];

const startNoteSelector = document.querySelector('#start-note');
const octaveSelector = document.querySelector('#octave');

const intervalsInChord = document.querySelector('.intervals-in-chord');
const notesInChord = document.querySelector('.notes-in-chord');

let selectedStartNote = 'C';
let selectedOctave = '1';
let selectedChord;

const app = {
init() {
this.setupStartNotes();
this.setupOctaves();
this.setupButtons();
this.setupEventListeners();
},
setupStartNotes() {
startNotes.forEach(noteName => {
let noteNameOption = this.createElement('option', noteName);
startNoteSelector.appendChild(noteNameOption);
});
},
setupOctaves() {
for (let i = 1; i <= 6; i++) {
let octaveNumber = this.createElement('option', i);
octaveSelector.appendChild(octaveNumber);
}
},
setupButtons() {
const chordNames = entries().map(entry => {
return entry.aliases[0];
});
chordNames.forEach(chordName => {
let chordButton = this.createElement('button', chordName);
buttons.appendChild(chordButton);
});

},
setupEventListeners() {
    startNoteSelector.addEventListener('change', () => {
        selectedStartNote = startNoteSelector.value;
    });
    octaveSelector.addEventListener('change', () => {
        selectedOctave = octaveSelector.value;
    });
    buttons.addEventListener('click', (event) => {
        if (event.target.classList.contains('buttons')) {
            return;
        }
        selectedChord = event.target.innerText;
        this.displayAndPlayChord(selectedChord, event);
    });
},
displayAndPlayChord(selectedChord, event) {
    let chordIntervals = chord(selectedChord).intervals;
    intervalsInChord.innerText = chordIntervals.join(' - ');
    
    const startNoteWithOctave = selectedStartNote + selectedOctave;
    let chordNotes = chordIntervals.map(val => {
        return transpose(startNoteWithOctave, val);
    });
    notesInChord.innerText = chordNotes.join(' - ');
    soundEngine.play(chordNotes, event);
},
createElement(elementName, content) {
    let element = document.createElement(elementName);
    element.innerHTML = content;
    return element;
}

}

const soundEngine = {
init() {
const lengthOfNote = 2400;
let timeIndex = 0;
for (let i = 24; i <= 96; i++) {
sound['_sprite'][i] = [timeIndex, lengthOfNote];
timeIndex += lengthOfNote;
}

},

play(soundSequence, event) {
    const buttons =
    document.querySelector(".buttons");

    const chordNameTable = {
    "M": "Major",
    "m": "Minor",
    "dim": "diminished",
    "aug": "Augmented"

      }

      buttons.addEventListener("click", (event) => {
        
      })
      function textToSpeech(message, chord) {
        const speech = new SpeechSynthesisUtterance();
        speech.lang = "en-US";
        speech.text = message;
        speech.volume = 1;
        speech.rate = 1;
        speech.pitch = 1;
        window.speechSynthesis.speak(speech);
        // When speaking has finished
        speech.onend = function() {
          playChord(chord);
        }
      }
      
      function playChord(chord) {
        // Wait a second (1000 miliseconds) before playing the chord
        setTimeout(() => {
            const chordMidiNumbers = soundSequence.map(noteName => {
                return note(noteName).midi;
            });
            sound.volume(0.05);
            chordMidiNumbers.forEach(noteMidiNumber => {
                
                sound.play(noteMidiNumber.toString());
            });
          console.log("Chord to be played", chord);
        }, 500);
      }
      const sayThis = chordNameTable[event.target.textContent];
        textToSpeech(sayThis, event.target.textContent);
}

}

app.init();

const allChordNames = entries()
chordEntries.map(entry => {
return entry.aliases[0];
})
console.log(Array.isArray (allChordNames));