dancing clock

“言い訳”と“お断り”
このページでは、JavaScript「ダンシング・クロック」の説明をしています。
「自分の好きなMP3データで時報を実装するJavaScript」です。
ただし、スクリプトを書いた本人(管理人)は、JavaScriptについては、ほぼ初心者であります。
拙い知識と理解、そしてグーグル大先生の力を総動員しまして、ようやく書き上げたものです。
従って、その方面に強い方は、積極的に改変して下さって結構です。
このスクリプトでは、“時報”として、一時間に一回、MP3データの音源が再生されます。
HMTL5の <audio> タグを使い、毎回違う音源が再生されます。
まず、今現在実際に使っているスクリプトは、こんな感じ。
function clocks(){

// 設定開始
var msg1 = '<audio width="1" height="1" src="clock/am7.mp3" autoplay>'; // 時間帯1
var msg2 = '<audio width="1" height="1" src="clock/am8.mp3" autoplay>'; // 時間帯2
var msg3 = '<audio width="1" height="1" src="clock/am9.mp3" autoplay>'; // 時間帯3
var msg4 = '<audio width="1" height="1" src="clock/am11.mp3" autoplay>'; // 時間帯4
var msg5 = '<audio width="1" height="1" src="clock/pm1.mp3" autoplay>'; // 時間帯5
var msg6 = '<audio width="1" height="1" src="clock/pm2.mp3" autoplay>'; // 時間帯6
var msg7 = '<audio width="1" height="1" src="clock/pm3.mp3" autoplay>'; // 時間帯7
var msg8 = '<audio width="1" height="1" src="clock/pm5.mp3" autoplay>'; // 時間帯8
var msg9 = '<audio width="1" height="1" src="clock/pm7.mp3" autoplay>'; // 時間帯9
var msg10 = '<audio width="1" height="1" src="clock/pm8.mp3" autoplay>'; // 時間帯10
var msg11 = '<audio width="1" height="1" src="clock/pm9.mp3" autoplay>'; // 時間帯11
var msg12 = '<audio width="1" height="1" src="clock/pm10.mp3" autoplay>'; // 時間帯12
var msg13 = '<audio width="1" height="1" src="clock/pm11.mp3" autoplay>'; // 時間帯13
var msg14 = '<audio width="1" height="1" src="clock/midnight0.mp3" autoplay>'; // 時間帯14
var msg15 = '<audio width="1" height="1" src="clock/midnight1.mp3" autoplay>'; // 時間帯15
var msg16 = '<audio width="1" height="1" src="clock/midnight2.mp3" autoplay>'; // 時間帯16
var msg17 = '<audio width="1" height="1" src="clock/midnight3.mp3" autoplay>'; // 時間帯17
// 設定終了

var now = new Date();

var hour = now.getHours(); // 時
var min = now.getMinutes(); // 分

// 時間帯1
if(hour == 7 && min == 0)}
document.write(msg1);
}
// 時間帯2
else if(hour == 8 && min == 0)}
document.write(msg2);
}
// 時間帯3
else if(hour == 9 && min == 0)}
document.write(msg3);
}
// 時間帯4
else if(hour == 11 && min == 0)}
document.write(msg4);
}
// 時間帯5
else if(hour == 13 && min == 0)}
document.write(msg5);
}
// 時間帯6
else if(hour == 14 && min == 0)}
document.write(msg6);
} // 時間帯7
else if(hour == 15 && min == 0)}
document.write(msg7);
}
// 時間帯8
else if(hour == 17 && min == 0)}
document.write(msg8);
}
// 時間帯9
else if(hour == 19 && min == 0)}
document.write(msg9);
}
// 時間帯10
else if(hour == 20 && min == 0)}
document.write(msg10);
}
// 時間帯11
else if(hour == 21 && min == 0)}
document.write(msg11);
}
// 時間帯12
else if(hour == 22 && min == 0)}
document.write(msg12);
}
// 時間帯13
else if(hour == 23 && min == 0)}
document.write(msg13);
}
// 時間帯14
else if(hour == 0 && min == 0)}
document.write(msg14);
}
// 時間帯15
else if(hour == 1 && min == 0)}
document.write(msg15);
}
// 時間帯16
else if(hour == 2 && min == 0)}
document.write(msg16);
}
// 時間帯17
else if(hour == 3 && min == 0)}
document.write(msg17);
}
// なし
else{
document.write();
}
// 表示終了
setTimeout("clocks()", 60000);
}

window.onload = function(){
clocks();
} //
以上です。
そんなに難しいことをやっているワケではありません(書けませんし)。

午前7時から深夜3時まで。
午前10時、正午、午後4時、午後6時は、ありません。

このスクリプトを、HTML「 clock.html 」にします。
<html lang="ja">
<head>
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
<!--
function clocks(){
// 設定開始
var msg1 = '<audio width="100" height="20" src="clock/am7.mp3" autoplay>'; // 時間帯1
var msg2 = '<audio width="100" height="20" src="clock/am8.mp3" autoplay>'; // 時間帯2
var msg3 = '<audio width="100" height="20" src="clock/am9.mp3" autoplay>'; // 時間帯3
var msg4 = '<audio width="100" height="20" src="clock/am11.mp3" autoplay>'; // 時間帯4
var msg5 = '<audio width="100" height="20" src="clock/pm1.mp3" autoplay>'; // 時間帯5
var msg6 = '<audio width="100" height="20" src="clock/pm2.mp3" autoplay>'; // 時間帯6
var msg7 = '<audio width="100" height="20" src="clock/pm3.mp3" autoplay>'; // 時間帯7
var msg8 = '<audio width="100" height="20" src="clock/pm5.mp3" autoplay>'; // 時間帯8
var msg9 = '<audio width="100" height="20" src="clock/pm7.mp3" autoplay>'; // 時間帯9
var msg10 = '<audio width="100" height="20" src="clock/pm8.mp3" autoplay>'; // 時間帯10
var msg11 = '<audio width="100" height="20" src="clock/pm9.mp3" autoplay>'; // 時間帯11
var msg12 = '<audio width="100" height="20" src="clock/pm10.mp3" autoplay>'; // 時間帯12
var msg13 = '<audio width="100" height="20" src="clock/pm11.mp3" autoplay>'; // 時間帯13
var msg14 = '<audio width="100" height="20" src="clock/midnight0.mp3" autoplay>'; // 時間帯14
var msg15 = '<audio width="100" height="20" src="clock/midnight1.mp3" autoplay>'; // 時間帯15
var msg16 = '<audio width="100" height="20" src="clock/midnight2.mp3" autoplay>'; // 時間帯16
var msg17 = '<audio width="100" height="20" src="clock/midnight3.mp3" autoplay>'; // 時間帯17
// 設定終了
var now = new Date();
var hour = now.getHours(); // 時
var min = now.getMinutes(); // 分
// 時間帯1
if(hour == 7 && min == 0)}
document.write(msg1);
}
// 時間帯2
else if(hour == 8 && min == 0)}
document.write(msg2); } // 時間帯3 else if(hour == 9 && min == 0)}
document.write(msg3);
} // 時間帯4 else if(hour == 11 && min == 0)}
document.write(msg4);
}
// 時間帯5
else if(hour == 13 && min == 0)}
document.write(msg5);
}
// 時間帯6
else if(hour == 14 && min == 0)}
document.write(msg6);
}
// 時間帯7
else if(hour == 15 && min == 0)}
document.write(msg7);
}
// 時間帯8
else if(hour == 17 && min == 0)}
document.write(msg8);
}
// 時間帯9
else if(hour == 19 && min == 0)}
document.write(msg9);
}
// 時間帯10
else if(hour == 20 && min == 0)}
document.write(msg10);
}
// 時間帯11
else if(hour == 21 && min == 0)}
document.write(msg11);
}
// 時間帯12
else if(hour == 22 && min == 0)}
document.write(msg12);
}
// 時間帯13
else if(hour == 23 && min == 0)}
document.write(msg13);
}
// 時間帯14
else if(hour == 0 && min == 0)}
document.write(msg14);
}
// 時間帯15
else if(hour == 1 && min == 0)}
document.write(msg15);
}
// 時間帯16
else if(hour == 2 && min == 0)}
document.write(msg16);
}
// 時間帯17
else if(hour == 3 && min == 0)}
document.write(msg17);
}
// なし
else{
document.write();
}
// 表示終了
setTimeout("clocks()", 60000);
}
window.onload = function(){
clocks();
}
// -->
</script>
</head>

<body>
</body>
</html>

で、この「 clock.html 」を、 <iframe> で表示させるワケですが…。

<iframe src="clock.html" style="width: 1px; height: 1px; border: 0; "></iframe>

スタイルシートで、 <iframe> を極小にしています。

このスクリプトのままでいい、ごちゃごちゃ自分で書くのは面倒くさい、という方は、この <iframe> を
このまま貼り付けちゃってもいいと思います(私は構いません)。

<iframe src="http://katsuontheweb.studio-web.net/freesoft/clock.html" style="width: 1px; height: 1px; border: 0; "></iframe>

基本的には、応用も簡単だと思います。

MP3を換えるだけでできますので、ぜひぜひ、自分の好きな音で作ってください。
var msg_ 」の項目を24個にして、MP3データも揃えれば、24時間の“時報”になります。
(抜けてる時間帯があるのは、単純に“ネタ”内で欠けていたからです。普通に作れば24時間、ですよね。)

それから、実装する前に“テスト”したい場合、コツがあります。
一番最後の、この部分。

// なし
else{
document.write();

この「 write() 」を、例えば「 write(msg1) 」と書き換えておくと、確認し易くなります。
参考までに。

以上です。

貼り付け用に、用意しておきました。
function clocks(){

// 設定開始
var msg1 = '<audio width="1" height="1" src="" autoplay>'; // 時間帯1
var msg2 = '<audio width="1" height="1" src="" autoplay>'; // 時間帯2
var msg3 = '<audio width="1" height="1" src="" autoplay>'; // 時間帯3
var msg4 = '<audio width="1" height="1" src="" autoplay>'; // 時間帯4
var msg5 = '<audio width="1" height="1" src="" autoplay>'; // 時間帯5
var msg6 = '<audio width="1" height="1" src="" autoplay>'; // 時間帯6
var msg7 = '<audio width="1" height="1" src="" autoplay>'; // 時間帯7
var msg8 = '<audio width="1" height="1" src="" autoplay>'; // 時間帯8
var msg9 = '<audio width="1" height="1" src="" autoplay>'; // 時間帯9
var msg10 = '<audio width="1" height="1" src="" autoplay>'; // 時間帯10
var msg11 = '<audio width="1" height="1" src="" autoplay>'; // 時間帯11
var msg12 = '<audio width="1" height="1" src="" autoplay>'; // 時間帯12
var msg13 = '<audio width="1" height="1" src="" autoplay>'; // 時間帯13
var msg14 = '<audio width="1" height="1" src="" autoplay>'; // 時間帯14
var msg15 = '<audio width="1" height="1" src="" autoplay>'; // 時間帯15
var msg16 = '<audio width="1" height="1" src="" autoplay>'; // 時間帯16
var msg17 = '<audio width="1" height="1" src="" autoplay>'; // 時間帯17
var msg18 = '<audio width="1" height="1" src="" autoplay>'; // 時間帯18
var msg19 = '<audio width="1" height="1" src="" autoplay>'; // 時間帯19
var msg20 = '<audio width="1" height="1" src="" autoplay>'; // 時間帯20
var msg21 = '<audio width="1" height="1" src="" autoplay>'; // 時間帯21
var msg22 = '<audio width="1" height="1" src="" autoplay>'; // 時間帯22
var msg23 = '<audio width="1" height="1" src="" autoplay>'; // 時間帯23
var msg24 = '<audio width="1" height="1" src="" autoplay>'; // 時間帯24
// 設定終了

var now = new Date();

var hour = now.getHours(); // 時
var min = now.getMinutes(); // 分

// 時間帯1
if(hour == 1 && min == 0)}
document.write(msg1);
}
// 時間帯2
else if(hour == 2 && min == 0)}
document.write(msg2);
}
// 時間帯3
else if(hour == 3 && min == 0)}
document.write(msg3);
}
// 時間帯4
else if(hour == 4 && min == 0)}
document.write(msg4);
}
// 時間帯5
else if(hour == 5 && min == 0)}
document.write(msg5);
}
// 時間帯6
else if(hour == 6 && min == 0)}
document.write(msg6);
}
// 時間帯7
else if(hour == 7 && min == 0)}
document.write(msg7);
}
// 時間帯8
else if(hour == 8 && min == 0)}
document.write(msg8);
}
// 時間帯9
else if(hour == 9 && min == 0)}
document.write(msg9);
}
// 時間帯10
else if(hour == 10 && min == 0)}
document.write(msg10);
}
// 時間帯11
else if(hour == 11 && min == 0)}
document.write(msg11);
}
// 時間帯12
else if(hour == 12 && min == 0)}
document.write(msg12);
}
// 時間帯13
else if(hour == 13 && min == 0)}
document.write(msg13);
}
// 時間帯14
else if(hour == 14 && min == 0)}
document.write(msg14);
} // 時間帯15
else if(hour == 15 && min == 0)}
document.write(msg15);
}
// 時間帯16
else if(hour == 16 && min == 0)}
document.write(msg16);
}
// 時間帯17
else if(hour == 17 && min == 0)}
document.write(msg17);
}
// 時間帯18
else if(hour == 18 && min == 0)}
document.write(msg18);
}
// 時間帯19
else if(hour == 19 && min == 0)}
document.write(msg19);
}
// 時間帯20
else if(hour == 20 && min == 0)}
document.write(msg20);
}
// 時間帯21
else if(hour == 21 && min == 0)}
document.write(msg21);
}
// 時間帯22
else if(hour == 22 && min == 0)}
document.write(msg22);
}
// 時間帯23
else if(hour == 23 && min == 0)}
document.write(msg23);
}
// 時間帯24
else if(hour == 0 && min == 0)}
document.write(msg24);
}
// なし
else{
document.write();
}
// 表示終了
setTimeout("clocks()", 60000);
}

window.onload = function(){
clocks();
} //

音量の調節ができないのと、on/offの切り替えができないのが、改善点として挙げられると思います。
私自身は書き足していくつもりはあまりないんですが、もし方法が分かれば、改善してください。