"Error null Decoding audio data failed." Was just working and now I get an error

[sedwardmino]

The chord library I have been able to replicate was working fine up until yesterday. The code displays the chords I want the code to display and even say the chord names but the code will not play the chords now but instead give me an error in my console "Error null Decoding audio data failed." I have tried many ways to move around certain code even go back to the original code before changes were made to see if the code would run but now the chord buttons are not playing the chords. Is there any way to fix the error I am getting in the console?

For reference and to see the whole code heres this link below:
https://stackoverflow.com/questions/70512748/error-null-decoding-audio-data-failed-was-just-working-and-now-i-get-an-error

[mrjacobbloom]

It sounds like something is wrong with the audio file. Either it's corrupted, or your browser can't find it. Switch to the Network tab of the developer tools and reload the page. Do you see any failed requests? (in Chrome they're in red)

[sedwardmino]

Yes, I was able to get down to the core of the problem. When I had uploaded all the files to the github repo I didn't upload the mp3 file so the file was not being read and was fixed as soon as i moved it into the correct folder.

I do have another question, I am working on incorporating arpeggios into the chord library but I am having trouble doing that. I believe the change that needs to happen is in the portion of the displayAndPlayChordIntervals where let chordIntervals unites the notes into playing those notes as one chord. When I try to separate them it makes no changes and I am not sure on how to go with the code to have the chord buttons play as an arpeggio rather than a chord.
Is the change to the displayAndPlayChord idea correct or should I be looking at another portion of the code?

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

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 buttons = document.querySelector(".buttons");

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 = ["maj7", "m7", "dim7", "maj7#5"];
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 = {
    "maj7": "major seventh",
    "m7": "minor seventh",
    "dim7": "diminished seventh",
    "maj7#5": "Augmented seventh"

      }

      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));`

It sounds like something is wrong with the audio file. Either it's corrupted, or your browser can't find it. Switch to the Network tab of the developer tools and reload the page. Do you see any failed requests? (in Chrome they're in red)

[mrjacobbloom]

The trick is to have a different setTimeout for each note in playChord:

    function playChord() {
      const chordMidiNumbers = soundSequence.map(noteName => {
        return note(noteName).midi;
      });
      // Wait half a second (500 ms), and then play each note of the chord 500 ms apart
      chordMidiNumbers.forEach((noteMidiNumber, index) => {
        setTimeout(() => {
          sound.volume(0.05);
          sound.play(noteMidiNumber.toString());
        }, 500 + (500 * index));
      });
    }

Note that setTimeout isn't actually super precise. It's probably not noticeable for the 3-5 notes you'll be playing here, but if you get to playing more complex music then you'll want to switch to a more precise timer method.