2018年11月12日月曜日

YES/NOチャート 効果音の修正と動画再生

今回のゼミでは前回作成した効果音のプログラムの修正と動画の再生をするようにスマホアプリを書き換えた。

<ページが開くと同時に音を出すプログラムの修正>

 まず、先週入力したプログラムに間違いがあったため、index.htmlのons.ready(function() {});の{}内に書き込んだプログラムを削除した。
次に、音楽を再生したいページのHTMLファイル(resultA.htmlとする)にあるons-pageタグにid属性を追加した。(リスト1参照)
効果音は前回と同じサイトのものを使った。
https://maoudamashii.jokersounds.com/
<ons-page id="resultA">
リスト1

次に、jsフォルダの中にあるmain.jsの末尾に次のスクリプトを追加した。(リスト2参照)
document.addEventListener('postpush',function(event){
  if(event.enterPage.id=='resultA'){
    beep('https://maoudamashii.jokersounds.com/music/se/mp3/se_maou
damashii_jingle04.mp3');
  }
},false);
リスト2
これによりresultAのページに遷移した時に効果音が出るようになった。

<動画を再生するプログラム>

 まず、Monacaのオブジェクトブラウザのwwwフォルダの下にvideoフォルダを作成した。
次に、動画をvideoファイル内にアップロードした。
次に、動画を再生したいページのHTMLファイル(resultB.htmlとする)のons-pageタグにid="resultB"を付けて、</div>の上の行に次のスクリプトを追加した。(リスト3参照)
<videoid="video1"src="video/ZZZZZZ"width="320"height="240"controls></video>
リスト3 ZZZZZZの部分はアップロードした動画ファイルの名前


次にjsファイル内のmain.jsに次のスクリプトを追加した(リスト4参照：赤字部分)

document.addEventListener('postpush',function(event){
　if(event.enterPage.id=='resultA'){
　　beep('https://maoudamashii.jokersounds.com/music/se/mp3/se_maoudamashii_jingle04.mp3');
　} else if(event.enterPage.id == 'resultB'){
　　var video = document.getElementById("video1");
　　video.play();
　}
},false);
リスト4

これによりresultAのページに遷移した時に効果音だけでなく動画も再生されるようになった。

今回のゼミではページを遷移しただけで効果音を鳴らせたり、動画を再生することができるようになった。次回もMonacaにてより良い機能を追加していきたいと思う。

【TIPS】


動画を再生するプログラムにおいて、動画を再生したいページが音楽を再生したいページと同じ場合、HTMLファイル名をresultA.html、ons-pageタグのid属性をresultAとすると、リスト4は次のようになる。
document.addEventListener('postpush',function(event){
  if(event.enterPage.id == 'resultA'){
    beep('https://maoudamashii.jokersounds.com/music/se/mp3/se_maoudamashii_jingle04.mp3');
    var video = document.getElementById("video1");
    video.play();
  }
},false);
リスト５

リスト4との違いは、リスト4がif文を使ってevent.enterPage.idがpageAのときに音楽を鳴らし、event.enterPage.idがpageBのとき動画を再生しているのに対して、リスト5ではevent.enterPage.idがpageAのときに音楽と動画を同時に再生している点である。

イベントリスナ


スクリーンのタップ、画面の表示などのイベントを捉えて処理を実行するために聞き耳を立てる仕掛けをイベントリスナと言う。
イベントリスナは次のように書く。
document.addEventListener([イベントの種類], function(event){
    ・・・ここにイベント処理を書く・・・
  }
},false);
リスト6　イベントリスナ

リスト6において[イベントの種類]には、どのようなイベントが発生したかを表す文字列を書く。例えば、スクリーンをタップした場合は'click'、画面を表示（push）した直後は'postpush'、画面を閉じた（pop）直後は'postpop'などと書く。

無名関数


また、発生したイベントを受けて行う処理は下記の無名関数内で行う。
function(引数) { ・・・ここに関数の処理を書く・・・ }
リスト7　無名関数の書式

通常の関数は名前を持ち、beep関数のように必要な時に再利用される。
function 関数名(引数) { ・・・ここに関数の処理を書く・・・ }
リスト8　名前のある普通の関数の書式

これに対して、一度きりしか利用しない関数は名前を持つ必要がないのでリスト7のような書式になり、そのため無名関数と呼ばれる。
なお、リスト8は次のように書いてもよい。
関数名 = function(引数) { ・・・ここに関数の処理を書く・・・ }
リスト9　名前のある関数の別の書式 

前回やったbeep関数はこの書式になっている。
投稿者 時刻:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)