Question

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

＆＃13;

   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.

＆＃13;

正如您所看到的，此代码似乎过于重复！试图清理＆＃39;代码，我已经尝试了for()循环，虽然我只知道了一半，然后才意识到我这样做的方式会让一首歌（以变量的形式）玩不可能。我也尝试过以下方面：

＆＃13;

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

＆＃13;

这没有用。。。而且我看得越多，认为自己的工作似乎有点愚蠢。但是，嘿，至少我可以说我试过了（尽管你可能无法在变量中自行保存document.getElementById）。

Answer 1

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

在页面加载时，您可以调用函数来检索当前小时和该小时的相应歌曲URL，将单数src元素的<audio>属性设置为该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中避免重复代码？

1 个答案: