ブラウザで動作するBGM付きのスライドショーを作ります。
フォルダに写真を入れてHTMLをちょっと書き換えるだけで作れます。動画で作るよりも時間短縮ですし、パワーポイントでやるよりも動作が軽いはずです。
手軽にスライドショーを作れるというアイデアの引き出しとしてという理由もありますが、ウェブサイトのデザインとしてよく使われるので勉強しておこうというのがメインです。
１からオリジナルで作ったわけではなく、『週刊アスキー』の1115号に掲載されている「JavaScriptの部屋 第5回 思い出の写真を思い出のBGMでスライドショーに」を参考にしました。
プログラムの内容
こちらがサンプルのページです。音声が流れるので注意してください。
BGMで使用している音楽データは魔王魂さまから拝借しました。
開くと写真が画面いっぱいに表示されます。縦横のいずれかがウィンドウサイズの最大値になる大きさで、余った部分は黒の背景色となります。
ChromeだとF11でフルスクリーンになり、画面いっぱいに映し出されます。プロジェクターとか大きい画面でやると良さそうです。
画像をクリックするかスペースキーでスライドショーが始まります。BGMもそれから再生されます。
10秒経つと次の画像に切り替わります。
スライドショーの途中で画像をクリック、あるいはスペースキーを押すとスライドショーとBGMは一時停止します。
再び画像をクリックするかスペースキーでその時点から再生します。
最後の画像が終わったら頭の画像に戻ります。BGMも繰り返し再生されます。
プログラミング (HTML, CSS, JavaScript)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>スライドショー</title>
<script>
// 画像ファイルを配列で管理
var imageArray = ["00.jpg","01.jpg","02.jpg","03.jpg","04.jpg","05.jpg"];
// 変数
var currentImage = 0; // 画像インデックス
var timerId; // タイマーID
// 画像を順に切り替える
function changeImage() {
// 画像を表示
showImage(currentImage);
// 画像インデックスをインクリメント
currentImage++;
// 画像インデックスが画像数と一致したら先頭に戻す
if (currentImage == imageArray.length) currentImage = 0;
}
// 再生＆一時停止
function switchStartPause() {
var flg = document.getElementById("flg").innerText;
if (flg == "0") {
// フラグを1に変更し再生
document.getElementById("flg").innerText = "1"
startSlideShow();
} else {
// フラグを0に変更し一時停止
document.getElementById("flg").innerText = "0"
pauseSlideShow();
}
}
// スペースキーで再生＆一時停止
document.addEventListener('keydown', (event) => {
var keyName = event.key;
if (event.keyCode == 32) {
switchStartPause()
}
})
// スライドショーを開始
function startSlideShow() {
// １回目の画像の切り替え
changeImage();
// タイマー開始
timerId = setInterval("changeImage()", 10000);
// BGM開始
var audio = document.getElementById("audio");
audio.play();
}
// スライドショーを一時停止
function pauseSlideShow() {
// タイマー停止
clearInterval(timerId);
// BGM停止
var audio = document.getElementById("audio");
audio.pause();
}
// 画像を表示
function showImage(imageNo) {
// 画像の切り替え
document.getElementById("slide_img").src = imageArray[imageNo];
}
</script>
<style>
body {
background: #000000;
}
#slide_img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: auto;
width: auto;
max-width: 100%;
max-height: 100%;
margin: auto;
}
#flg {
display: none;
}
</style>
</head>
<body>
<img src="00.jpg" id="slide_img" onclick="switchStartPause()">
<audio id="audio" loop><source src="bgm.mp3"></audio>
<div id="flg">0</div>
</body>
</html>画像を追加する
画像を追加するときは、var imageArrayの配列に画像ファイル名を追加します。
このHTMLデータと同じフォルダに画像を入れておきます。もし異なるフォルダに入れる場合はファイルパスも記述します。
再生方法
画像のHTML上でonclickを指定しており、クリックすることでswitchStartPauseが実行されます。
switchStartPauseの中身は、画面上では非表示となっている#flgの値から再生か一時停止かを判断して行う処理を分岐させます。
#flgの初期値は0で、switchStartPauseを実行すると#flgを1に置き換えてstartSlideShowを実行しスライドショー開始。
#flgが1の場合は再生中とみなし、switchStartPauseを実行すると#flgを0に置き換えてpauseSlideShowを実行しスライドショーを一時停止する、という仕組みです。
キーによる制御
画像のクリックだけでなく、キーボードのスペースキーでも再生と一時停止ができるようになっています。
document.addEventListenerでキーのタイプを受け取り、event.keyCodeでどのキーがタイプされたかを判断します。
スペースキーはコード32で、コード32の場合はswitchStartPauseを実行するという分岐です。
画像切替の間隔
setInterval("changeImage()", 10000);この記述で10.000秒ごとにchangeImageを実行するようにしています。
一時停止した場合は、clearIntervalを使って消費した時間をリセットします。
画像切替の方法
画像の切替方法ですが、#slide_imgで指定されているimgタグのURLを書き換えるという方法で行っています。
つまりHTML上では1枚の画像データのみが常に表示されているだけで、そのURLの値だけをJavaScriptで置き換えることで表示する画像を切替えています。
スライドショーの演出として、トランジションにフェードなどを使用することが多いですが、この手法ではおそらくできません。
フェードの効果をつけるにはCSSで行うのがポピュラーなようです。おそらく画像を重ねて表示しておいて、切り替えのタイミングで上にある画像をフェードアウトさせつつ、その下の画像をフェードインさせるというやり方なのでしょう。
今回は画像が1枚だけなのでフェードの効果をつけられたとしても一瞬は画像が完全に消えるタイミングができてしまいますね。
次はフェードの演出ができるように作ってみようと思います。
コメント