hello-world
webエンジニアのメモ。とりあえずやってみる。

スマホで鳴らせる「除夜の鐘」サイトを作りました

公開日時
#audio#js

今日は大晦日ですね。ということで 先日、チラッとご紹介した「煩悩API」を使ったサイトを作ってみました。

除夜の鐘

携帯（スマホ）、PC対応になっております。

画面に煩悩が表示され、鐘を鳴らすと煩悩が浄化され、次の煩悩が表示されます。

これを使えば煩悩の勉強もできますね。

携帯からアクセスした場合は、携帯を振ると除夜の鐘を鳴らすことができます。

PCからアクセスした場合は、画面をクリックすると除夜の鐘を鳴らすことができます。

年越しのお供によかったら使ってみてください。

除夜の鐘の音は ＮＨＫクリエイティブ・ライブラリーに公開されている「効果音　寺の鐘」を使用させていただきました。

はまったこと

  • iPhoneでのデバッグ方法

↓のようにRubyのワンライナーでHTTPサーバを立てて開発をしていたのですが、iPhoneでデバッグしようとしたときにどうしようかと思いました。

ruby -rwebrick -e "WEBrick::HTTPServer.new(:DocumentRoot => './', :Port => 8888).start"

解決方法としてはiPhoneとPCをテザリングで接続し、割り振られたIPを↓のようにBindingオプションに渡して、iPhoneのブラウザからアクセスすればできました。

ruby -rwebrick -e "WEBrick::HTTPServer.new(:DocumentRoot => './', :Port => 8888, :Binding => 'xxx.xxx.xxx.xxx').start"
  • iPhoneでmp3のloadが実行されない

最初、ページ読み込み完了時にmp3のloadを実行するようにしていたのですが、PCだとうまく再生されるのにiPhoneだと再生されない現象が発生しました。

iPhoneの場合は、ユーザのアクションをトリガーにしてしか読み込み、再生ができないそうです。

そこで、↓のようにtouchイベントにmp3のloadを追加するようにしました。

var isLoad = false,
    soundBell = new Audio('night_watch.mp3');

document.body.addEventListener('touchstart', function(){
  if (isLoad == false) {
    soundBell.load();
    isLoad = true;
  }
}, false);

よい年越しを。

参考