基于HTML+CSS实现五线谱走谱功能方案详解

闲谈

2023-11-14 16:32:38

五线谱走谱：轻松掌握乐谱的艺术

五线谱：音乐的画布

音乐是灵魂的语言，而五线谱则是音乐家表达自我的画布。五线谱由五条平行线和四个间隙组成，每个音符都精准地放置在这些线上或间隙中，以表示不同的音高和音长。

基础乐理知识：理解音符的语言

大谱表： 想象一个高低音音域相交的乐谱，这就是大谱表。它由高音谱号和低音谱号组合而成，可以表示从低音C到高音C的所有音符。

谱号： 谱号是写在五线谱顶部的符号，它告诉我们每条线和间隙所代表的音高。最常用的谱号是高音谱号、低音谱号和中音谱号。

音符： 音符是五线谱上的符号，表示乐曲中的一个音。它们有不同的形状、时值和音高，例如全音符、二分音符和四分音符。

休止符： 休止符表示乐曲中的一个休止，它们也有不同的形状和时值。

连音符和附点音符： 连音符将两个音符连接起来演奏，而附点音符延长了音符的时值。

三连音和琶音： 三连音是三个音符以平均速度连在一起演奏，而琶音是音符按照音高的顺序依次弹奏或唱出。

HTML+CSS实现五线谱走谱

HTML结构：

<div class="谱号">
  <div class="高音谱号"></div>
  <div class="低音谱号"></div>
</div>
<div class="五线谱">
  <div class="第一线"></div>
  <div class="第二线"></div>
  <div class="第三线"></div>
  <div class="第四线"></div>
  <div class="第五线"></div>
</div>
<div class="音符">
  <div class="全音符"></div>
  <div class="二分音符"></div>
  <div class="四分音符"></div>
  <div class="八分音符"></div>
  <div class="十六分音符"></div>
</div>

CSS样式：

.谱号 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.高音谱号 {
  width: 50px;
  height: 50px;
  border: 1px solid black;
}

.低音谱号 {
  width: 50px;
  height: 50px;
  border: 1px solid black;
}

.五线谱 {
  width: 100px;
  height: 200px;
  border: 1px solid black;
}

.第一线 {
  width: 100px;
  height: 20px;
  border: 1px solid black;
}

.第二线 {
  width: 100px;
  height: 20px;
  border: 1px solid black;
}

.第三线 {
  width: 100px;
  height: 20px;
  border: 1px solid black;
}

.第四线 {
  width: 100px;
  height: 20px;
  border: 1px solid black;
}

.第五线 {
  width: 100px;
  height: 20px;
  border: 1px solid black;
}

.音符 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.全音符 {
  width: 50px;
  height: 50px;
  border: 1px solid black;
}

.二分音符 {
  width: 25px;
  height: 25px;
  border: 1px solid black;
}

.四分音符 {
  width: 12px;
  height: 12px;
  border: 1px solid black;
}

.八分音符 {
  width: 6px;
  height: 6px;
  border: 1px solid black;
}

.十六分音符 {
  width: 3px;
  height: 3px;
  border: 1px solid black;
}

JavaScript代码：

function init() {
  // 获取五线谱的DOM元素
  var谱号 = document.querySelector('.谱号');
  var五线谱 = document.querySelector('.五线谱');
  var音符 = document.querySelector('.音符');

  // 创建谱号
  var高音谱号 = document.createElement('div');
  高音谱号.className = '高音谱号';
  谱号.appendChild(高音谱号);

  var低音谱号 = document.createElement('div');
  低音谱号.className = '低音谱号';
  谱号.appendChild(低音谱号);

  // 创建五线谱
  for (var i = 0; i < 5; i++) {
    var線條 = document.createElement('div');
    線條.className = '線條';
    五线谱.appendChild(線條);
  }

  // 创建音符
  var全音符 = document.createElement('div');
  全音符.className = '全音符';
  音符.appendChild(全音符);

  var二分音符 = document.createElement('div');
  二分音符.className = '二分音符';
  音符.appendChild(二分音符);

  var四分音符 = document.createElement('div');
  四分音符.className = '四分音符';
  音符.appendChild(四分音符);

  var八分音符 = document.createElement('div');
  八分音符.className = '八分音符';
  音符.appendChild(八分音符);

  var十六分音符 = document.createElement('div');
  十六分音符.className = '十六分音符';
  音符.appendChild(十六分音符);
}

window.onload = init;