jQueryとaudioタグでクリックすると音が鳴るiOSのwebアプリを作る

jQueryとaudioタグでクリックすると音が鳴るiOSのwebアプリを作る

うちの子供(1歳半)の為にhtml5のaudioタグとjQueryで動物の画像をクリック(タップ)すると動物の鳴き声が鳴るiOSのwebアプリ作る。

鳴き声webアプリ

webアプリ関連記事

仕様

  • スマホ対応
  • webアプリ化する
  • 複数音声対応
  • 連続再生できる

用意するもの

  • 音声ファイル(mp3/wave)
  • 画像
  • jquery/html5

音声ファイル(mp3/wave)を準備する

鳴らす音声ファイルを用意します。
ブラウザ毎に再生できるファイル形式が違うので、同じファイルをmp3とwav形式で準備します。
この二つの形式のファイルがあればほぼ対応できるみたいなので用意します。
調べたところ注釈が多くてよくわからなかったですが、現状で一応mp3のみでも行けちゃうみたいです。
念のためwave形式のもあった方がいいかもですね!(私は準備してないですが…)

音声ファイル配信サイト

効果音ラボ - 商用無料、報告不用の効果音素材をダウンロード
品質を追求した、商用無料・クレジット表記不要のフリー効果音ライブラリです。緩い規約で気軽にダウンロードできます。

音声ファイル変換サイト

Online UniConverter - Online Free File Converter, Editor, Compressor
Online UniConverter (Media.io) — Free online tools with free video converter & audio converter converting files online free and it can compress video/audio/imag...

画像を準備する

クリックされる用の画像をお好みで用意します。

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アプリ化したら完了です!

iPhoneでアドレスバーを非表示にしてサイトをアプリっぽくする、apple-mobile-web-app-capable
iPhoneやipadでアドレスバーを非表示にしてフルスクリーンモードにすることで、サイトをアプリっぽく表示する、apple-mobile-web-app-capableと、ステータスバーの表示を変更できるapple-mob...

DEMO

鳴き声webアプリ

コメント

タイトルとURLをコピーしました