避免 Javascript 中的重复代码？

Question

这次我正在从事一个涉及每小时播放音乐的项目，在 html 页面上播放整整一个小时。事情是。 . .每小时播放一首不同的歌曲。是的。这意味着我的 html 中有 24 个不同的 <audio> 标签（我对此很好，假设没有办法使用更少的代码。）。现在，事情变得棘手的部分是 JavaScript。这是我的代码，可以让每首歌每小时播放一次。

   var curHour = new Date().getHours(); //finds the current hour
   //grabs the music
  var music1 = document.getElementById('music1');
 var music2 = document.getElementById('music2');
 var music3 = document.getElementById('music3');
 var music4 = document.getElementById('music4');
 var music5 = document.getElementById('music5');
 var music6 = document.getElementById('music6');
 var music7 = document.getElementById('music7');
 var music8 = document.getElementById('music8');
 var music9 = document.getElementById('music9');
 var music10 = document.getElementById('music10');
 var music11 = document.getElementById('music11');
 var music12 = document.getElementById('music12');
 //etc. etc. etc.

  //tells the music when to play
 if (curHour === 1) { 
  music1.play(); 
 }
 else if (curHour === 2) {
  music2.play();
 }
 else if (curHour === 3) {
  music3.play();
 }
//etc. etc. etc.

如您所见，这段代码似乎太重复了！在尝试 'clean up' 代码时，我尝试了 for() 循环，尽管我只完成了一半就意识到我这样做的方式会讲一首歌（以形式一个变量）玩不可能。我也尝试了一些类似的东西：

var grab = document.getElementById;
var hourMusic = [grab('music1'), grab('music2')];
if (curHour === 10) {
  hourMusic[0].play()
  }
else {
  hourMusic[1].play()
  }

这没有用。 . .而且我看得越多，我认为这会起作用似乎有点愚蠢。但是，嘿，至少我可以说我试过了（即使你可能无法在变量中单独保存 document.getElementById）。

Answer 1

我建议您只创建一个 <audio> 元素并覆盖其 src 属性来更改歌曲，而不是为一天中的每个小时创建一个 <audio> 元素。

在页面加载时，您可以调用一个函数来检索当前小时和该小时的相应歌曲 URL，将单数 <audio> 元素的 src 属性设置为URL，播放吧。也可以在播放结束时使用onended事件调用该函数实现循环播放，另外还可以在整点换歌。

// note: I was lazy and just repeated 3 URLs 8 times
var songDir = 'http://www.stephaniequinn.com/Music/';
var songURLs = [
    songDir+'Commercial%20DEMO%20-%2001.mp3',
    songDir+'Commercial%20DEMO%20-%2002.mp3',
    songDir+'Bach%20-%20Jesu,%20Joy%20of%20Man\'s%20Desiring.mp3',
    songDir+'Commercial%20DEMO%20-%2001.mp3',
    songDir+'Commercial%20DEMO%20-%2002.mp3',
    songDir+'Bach%20-%20Jesu,%20Joy%20of%20Man\'s%20Desiring.mp3',
    songDir+'Commercial%20DEMO%20-%2001.mp3',
    songDir+'Commercial%20DEMO%20-%2002.mp3',
    songDir+'Bach%20-%20Jesu,%20Joy%20of%20Man\'s%20Desiring.mp3',
    songDir+'Commercial%20DEMO%20-%2001.mp3',
    songDir+'Commercial%20DEMO%20-%2002.mp3',
    songDir+'Bach%20-%20Jesu,%20Joy%20of%20Man\'s%20Desiring.mp3',
    songDir+'Commercial%20DEMO%20-%2001.mp3',
    songDir+'Commercial%20DEMO%20-%2002.mp3',
    songDir+'Bach%20-%20Jesu,%20Joy%20of%20Man\'s%20Desiring.mp3',
    songDir+'Commercial%20DEMO%20-%2001.mp3',
    songDir+'Commercial%20DEMO%20-%2002.mp3',
    songDir+'Bach%20-%20Jesu,%20Joy%20of%20Man\'s%20Desiring.mp3',
    songDir+'Commercial%20DEMO%20-%2001.mp3',
    songDir+'Commercial%20DEMO%20-%2002.mp3',
    songDir+'Bach%20-%20Jesu,%20Joy%20of%20Man\'s%20Desiring.mp3',
    songDir+'Commercial%20DEMO%20-%2001.mp3',
    songDir+'Commercial%20DEMO%20-%2002.mp3',
    songDir+'Bach%20-%20Jesu,%20Joy%20of%20Man\'s%20Desiring.mp3',
];

window.playSongByHour = function(hour) {
    let audioElem = document.getElementById('audio1');
    audioElem.setAttribute('src',songURLs[hour]); // hour must be in 0:23
    audioElem.play();
}; // end function()
window.playSongByCurrentHour = function() { playSongByHour(new Date().getHours()); };

<body onload="playSongByCurrentHour();">
    <audio id="audio1" controls="1" onended="playSongByCurrentHour();"/>
</body>

避免 Javascript 中的重复代码？

Avoiding Repetitive Code in Javascript?

html

javascript

css

html5-audio