うちの子供(1歳半)の為にhtml5のaudioタグとjQueryで動物の画像をクリック(タップ)すると動物の鳴き声が鳴るiOSのwebアプリ作る。
もくじ
webアプリ関連記事
jQueryとaudioタグでクリックすると音が鳴るiOSのwebアプリを作る
iPhoneでアドレスバーを非表示にしてサイトをアプリっぽくする、apple-mobile-web-app-capable
仕様
- スマホ対応
- webアプリ化する
- 複数音声対応
- 連続再生できる
用意するもの
- 音声ファイル(mp3/wave)
- 画像
- jquery/html5
音声ファイル(mp3/wave)を準備する
鳴らす音声ファイルを用意します。
ブラウザ毎に再生できるファイル形式が違うので、同じファイルをmp3とwav形式で準備します。
この二つの形式のファイルがあればほぼ対応できるみたいなので用意します。
調べたところ注釈が多くてよくわからなかったですが、現状で一応mp3のみでも行けちゃうみたいです。
念のためwave形式のもあった方がいいかもですね!(私は準備してないですが…)
音声ファイル配信サイト
音声ファイル変換サイト
画像を準備する
クリックされる用の画像をお好みで用意します。
jQuery/html5で実装する
html
<!--ボタン--> <a class="sounds" data-file="dog"><img src="./img/dog.jpg"></a> <a class="sounds" data-file="cat"><img src="./img/cat.jpg"></a> <a class="sounds" data-file="suzume"><img src="./img/suzume.jpg"></a> <a class="sounds" data-file="elephant"><img src="./img/elephant.jpg"></a> <a class="sounds" data-file="lion"><img src="./img/lion.jpg"></a>
JavaScript
$(document).ready(function() { //対応拡張子をチェック var audio = new Audio(); if(audio.canPlayType('audio/mp3')){ var a_type = '.mp3'; } else if(audio.canPlayType('audio/wav')){ var a_type = '.wav'; } //audioタグを作る $('.sounds').each(function(){ var file = $(this).attr('data-file'); $('body').append('<audio id="'+file+'" preload="auto"></audio>'); $('#'+file).attr('src', './sound/'+file+a_type); }); クリックされた要素と同じaudioを再生する $('.sounds').bind('touchstart', function() { var file = $(this).attr('data-file'); $('audio').each(function(){ $(this).get(0).pause(); $(this).get(0).currentTime = 0; }); $('#'+file).get(0).play(); }); });
ブラウザが対応している音声ファイルの判別する
var audio = new Audio();がいまいちわからないですが、audio.canPlayType(‘audio/mp3’)とすることでそのブラウザが対応している音声ファイルの判別ができます。
audioタグを作る
前の処理でブラウザが対応している音声ファイルだけを読み込みするようにしたのでそのファイルをaudioタグで書き出します。
このときこっそり.soundsから勝手に作った属性data-fileをaudioタグのidとしてつけています。
この時、idとファイル名を同じにしておくと管理が楽になります。
ボタンクリック時の処理を作る(複数音声対応)
ボタンクリック時の処理を作ります。
クリックされたときに、その要素のdata-file取得します。
data-fileとidは同一なのでそのidを指定して$(‘#’+file).get(0).play();で再生します。
連続再生用に現在再生しているものが特定する
ボタンが連続でクリックされた時の処理を作ります。
現在再生しているものが特定できずハマりました。
特定できないなら全部止めてしまえとやってみたらできました!
クリックされたときに、audioタグに対し、$(this).get(0).pause();で再生を止めて、
$(this).get(0).currentTime = 0;で再生位置を最初に戻して再生します。
これで連続再生が可能になります。
スマホでのタップの判定
.click()を使う場合、スマホだとシングルタップとタブルタップの判定の為に300msくらいの遅延を持たせているそうです。
そのため、ちょっと再生までにタイムラグを感じます。
また、ダブルタップ時に再生されないということも起こるので、今回はtouchendを使っています。
touchstartの方がいいかなと思ったんですけど、touchmoveの時も反応しちゃうので今回はtouchendにします。
もっといい方法見つけたら更新します!
webアプリ化する
下の記事を参考にwebアプリ化したら完了です!
DEMO
コメント