本文由Chris Perry ， Michaela Lehr和Matt Burnett进行了同行评审。 感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态！

HTML5音频播放器带来了一些新颖而令人兴奋的可能性，尤其是在与音乐相关的Web应用程序方面。 我希望通过逐步介绍我如何创建此果酱站来向您介绍这些可能性。 该项目最初是作为实验开始的，但随着时间的流逝，它逐渐发展成为面向吉他手的开放式练习和教学工具。

要深入学习本教程，必须对Java语言的基础有深入的了解。

本着保持简洁的精神，我们将构建一个稍微简单的版本。 这正是我们今天要做的。

请参阅CodePen上SitePoint （ @SitePoint ）的Pen Jam Station 。

如果您对完全重新创建本教程不是特别感兴趣，那么可以。 我在本教程中介绍的大部分内容都适用于不同类型的音乐应用程序。

对音乐理论的基本了解将有助于您学习本教程。 必须了解时间签名，量度和节拍。

您将需要什么

您选择的音轨将需要记录到点击音轨或节拍器中。 换句话说，每个节拍的长度将需要在整个轨道上保持一致。

为了找到当前的节拍和小节，您需要了解一些有关音轨的信息。

• 每分钟节拍数（BPM或节奏）
• 时间签名
• 轨道开始的时间
• 使用多少个度量值（并不总是适用）

您可以使用音轨 ，我在CodePen演示（右键点击保存），如果你愿意的话。

这是该曲目的相关数据。

• BPM = 117
• 时间签名= 4/4
• 第一拍的开始时间= 0.2s
• 用于计数的度量= 1

如果您正在使用自己的音轨，但是不确定其中的某些细节，那么免费音频编辑器（如Audacity）应该会有所帮助。 它无法告诉您所有信息，但是您将能够找到第一个节拍的确切开始时间。 如果您要录制自己的曲目，最好一开始就记下此信息。

标记和CSS

在介绍有趣的东西之前，我们将使用这里的HTML和CSS。

 <div class="wrapper">
   <div id="chord-diagram"></div>
   <audio id="jam-track"  src="https://myguitarpal.com/wp-content/uploads/2014/09/12-Bar-Blues-in-A-Version-1.mp3" controls></audio>
  <br>

  <label>Beat: </label>
  <div class="data" id="beat"></div>

  <label>Measure: </label>
  <div class="data" id="measure"></div>

  <label>Section: </label>
  <div class="data" id="section"></div>

  <label>Chord: </label>
  <div class="data" id="chord"></div>

  <div id="chord-progression"></div>
</div>

.wrapper {
  max-width: 400px;
}

#chord-progression {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid lightgray;
}

.section {
  margin-bottom: 20px;
  display: none;
}

.measure {
  width: 25%;
  display: inline-block;
}

.m-line {
  float: right;
  width: 10px;
}

audio {
  width: 100%;
}

.data {
  display: inline;
  margin-right: 10px;
}

label {
  font-weight: bold;
}

设置变量

首先，我们将获取我们讨论的所有跟踪数据并设置一些变量。

// beats per minute
var BPM = 117;

// beats per second
var BPS = 60 / BPM;

// measures used for count in
var measuresCount = 1;

// time the track starts
var offsetSeconds = 0.2;

// time signature
var timeSigTop = 4;
var timeSigBottom = 4;

和弦进行

在本教程中，我使和弦进行数据模型非常简单，并使用了多维数组。

顶层阵列是和弦进行部分。 这些可能是经文，合唱，桥梁等。

嵌套数组在其各自的节中包含每个小节的和弦。

var sectionOne = ['A7', 'A7', 'A7', 'A7', 'D7', 'D7', 'A7', 'A7', 'E7', 'D7', 'A7', 'E7'];
var sectionTwo = ['A7', 'A7', 'A7', 'A7', 'D7', 'D7', 'A7', 'A7', 'E7', 'D7', 'A7', 'A7', 'A7', 'A7', 'A7', 'A7', 'A7', 'A7'];

var chordProgression = [
  sectionOne,
  sectionOne,
  sectionOne,
  sectionTwo
];

音乐通常会重复某些部分，例如合唱，因此为了使内容保持干燥，将上面显示的每个部分存储在变量中，然后将这些部分包括在chordProgression数组中。

运行果酱站

该卡纸站使用timeupdate事件，类似于使用游戏循环。 每次timeupdate事件触发时（在播放曲目时每秒发生几次），我们将运行一个函数并更新一些数据，例如当前节拍，小节和和弦。 唯一的数据将不会更新是在曲目暂停时。

当timeupdate事件触发时，我们将运行jamStation函数。 播放音频时，每秒将调用该功能几次。

var audio = document.getElementById('jam-track');

audio.ontimeupdate = function() {
  jamStation();
};

有趣的部分

此功能应仅处理数据，而不是表示。 稍后我们将使用另一个函数（ renderJamStation ）来处理演示文稿。

要找到当前节拍，我们将使用表达式(audio.currentTime - offsetSeconds + BPS) / BPS ，并将此值存储在变量beat 。

然后，我们可以使用表达式(beat - 1) / timeSigTop查找当前度量，并将其存储在变量measure 。

function jamStation() {
  var beat = (audio.currentTime - offsetSeconds + BPS) / BPS; 
  var measure = (beat - 1) / timeSigTop;
}

beat和measure变量现在应四舍五入。 在进行比较时，这将使我们更容易使用数字。 但是，如果您要制作一个更复杂的应用程序，而您需要使用节奏的一部分，那么我不建议您这样做。

我们将这些整数存储在cleanBeat和cleanMeasure 。

如果要显示小节中的当前节拍，则可以使用以下表达式： ((cleanBeat - 1) % timeSigTop) + 1 。 假设我们在节拍器13上。表达式值将是： ((13 - 1) % 4) + 1 。 我们之所以加上1，是因为没有拍子0这样的东西。

现在，代替无限增加节拍，它只会增加与拍号顶部的数字一样高的数字。 measureBeat将包含小节中拍子的值。 因此， cleanMeasure将计数1,2,3,4,5,6,7,8， measureBeat ，而measureBeat将计数1,2,3,4,1,2,3,4等。

function jamStation() {
  var beat = (audio.currentTime - offsetSeconds + BPS) / BPS; 
  var measure = (beat - 1) / timeSigTop;

  // round down for beat and measure
  var cleanBeat = Math.floor(beat);
  cleanMeasure = Math.floor(measure);

  // find the current beat within the measure
  measureBeat = ((cleanBeat - 1) % timeSigTop) + 1;
}

不要将var放在cleanMeasure前面，因为我们已经在函数外部声明了此变量（请参见CodePen ），因为我们想从jamStation()外部访问此值。

至此，我们实际上已经有了所需的最重要的数据。 但是，棘手的部分将用于处理和弦进行。

jamStation函数的下一部分用于确定两件事： currentSection和currentChord 。

首先，我们需要使用if ... else语句来测试是否通过了第一个度量。 如果是，我们将找到当前部分和当前和弦的值。 如果不是，那么currentSection和currentChord将设置为null。

要找到当前部分和当前和弦，我们遍历各个部分，然后运行一个嵌套循环，遍历每个部分中的小节。

每次我们对每个部分进行度量时，都会设置变量count并将其递增1。 现在，如果cleanMeasure等于count ，我们知道我们已经找到了该部分并进行测量。 因为我们找到了正确的部分并测量了音轨当前所在的位置，所以我们需要存储这些值，并且需要中断两个循环，以便下次循环运行时正确的数据不会被覆盖。

同样，不要在currentSection或currentChord前面使用var ，因为这些变量已经在jamStation()外部声明，因此我们可以在函数之间共享它们。

function jamStation() {
  var beat = (audio.currentTime - offsetSeconds + BPS) / BPS; 
  var measure = (beat - 1) / timeSigTop;

  // round down for beat and measure
  var cleanBeat = Math.floor(beat);
  cleanMeasure = Math.floor(measure);

  // find the current beat within the measure
  measureBeat = ((cleanBeat - 1) % timeSigTop) + 1;

  if (cleanMeasure > 0) {
    // find the currentSection and currentChord
    var count = 0;
    var br = false;
      for (var s = 0; s < chordProgression.length; s++) {
        for (var m = 0; m < chordProgression[s].length; m++) {
          count++;
          if (cleanMeasure == count) {
            currentSection = s + 1;
            currentChord = chordProgression[s][m];
            br = true;
            break;
          }
        }
        if (br === true) {
          break;
        }
      }
  } else {
    currentSection = null;
    currentChord = null;
  }

  // display the jam station and its data
  renderJamStation();
}

现在，我们有了所需的所有数据，并且可以全局访问这些数据。

在jamStation函数的末尾，您可以看到renderJamStation()已运行。 此功能仅用于演示目的，我们将在稍后介绍。

渲染和弦进行

我们需要显示和弦进程。 让我们将其包装在一个名为renderChordProgression的函数中，以使事情保持整洁。 该功能仅会运行一次，因为永远不会更新和弦进行数据。

首先，我们遍历和弦进行中的各个部分。 每次循环时，我们都创建一个div，其类别为“ section”，id为“ section- [number]”。 每个部分都有一个唯一的ID，因此我们可以在播放时显示该特定部分。

// 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>';
  }
}

接下来，我们再次循环遍历各个部分，以便随后可以在嵌套循环中遍历所有度量。 然后，每个度量都将包含在其各自的部分中。

您可能会注意到count变量已设置并递增。 这样做是为了增加每个部分中的每个度量。

完整的功能如下所示：

// 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>';
    }
  }
}

您可能需要设置和弦进行的样式。 您可以在本文顶部的CodePen中引用CSS。

介绍

从函数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';
}

您可以看到每个部分都首先被隐藏。 如果不这样做，每个部分将在准备就绪时显示，但未播放的部分仍将可见。

为了显示当前正在播放的部分，我们通过其ID选择它，并将其显示属性设置回block。

如果currentSection为null，则显示第一部分。 如果我们不这样做，则在播放曲目并到达该部分应该可见的时间点之前，第一部分将不可见。

渲染初始显示

最后，我们运行两个函数。 renderChordProgression()需要运行一次才能渲染和弦进行，而jamStation()也应运行一次。 是的，无论何时触发timeupdate都会运行jamStation()函数，但也应单独运行一次，否则，首先不会渲染和弦进行。

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 + '"/>';
  }
}

结论

也许您不想完全构建我今天所介绍的内容，那就可以了。 我可以想到很多方法可以将本文中介绍的内容应用于所有不同类型的项目。 这里有一些想法：

• 画廊或滑块的新面貌。 在某些节拍或小节上过渡图像。
• 对图像进行动画处理。 拍脚？ 有人跳舞的姿势？
• 音频可视化。
• 用于教学目的的注释或图表已与音乐同步。
• 使用这种令人惊叹的开源JavaScript音乐符号API ，您可以做各种事情

感谢您的阅读，希望您能学到一两件事。 如果本教程为您提供了一些很棒的构想，请在评论中告诉我！

From: https://www.sitepoint.com/music-jam-station/