2016-08-01 11 views
2

今回は、毎時間、毎時間、htmlページで音楽を再生するプロジェクトに取り組んでいます。事はです。 。毎時間別の曲が再生されます。うんつまり、自分のHTMLに24種類の<audio>タグがあることを意味します(コードを少なくする方法がないと仮定しても問題ありません)。さて、物事が面倒な部分は、JavaScriptにあります。ここで私のコードは毎回各曲を再生させることです。Javascriptで繰り返しコードを避ける?

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

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

あなたが見ることができるように、このコードはあまりにも繰り返しそうです! コードをクリーンアップしようとすると、私はfor()ループを試しましたが、私がやっていたやり方が曲を(変数の形で)伝えることを理解する前に、不可能な遊び。

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

これは動作しませんでした: は、私はまたの線に沿って何かをしようとしました。 。 。私はそれを見ると、それがうまくいくと思うような私のほんの少しばかばかしいように思えます。しかし、ちょっと、少なくとも私は試みたと言うことができます(おそらくdocument.getElementByIdを変数に保存することはできませんが)。

+1

ヒント: 'のdocument.getElementById( "音楽" + curHour).play()'。 – Xufox

+1

ヒント: 'var music = new Array(12); – Tibrogargan

+1

最後のコードの短いブロックに関して、それは動作しません。なぜなら、Xufoxは配列をまったく必要としないことを意味するからです。 'grab'機能の一部です。もしそれを 'var grab = document.getElementById.bind(document);'に変更した場合や 'document.getElementById()'を直接使用した場合は正しく動作するはずです。しかし、その機能へのショートカットを使用するかどうかは、あなたがここで実装しようとしているところから気をそらすだけです。 – nnnnnn

答えて

2

<audio>要素を1つ作成し、1時間ごとに<audio>要素を作成するのではなく、src属性を上書きして曲を変更することをお勧めします。

ページロード時に、その時間の現在の時間と対応する曲のURLを取得する関数を呼び出し、<audio>要素のsrc属性をそのURLに設定して再生することができます。ループ再生を実装するためにonendedイベントを使用して再生が終了したときに関数を呼び出すこともできますし、さらに1時間ごとにソングを変更することもできます。

// 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>

+2

ありがとうございます。 。 。これはまた非常に良い解決策であるようです! –

関連する問題