今回は半年前に作成したスライドショーに音楽を付与し、
画像をクリックすると音楽とスライドショーが開始するようにしてみたいと思います。
作成したスライドショーはこちらにまとめております。
elsammit-beginnerblg.hatenablog.com
合わせてhtmlで音声出力する際の注意点もまとめておきたいと思います。
■音声出力時の注意点
実は当初、webアプリを開いたらスライドショーと音声を自動実行しようとしておりました。
が、、、
現状、ブラウザのポリシーにより音声の自動実行は禁止されており、自動実行することは不可能になっております。
確かに、youtubeとかも再生画面で必ず再生ボタン押さなければならないですもんね。。
参考：
developer.mozilla.org
ただ、再生ボタンを用意するのもちょっとカッコ悪いな。
と思い、スライドショーの画面をタッチやクリックすることで音声とスライドショーが開始されるように変更することにしました。
■画像クリックで音楽とスライドショーが開始するように修正
前回のスライドショーのコードを抜粋するとこちらになります。
【html】
<div id="photo"> <ul class="slideshow"> <li class="current"><img src="image/Photo1.JPG" alt="A" class="photoImg" id="photoNum1"></li> <li><img src="image/Photo2.JPG" alt="B" class="photoImg" id="photoNum2"></li> <li><img src="image/Photo3.JPG" alt="C" class="photoImg" id="photoNum3"></li> <li><img src="image/Photo4.JPG" alt="D" class="photoImg" id="photoNum4"></li> <li><img src="image/Photo5.JPG" alt="E" class="photoImg" id="photoNum5"></li> </ul> </div>
【css】
.slideshow > li {
opacity: 0;
transition: opacity 1s;
}
.slideshow > li.current {
opacity: 1;
}
(function($){ $(document).ready(function(){ var slides = $(".slideshow > li"); // slideshowクラス配下のliをセット. // 画像切り替え関数. function toggle_slide(){ count = (count + 1) % 5; slides.removeClass("current").eq(count).addClass("current"); // 現在セットされているcurrentクラスを削除し次に表示させるimgタグにcurrentタグを付与. selectImgcircle(count); // ●印付与関数コール. } setInterval(toggle_slide, 5000); // 定期処理実行. }); })(jQuery);
htmlにてリストで画像を表示するようにし、
cssでクラス名がcurrentのみを表示、
javascriptで定期時間毎にクラス名currentを順番に付与・削除を繰り返すことで、
スライドショーを実現しています。
このコードに対して、画像画面をクリックされたイベントが拾えれば
audioタグに対して音楽再生、一時停止関数を発行すれば機能としては実現できます。
クリックイベントはjQueryをこちらのようなコードを実装すればOK。
$(".クラス名").click(function(event) { //クリックイベント検知時に実行したいコード }
ということで、、、
画像を表示しているリストに対して、クリックイベントを検知させるためにこちらのコードを作成。
$(".slideshow").click(function(event) { console.log("Clicked!!"); }
こちらのコードをjavascriptに追記して動作確認してみたのですが、、、
画像上のクリックイベントを検知出来ていない。
仕方ないのでリストの上位階層である、id名photoにクリックイベントを仕込んで実行。
$(".slideshow").click(function(event) { console.log("Clicked!!"); } ||< 今度はクリックイベント検知できたのですが、、、 枠だけで画像の中心部ではやはり反応なし。。 う～～ん。。 悩んだ末たどり着いた方法、、それは、 「画像と同じ領域に重ねる形で別の透明なタグを配置し、追加したタグでクリックイベントを検知」 です。 ちょっと安直すぎる気もしたのですが、、 一旦この方針で実装！！ 変更箇所はこちらになります。 【html】 >|html| <audio loop id="music"> <source src="music/hoge.mp3" type="audio/mp3"> </audio> <div id="photo"> <p class="musicStpse"></p> <ul class="slideshow"> <li class="current"><img src="image/Photo1.JPG" alt="A" class="photoImg" id="photoNum1"></li> <li><img src="image/Photo2.JPG" alt="B" class="photoImg" id="photoNum2"></li> <li><img src="image/Photo3.JPG" alt="C" class="photoImg" id="photoNum3"></li> <li><img src="image/Photo4.JPG" alt="D" class="photoImg" id="photoNum4"></li> <li><img src="image/Photo5.JPG" alt="E" class="photoImg" id="photoNum5"></li> </ul> <div id="selectedImg"> <div id="select1" onclick="ImgSelect(1)"></div> <div id="select2" onclick="ImgSelect(2)"></div> <div id="select3" onclick="ImgSelect(3)"></div> <div id="select4" onclick="ImgSelect(4)"></div> <div id="select5" onclick="ImgSelect(5)"></div> </div> </div>
$(".musicStpse").click(function(event) { let music = document.getElementById("music"); if(!music.paused){ music.pause(); }else{ music.play(); } }); (function($){ $(document).ready(function(){ var slides = $(".slideshow > li"); // slideshowクラス配下のliをセット. // 画像切り替え関数. function toggle_slide(){ let music = document.getElementById("music"); if(!music.paused){ // 動画が停止している間はスライド遷移させない count = (count + 1) % 5; slides.removeClass("current").eq(count).addClass("current"); // 現在セットされているcurrentクラスを削除し次に表示させるimgタグにcurrentタグを付与. selectImgcircle(count); // ●印付与関数コール. } } setInterval(toggle_slide, 5000); // 定期処理実行. }); })(jQuery);
先ほど記載しました通り、透明なタグとして、
<p class="musicStpse"></p>
を新規で追加。
musicStpseのcssはクラス名photoImgと同様の定義としております。
異なる点は、z-indexを用いてmusicStpseを全面に配置している点。
後はクリックイベントして、
$(".musicStpse").click(function(event) { let music = document.getElementById("music"); if(!music.paused){ music.pause(); }else{ music.play(); } });
を定義することで、
透明なタグがクリックされたことを検知して音楽のスタート・ストップを切り替えております。
こちらを実行してみたところ、、、
問題なく動作することを確認！！
■追加でクリック時にスタート、ストップマークを一瞬表示させてみる
先ほどのコードで目的は達成できたのですが、、
どうせなら、画像をタッチした時にスタート・ストップのアイコンを一瞬画面上に表示させてみたいと考え、
追加実装することにしました。
追加コードはこちらになります。
<div id="photo"> <p class="musicStpse"></p> <img src='image/StartIcon.png' alt="" id="on_fade"> <img src='image/Pause.png' alt="" id="on_fade_Pause"> <ul class="slideshow"> <li class="current"><img src="image/Photo1.JPG" alt="A" class="photoImg" id="photoNum1"></li> <li><img src="image/Photo2.JPG" alt="B" class="photoImg" id="photoNum2"></li> <li><img src="image/Photo3.JPG" alt="C" class="photoImg" id="photoNum3"></li> <li><img src="image/Photo4.JPG" alt="D" class="photoImg" id="photoNum4"></li> <li><img src="image/Photo5.JPG" alt="E" class="photoImg" id="photoNum5"></li> </ul> </div>
$(".musicStpse").click(function(event) { let music = document.getElementById("music"); if(!music.paused){ music.pause(); $('#on_fade').removeClass('on_fade'); $('#on_fade_Pause').removeClass('on_hidden'); $('#on_fade_Pause').addClass('on_fade'); $('#on_fade').addClass('on_hidden'); }else{ $('#on_fade').removeClass('on_hidden'); $('#on_fade').addClass('on_fade'); $('#on_fade_Pause').removeClass('on_fade'); $('#on_fade_Pause').addClass('on_hidden'); music.play(); } });
【css】
#on_fade, #on_fade_Pause{ position: absolute; width: 100px; height: 100px; top:300px; left:900px; } .on_fade{ z-index:6500; opacity:0; transition: opacity 1s; } .on_hidden{ z-index:1000; opacity:1; }
実施していることですが、
それぞれ、一時停止用のタグ(on_fade_Pause)とスタート用のタグ(on_fade)を用意して、
javascriptのコードにて、
アイコンをフェードアウトするように実装しております。
ただフェードアウトさせるだけですと、2回目以降透過率が0のままで表示がされないため、
使用していない側のアイコンにはクラス名on_hiddenを付与し、
表示しているのですが、スライドショーの画面領域よりも後ろに表示するようにz-indexを用いて調整。
こちらの最終コード実行結果はこちらに掲載しましたので気になる方はご覧ください。
(注)本当はスライドショースタートと一緒に音声が流れ、一時停止すると音声も止まるのですが、
動画掲載の関係で音声は常に流れた状態になっております。
youtu.be
■最後に
今回は画像クリックして音声とスライドショーが開始するようなコードを作成してみました。
まだまだWebアプリの実装は慣れてないです。
後、ブラウザの仕様も全く理解していなかった。。Webページ開いたときに自動再生が不可とは。。
もう少し勉強進めていきたいと思います！！
