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

今までパソコン上でしか対応していなかった、ウクレレコード表(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管理関連記事(リンク一覧): SPF、DKIM、DMARCの設定とネームサーバー(DNS)設定のトラブル / さくらレンタルサーバーのアクセス履歴をPHPで表示 / PHPで画像のアップロード(さくらレンタルサーバーのPHPでImageMagick) / KUNISAN.JPサイトのメンテナンス(2018) / Webサーバー引っ越し(さくらインターネット スタンダード)とHTTPS(常時SSL)化 / ...(記事連続表示)

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

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