飞码网-免费源码博客分享网站

点击这里给我发消息

用Vanilla JavaScript创建一个音乐果酱站|-JavaScript教程

飞码网-免费源码博客分享网站 爱上飞码网—https://www.codefrees.com— 飞码网-matlab-python-C++ 爱上飞码网—https://www.codefrees.com— 飞码网-免费源码博客分享网站

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

要完全理解Java的基础知识,对于学习本教程是必要的。

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

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

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

您将需要什么

您选择的音轨将需要记录到点击音轨或节拍器中。换句话说,每个节拍的长度在整个轨道上都必须是统一的。

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

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

如果需要,可以使用我在CodePen演示中使用的音轨(单击鼠标右键保存)。

这是该曲目的相关数据。

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

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

标记和CSS

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

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

  <label>Beat: </label>
  <div  ></div>

  <label>Measure: </label>
  <div  ></div>

  <label>Section: </label>
  <div  ></div>

  <label>Chord: </label>
  <div  ></div>

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

beatmeasure变量现在应该舍去。当我们进行比较时,这将使我们更容易使用数字。但是,如果您要开发一个更复杂的应用程序,而您需要使用节奏的一部分,那么我不建议您这样做。

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

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

现在,而不是使拍子无限增加,它只会增加与拍号顶部的数字一样高的拍子。measureBeat将包含小节中拍子的值。因此,cleanMeasure将计数1,2,3,4,5,6,7,8等,而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函数的下一部分用于确定两件事:currentSectioncurrentChord

首先,我们需要使用if ... else语句来测试是否通过了第一个度量。如果是的话,我们将找到当前部分和当前和弦的值。如果我们都没有,currentSection而且currentChord会被设置为null。

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

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

请勿varcurrentSection或之前使用currentChord,因为这些变量已在外部声明,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  ></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  ></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  >' 
                        + chordProgression[s][m] 
                        + '<div >|</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()应该运行一次。是的,该功能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 + '"/>';
  }
}

结论

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

  • 画廊或滑盖的新面貌。在某些节拍或小节上过渡图像。
  • 对图像进行动画处理。拍脚吗?有人跳舞的姿势?
  • 音频可视化。
  • 用于教学目的的注释或图表已与音乐同步。
  • 您可以使用这种令人惊叹的开源JavaScript音乐符号API进行各种操作
飞码网-免费源码博客分享网站 爱上飞码网—https://www.codefrees.com— 飞码网-matlab-python-C++ 爱上飞码网—https://www.codefrees.com— 飞码网-免费源码博客分享网站
赞 ()

相关推荐

内容页底部广告位3
留言与评论(共有 0 条评论)
   
验证码: