KUNISAN.JPトップ

KUNISAN.JPブログコメント書き込み




ウクレレコード表のスマートフォン対応(iOS&Android)

名前: 小川 邦久 リンク: http://kunisan.jp/ 日付: 2011年10月30日



ウクレレコード表のスマートフォン対応(iOS&Android)今までパソコン上でしか対応していなかった、ウクレレコード表(http://kunisan.jp/ukulele/)の音が鳴る機能ですが、ようやくスマートフォン(iOS&Android)でも対応するようになりました。

元々音を鳴らす機能は、以下のように単純なHTMLだけで構成されていました。
1) コードをクリックすることでiframe内のページ切り替え
2) iframe内のページでbgsoundタグ(IEのみ)またはembedタグ(IE以外)でmidファイルを再生

しかし、スマートフォンでは、midファイルの再生に対応していない上、bgsoundタグとembedタグのどちらにも対応しておらず、スマートフォンで音を鳴らすには、別のやり方が必要でした。

スマートフォン対応に向けて、まずはTimidi95というフリーソフトを使って、midファイルを全てwavファイルに変換しました。しかし1個あたり数百byteのファイルが数百KB~数MBと、ファイルサイズが数千倍に膨れ上がってしまったため、今度はBatchWOO!というソフトを使って、wavファイルをmp3ファイルに変換しました。mp3ファイルは数十KBと、それでももともとのmidファイルの数百倍もありますが、このサイズであれば連続で音を鳴らした場合も、負荷が少ないと判断しました。

続いてタグの調整です。スマートフォンのブラウザーの多くはHTML5に対応しているため、HTML5から追加されたaudioタグを使って、今まで同様にiframe内で音を鳴らすようにしてみました。autoplay属性を使うことで、Galaxy S2(Android)ではうまく音が鳴ったのですが、iPad(iOS)では音が鳴りません。よく調べてみると、iOSではautoplay属性に制限をかけていて「使えない」ということがわかりました。

iOS上の制限を考えるとiframeを使うのは難しいと判断して、各コード毎にaudioタグを生成して鳴らせばいい、というアイデアが浮かびました。1ページ内に百個以上のaudioタグを付ける形になります。この方法もGalaxy S2では問題が無かったのですが、iPadの方は動きが非常に重くなってしまい、画面のスクロールもままならなくなってしまいました。音は鳴るものの、これではiOSユーザーは使わなくなってしまいます。

そして最終的に思いついたのが、JavaScriptを使ったAudioコントロールです。audioタグを設置せず、コードをクリックすることで、パラメータを飛ばしてJavaScriptを実行する形です。具体的には下記のプログラムがベースになります。

function audioPlay(param){
audio = new Audio(param + ".mp3");
audio.play();
}

これにより、iPadでの動作が重くなる現象が解消されました。うちにはiPhoneやiPodはありませんが、OSが同じなので、きっと動くだろうと思っています。もちろん、Galaxy S2での動作も問題ありませんでした。

これでパソコンから離れたところでも、スマートフォンでウクレレのチューニングをしたり、コードの音をチェックすることも可能になりました。実際にこんな使い方をしてくれるようになると、製作者としても嬉しいですね。





Web管理関連記事(リンク一覧): KUNISAN.JP全ウェブページのUTF-8化 (複数ファイルの文字コード変換) / アサヒカメラ2月号(2017) - 写真の無断使用への損害賠償&削除要請マニュアル / KUNISAN.JPトップページの統合 / JavaScriptパチスロ公開 / ミサイル防衛 - JavaScriptのシンプルシューティングゲーム / ...(記事連続表示)

関連カテゴリー: Web管理関連記事, ミュージック関連記事

Google API Expertが解説するHTML5ガイドブック
Google API Expertが解説するHTML5ガイドブック をAmazon.co.jpでチェック



1)商品の宣伝、宗教や政治活動の勧誘など、本サイトの趣旨に合わない書き込みはご遠慮ください。
2)個人、団体への誹謗中傷や、差別的な発言、公序良俗に反する表現は禁止します。
3)本ブログへの書き込みによって何らかの問題が発生した場合、KUNISAN.JP管理者までご連絡いただければ、内容の修正、削除を行います(その他の責任については負いかねます)。
4)製作者サイドの都合により、予告無く書き込みの一部または全てが削除されることがあります。あらかじめご了承ください。
5)迷惑メールやコンピュータウィルス被害を防止するため、必要な場合以外にはメールアドレスを書き込まないことをお勧めします。

タイトル
お名前 (※必須)
Eメール
ホームページ

コメント (※必須)


画像ファイル(サイズ:1.5MB以下 形式:gif,jpeg,jpg,png)