Designers Hack - デザイナーズハック

Web やアプリのデザイナーか「技術にしばられないでデザインを考えていく」コミュニティ。
月1回の定例MTGと年に数回のデザイン中心ハッカソンなどをしています。

　　

最近増えてきた、音声を扱うアプリとHTMLでの実装についてPackaging HTML and Apps which deal with audio

ブログ

2012.12.10

ここ最近、音声を扱うアプリが一気に出てきました。

  • 東北ふゆまつりにも採用：写真に音声を入れられるカメラアプリ「サウンドショット」 – ITmedia Mobile http://www.itmedia.co.jp/mobile/articles/1212/06/news040.html
  • ホーム｜Androidアプリ 音声録音機能付きカメラcamereon http://camereon.jp/
  • FxCamera – Lets you take photos with various effects through simple steps http://fxc.am/
  • 動画版Instagram、Viddyが予想以上に楽しくてブレイクの予感 | Lifehacking.jp http://lifehacking.jp/2012/05/viddy/
  • 歌/演奏を録音して世界中の人とコラボレーションできる iPhone アプリ「nana」 – インターネットコム http://japan.internet.com/allnet/20120821/4.html

 

そしてMA8で最優秀賞をとったとしてバズっていたのがこれ。

  • Voicepic http://voicepic.me/

ちなみに、Simejiもかすっていますよ。

  • Simeji -録音入力をやってみよう- – YouTube

いわゆる「HTML5」効果もあいまって、こういう状況になったのでしょうか？

しかし、SNSや共有が写真だけではなく、音声や動画にも及んでいるのは間違いありません。

 

では、いわゆる「HTML5」でかんたんに音声を再生をすることができるようになった！といっても、実装方法がわからないと見積りもできなければ提案もできません。

自分が実装することを前提にしたメモとして共有します。
（録音側はおそらく各アプリのネイティブ環境だと思うので、ここではHTML5による再生/ストップのみにフォーカスしています）

HTML5のaudioタグ

まずはいちばんかんたんな状態から見ていきましょう。

          <audio controls>

               <source src=”test.mp3″ type=”audio/mp3″ media=”all”>

               <p>このブラウザダメぽ</p>

          </audio>

このコードだと、下図のようになります。

 Chrome

 

Safari

FirefoxはMP3非対応なので、「このブラウザダメぽ」と出るはずなのだが、なぜか出ない…とりあえずこの問題は置いておこう。

Android 2.3 標準ブラウザ

Android 2.3 はMP3対応だが、なぜかうっすらとして「再生できない感」が非常にあります。

このように、<audio>タグの中に再生させたい<source>を書き、さらに<audio>タグの属性に”controls”を入れると、ブラウザデフォルトのコントローラーがでます。

「Chrome」だけでいいよーとかいう場合はこれでいいのですが、全ブラウザに対応させたい場合はどのようにしたらよいのでしょうか。

対応している音声形式（拡張子）

現時点で、ブラウザごとに対応している音声形式は次のサイトが詳しく書いています。

うん、てんでバラバラ。。

下記のように各形式のエンコード分を準備すれば、それぞれ対応するブラウザで対応する形式のものが出てくる仕様にはなっていますが、SNSなど動的なコンテンツの場合、サーバー側でこの変換処理をするのはなかなかむずかしいのではないのでしょうか？

          <audio controls>

               <source src=”test.mp3″ type=”audio/mp3″ media=”all”>

               <source src=”test.ogg” type=”audio/ogg” media=”all”>

               <source src=”test.wav” type=”audio/wav” media=”all”>

               <p>このブラウザダメぽ</p>

          </audio>

そこで、Simejiの録音入力で使っているのはMP3なので、それを全ブラウザでそのまま使えるようにできるだけかんたんな方法を模索します。

とりあえず、全ブラウザに対応できるようにできるもの

jsライブラリをいろいろ試してみます。

レガシーなWebブラウザでもaudioタグに対応させる「Audio.js」

  • レガシーなWebブラウザでもaudioタグに対応させる「Audio.js」 – MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログオープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ http://www.moongift.jp/2012/03/20120318-2/

こちらに書いてあるようにやってみると、動いた！

＜注意＞

サーバー上で動きます。ローカルでもサーバーを立てないと動かないのでご注意ください。

Firefoxでも用意していたmp3ファイルがかんたんに動きました。
さらに、IE9、IE8もOKです！おー！これはすごいテンションがあがりました！！

ただ、Androidで動かない…

Browser＆format supportを見ると「Android (2.2+, w/Flash)」となっています。

試した端末は2.3なのですが、きっとFlashが入っていないからでしょう。。

大半のAndroidユーザーはFlashプラグインを入れていないと思うし、かといって「Flashを入れましょう」と誘導することもできないので、ほぼむずかしいと考えました。

 

ということで、audio.jsを使う場合は、Androidだけ何か別の対策をしたほうがよさそうです。

その他のブラウザはOKです。

 

jPlayer.js

そして次にいきついたのがjplayer.js。

これのうれしいところは、円形のシークバーにかんたんにカスタマイズできること。

 

あらかじめCSSなどが準備されています。

丸く動いていくところについては、いくつかのjQueryプラグインとライブラリを読みこませることで実装されるようです。（IE対策）

実装方法はこちらを参考に。

コード自体はHTML5ではなく、純粋なJavaScript。
再生ページにはswfが埋め込まれているようです。

詳しい仕組みはわかりませんが、これで実装してみると、ひとつのmp3しか用意していないのに対して、下記ブラウザで少なくとも動作確認できました。

  • Mac：Chrome、Firefox
  • Windows：IE9、IE8（on IE Tester）
  • Android：2.3標準ブラウザ
  • iPod touch：Safari（iOS5）

つまり、oggやwavへの変換をしなくても、mp3というひとつの形式だけで、各ブラウザ上で再生が確認できました。

これはわたしたちが思っていた結果だったので、このjPlayerを使った円形シークバーを使ってみようという方向になりました。

現時点でのaudioタグ雑感

結果的にaudioタグを使うと、「各形式の音声ファイルを準備すること」がネックとなります。

アプリ紹介や製品紹介など、そのページに固定のものでいいのなら、手作業で変換することは苦ではないでしょう。
ただ、最初に紹介したアプリのようにユーザーが録音したものなど、動的にコンテンツとなるものについては、現実的ではありません。
サーバーで変換をするというのも、かなりの足かせとなるでしょう。

audio.jsを使ったところでAndroidがネックとなり、再生できませんでした。

今の時点で優先させるべきは、わざわざHTML5を使うことではなく、全ブラウザからきちんと音声が聞けること。

今回の場合は「mp3」を使って、できる限りサーバー上で形式の変換をすることなく、全ブラウザで音声を出すというのが目的でしたので、jPlayerが得策でした。

その他、こちらの記事も参考にさせていただきました、ありがとうございます。