Создайте Music Jam Station с помощью Vanilla JavaScript

Полная функция выглядит так:

 // take the chordProgression array and render the HTML function renderChordProgression(){ var progression = document.getElementById('chord-progression'); // make the sections for (var s = 0; s < chordProgression.length; s++){ progression.innerHTML += '<div class="section" id="section-' + (s + 1) + '"></div>'; } var count = 0; for (var s = 0; s < chordProgression.length; s++) { for (var m = 0; m < chordProgression[s].length; m++) { count++; var section = document.getElementById('section-' + (s + 1)); section.innerHTML += '<div class="measure" id="measure-' + count + '">' + chordProgression[s][m] + '<div class="m-line">|</div></div>'; } } } 

Возможно, вы захотите стилизовать последовательность аккордов. Вы можете ссылаться на CSS в CodePen в верхней части этого поста.

презентация

Функция renderJamStation вызывается из функции jamStation .

 function renderJamStation() { // show the beat within the measure, not overall document.getElementById('beat').innerHTML = measureBeat; // show the current measure, but only if the jam track is past the count in measures var measureElem = document.getElementById('measure'); // only show the current measure if it's > 0 if (cleanMeasure > 0) { measureElem.innerHTML = cleanMeasure; } else { measureElem.innerHTML = ''; } // show the section number document.getElementById('section').innerHTML = currentSection; // show the current chord name document.getElementById('chord').innerHTML = currentChord; // hide all sections before displaying only the section we want to see var allSections = document.getElementsByClassName('section'); for (var i = 0; i < allSections.length; i++) { allSections[i].style.display = 'none'; } // show the currently playing section if (currentSection != null) { document.getElementById('section-' + currentSection).style.display = 'block'; } else { allSections[0].style.display = 'block'; } // style the current chord in the chord progression if (cleanMeasure > 0) { // style all measures black var measures = document.getElementsByClassName('measure'); for (var i = 0; i < measures.length; i++) { measures[i].style.color = 'black'; } // style current measure red document.getElementById('measure-' + cleanMeasure).style.color = 'red'; } } 

Я не буду описывать каждую часть этой функции, поскольку большая ее часть не требует пояснений, если вы знакомы с JavaScript. По большей части он берет некоторые данные, такие как текущий аккорд и текущий такт, и отображает их.

Основная часть этой функции, которую вы должны внимательно изучить, — это то, как она отображает правильный раздел.

 // hide all sections before displaying only the section we want to see var allSections = document.getElementsByClassName('section'); for (var i = 0; i < allSections.length; i++) { allSections[i].style.display = 'none'; } // show the currently playing section if (currentSection != null) { document.getElementById('section-' + currentSection).style.display = 'block'; } else { allSections[0].style.display = 'block'; } 

Вы можете видеть, что каждый раздел сначала скрыт. Если этого не сделать, каждый раздел появится, когда придет время, но разделы, которые не воспроизводятся, все равно будут видны.

Чтобы отобразить текущий воспроизводимый раздел, мы выбираем его по его идентификатору и возвращаем свойство display обратно в block.

Если currentSection равен нулю, мы показываем первый раздел. Если мы этого не сделаем, первый раздел не будет виден до воспроизведения трека и достижения момента времени, когда этот раздел должен быть виден.

Визуализация начального отображения

Наконец, мы запускаем две функции. renderChordProgression() необходимо запустить один раз, чтобы отобразить последовательность аккордов, а jamStation() нужно запустить один раз. Да, функция jamStation() будет запускаться всякий раз, когда срабатывает timeupdate , но ее также следует запускать один раз самостоятельно, иначе последовательность аккордов не будет отображаться сначала.

 renderChordProgression(); jamStation(); 

Дальнейшие мысли и идеи

Если вы заинтересованы в отображении диаграмм аккордов для инструмента, у вас есть много нужных вам данных, наиболее важно название и тип аккорда.

Допустим, вы хотели отобразить изображения диаграммы аккордов, когда последовательность аккордов была на соответствующем аккорде. У нас уже есть текущий аккорд, хранящийся в переменной currentChord .

Вы можете создать массив объектов аккордов.

 var chords = [ { name: 'A', type: '7', src: '/images/a7.jpg', }, { name: 'D', type: '7', src: '/images/d7.jpg', }, { name: 'E', type: '7', src: '/images/e7.jpg', } ]; 

Затем запустите эту логику внутри функции jamStation которая покажет правильный аккорд в нужное время.

 for (var i = 0; i < chords.length; i++) { if (chords[i].name + chords[i].type == currentChord) { document.getElementById('chord-diagram').innerHTML = '<img src="' + chords[i].src + '"/>'; } } 

Вывод

Может быть, вы не хотите строить именно то, что я освещал сегодня, и это нормально. Я могу придумать, как можно применить то, что я рассмотрел в этой статье, ко всем различным типам проектов. Вот несколько идей:

• Новый взгляд на галереи или слайдеры. Переход изображения на определенные удары или меры.
• Анимировать изображения в такт. Постукивая ногами? Позы кого-то танцуют?
• Аудио визуализации.
• Аннотации или диаграммы, используемые в учебных целях, которые синхронизированы с музыкальным произведением.
• С этим удивительным API нотной нотации с открытым исходным кодом JavaScript вы можете делать множество разных вещей.

Спасибо за чтение, и я надеюсь, что вы узнали кое-что. Если этот урок дал вам идею для чего-то классного, дайте мне знать в комментариях!