iPhoneでHTML5のaudio要素を使うときに気をつけたいこと

HTML5ではaudio要素が追加され、外部プラグインを使わずブラウザで音を扱えるようになりました。そこで、デモを作ろうとしたのですが、ハマったポイントがいくつかあったので紹介します。検証環境はPC:Safari5.0.5(WIN)、iPhone:iOS4.3.2のMobile Safariです。

loop属性が効かない

audio要素ではloop属性を付けることで、繰り返し再生が可能です。PCでは動作しますが、iPhoneではこれがうまく動作せず、1回再生されて停止してしまいました。onendedを使い、最後まで再生したらもう一度再生させれば対処できます。

<audio src=”audio.mp3″ preload=”auto” onended=”this.play()” ></audio>

ユーザのアクションをトリガーにしてしか読み込み、再生できない

iPhoneでは従量課金の可能性があるのでautoplay, autobuffer属性は無効になっていますので、代わりにWebページ読み込み時(onload)のタイミングでプリロードや再生ができるか試してみました。これも、PCでは動作しますが、iPhoneでは動作しません。iPhoneでは、ユーザのアクションがトリガーになるようなものでないとロードが開始されないようです。
 

同時に1音しか鳴らせない

2音を同時再生できるか検証してみました。PCでは1音を再生させた後、2音目を再生させると同時に再生されますが、iPhoneでは前の音が強制的に停止してから次の音が再生されます。iPhoneでは同時に1音しか鳴らせないようです。
 

読み込みの状態を知りたい場合は、canplayイベントで

loadはデータ全体の読み込みが完了したというイベント、canplayは再生が可能になったというイベントですが、iPhoneではloadイベントが発生していないようでした。プリロードなど、読み込みの状態を知りたい処理はcanplayイベントを使うのが良さそうです。

function loadAud(){
  var aud = document.getElementById(‘elementId’);
  aud.addEventListener(‘canplay’, function(){
    // なにかしらの処理
  }, true);
  aud.load();
}

load()しなくてもplay()できる

データを読み込むload()メソッドと、再生を行うplay()メソッドがありますが、load()させなくてもplay()のみで再生可能です。ただし、PC版ではplay()のみの場合はcanplayイベントが発生していないようでした。iPhoneでは発生しているようなので、そのタイミングで処理を書くことが可能です。
 

複数プリロードしておこうとすると1音しか鳴らないことがある

初回再生の際の遅延を無くすため、スタートボタン等のクリック時に複数の素材をあらかじめload()しておき、後で個別再生させるということが考えられますが、これもPCでは意図通りに動くものの、iPhoneでは1音しか鳴らなくなるようでした。1音だけload()している場合は、遅延が無くなり意図通りに動きます。
 

Related Post

Parse.comを使ったiOSデバイスへのプッシュ通知[導入編]Parse.comを使ったiOSデバイスへのプッシュ通知[導入編]

アプリのバックエンド機能を提供するBaaSサービスのParseを使ってプッシュ通知を行う方法をご紹介します。 Parseの詳細については公式ページまたは過去記事を参照してください。 無料版でも、ターゲットを絞り込んだ通知など多くのことが行えるので、3回に分けて紹介していきます。 今回はその第1回、プッシュ通知機能を実現するまでの導入手順についてです。 なお、ParseはiOS、Android、Windows Phoneなどさまざまなデバイスに通知を行うことができますが、この記事ではiOSを対象とします。 公式のドキュメント(Quick Start

社内HTML5勉強会を行いました社内HTML5勉強会を行いました

先日、社内でHTML5勉強会を行いました。今回は「基礎編~HTML5の基礎とiPhone最適化~」と題して、HTML5でiPhone最適化を行う際の基礎知識とHTML5利用の目的共有を行いました。そこで、今回の勉強会の資料を一部公開します! HTML5といっても、新しく追加されたタグやAPI,CSS3など範囲が広く、その上主要ブラウザでも実装状況が違ったり、仕様の廃止があったりするのが現状です。しかし、スマートフォン(今回はiPhoneのみ)に限定してしまえば、ブラウザを限定することがほぼ可能なので、HTML5の機能を生かした最適化を行うことができます。機能面、操作性ではネイティブアプリに劣りますが、Webアプリであればデバイスに依存することなく開発でき、安価で導入しやすいという利点があります。  【資料の内容】●開発環境の整備●HTML5の基本セット●iPhone向けWebアプリケーションの開発-Viewport-付加機能●HTML5で追加されたタグ-audio-video-canvas-form属性●API-クライアントサイドのストレージ-geolovcation-オフラインアプリケーションキャッシュ●アニメーション  【資料はコチラ】 [file]/2010/12/HTML5_iPhone.pdf[/file]

Parse.comを使ったiOSデバイスへのプッシュ通知[ターゲッティング編]Parse.comを使ったiOSデバイスへのプッシュ通知[ターゲッティング編]

前回、Parseを使ったiOSデバイス向けのプッシュ通知を行う方法をご紹介しました。今回はプッシュ通知先の絞り込みについて、無料版でも利用可能なChannelというパラメータを使用した方法をご紹介します。 大まかには、以下のような流れで行います。 デバイスにChannelの情報をひもづける Channelを指定してプッシュ通知を送る デバイスにChannelの情報をひもづける 次のメソッドを使って、デバイス側からParse(サーバ)側にChannel情報を登録できます。 NSString *channelName = @"hogehoge";   //登録するChannel名[PFPush