HTML5

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

javascriptをつかってブラウザで録音するWEBサイトが作れるのか調べてみた

仕事で調べる必要があって。

HTML5でいろいろできるようになってるっていうし、ブラウザでその場で録音するWEBサイトって作れるのかな?

■つくれる。

こんなデモがあった。
https://webaudiodemos.appspot.com/AudioRecorder/index.html

録音して再生したり音声データをダウンロードしたりできる。

できるね。
 

■Web Audio API というものらしい。

音をいろいろするAPI
http://www.html5rocks.com/ja/tutorials/webaudio/intro/

 
■javascriptライブラリもあった。 

recorder.js
https://github.com/mattdiamond/Recorderjs

rec.record()
rec.stop()
これだけでできんのすごい。
こんど試しデモつくってみよう。

WevAudioRecorder.jsなんていうのもある。
https://higuma.github.io/web-audio-recorder-js/


■問題が。スマホサイトでは使えない。

ひととおり調べてみた限り、スマホではブラウザでの録音ができないっぽい。

https://www.quora.com/How-do-I-record-audio-using-the-iPhone-6-running-on-iOS-8-1-3-microphone-on-the-Chrome-or-Safari-browser

すでにいろいろ試した先駆者がいたようで、いろいろなAPIを駆使したがiphone 6ではsafariから録音ができなかったとのこと。

回答のいち部分を翻訳。


getUserMediaなどrecorder.jsなどのライブラリで使えますが、
mobile Safariは、オーディオキャプチャをサポートしていません
デスクトップブラウザ上で、このための一般的な回避策は、フラッシュを使用することであるが、iphoneではフラッシュが使えません。
そのためゆういつの解決策はネイティブアプリとしてリリースすることです。

オーディオキャプチャをサポートしてないので、できませんよ、と。



PCではできるけど、スマホでできない。

ユーザーが気軽にスマホで遊ぶような録音サイトは作れなさそうかな。



引き続き調査をすすめてる。

 

videoタグでonclick="this.play()"つけるとfirefoxで動かなくなる

なにこの問題。

html5動画でvideoタグ設置していた。

<video id="video" poster="poster1.png" controls preload="none"> 

でもこれだとコントローラーの再生ボタンを押さないとスタートしないので、onclick="this.play"をつけるよね?

<video id="video" onclick="this.play()" poster="poster1.png" controls preload="none"> 

これで画面クリックでも再生が始まる。

と思ったら

たらfirefoxで動かなくなった。

よくよく調べてみると、firefoxでは、this.play()しなくても画面クリックで再生&停止が機能してる。
なるほど、すでにfirefoxでは勝手に便利機能が搭載されていて、それであるがゆえに、クリックすると2重で動き出してバグるみたいな?

んで、結局これで解決↓

<video id="video" onclick="this.play();return false;" poster="poster1.png" controls preload="none"> 


return false; をいれて、クリックがブラウザに届くのを防ぐみたいな。

 
どこにも解決策がでてなくて、stackoverflowとかでも外国の方が困っててだれも解決できてないようにも見えたけど、一応これで僕の環境ではうまくいってる。 

navigator.geolocation.getCurrentPositionがandroidでうまくいってないとき

はまったけど解決がどこにも載っていなかったので自己解決。

位置情報を取得してマップに載せるなどをしたいときに
geolocation APIを使うよね。

if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(
ほげほげ
);

ってやつ。 

これ、pcブラウザやiOS safariでは普通にうまくいってるのに、androidではうまくいかない現象がおきた。
どうやらnavigator.geolocation.getCurrentPositionの部分でエラーが起きているぽい。
geolocationは使えるのにnavigator.geolocation.getCurrentPositionでエラーがおきる。
謎だ・・。
迷宮だ。

いろいろ試行錯誤してみて、解決したのがこれ


enableHighAccuracyオプションをtrueで設定する 


書き方はこんな感じ

if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(
function (pos) {
var crd = pos.coords;
nowlat = crd.latitude;
nowlong = crd.longitude;
},
function (err) {
alert(err.message);
},{
enableHighAccuracy: true,
timeout : 5000
}
);
} else {

}

 navigator.geolocation.getCurrentPosition()

の3番目の引数にはオプションを設定できるんだけども、そこに何もいれていなかったらandroidでうごかなかったところ、上記のようにオプションを加えたらandroidでも表示された。


enableHighAccuracyってなに

enableHighAccuracyというのは、詳しくはしらないけど、GPSを使ってより詳細な位置情報を取得するというオプション設定だ。
その代償としてバッテリーの消耗が激しくなる。

これを使うとGPSを使うというのなら、これをfalseにするといったい何をつかって位置情報をしるの??という疑問は残るものの、 とりあえずこれでandroidも解決!
 
オプションについてやや詳しく書いてあるサイト
Geolocation API


ではお先に失礼します。

「HTML5の今とこれから」スライドをアップしました

3月に勉強会でHTML5に関する発表をしました。
その発表スライドに文章をつけて、スライドだけで読めるようにしたものを
スライドシェアにアップしました。


HTML5アプリに移行するときに使うライブラリとフレームワーク

現在は、iOSもAndroidアプリも、ネイティブで開発が主流です。

しかし、今後数年で、HTML5アプリに置き換わっていくという予測もあります。

じゃぁ、現状はどうするべきかっていうと、ブームになっているのは
ハイブリッドアプリと言われる、ネイティブではブラウザと最低限のデバイス機能だけ用意して、実際の動きはWEB側で行っちゃうっていうアプリ。
(ガワアプリ) 

いずれHTML5になっていくとしても、現在は流通上、AppstoreやGoogle playを経由して配布しないわけにもいかないから、

中味はHTML5でできていて、外側だけネイティブアプリになっている、ハイブリッドアプリで提供するわけですね。



HTML5で作って、簡単にネイティブアプリに変換できるフレームワークの2強が

Phonegap と Titanium mobile

今後のスキルアップ計画としては、こういうものを使いながら、HTML5の力を磨いて、いつか来る、HTML5アプリ時代に活躍できるようにしておくっていうのがいいのかも。


ちなみに、phonegapでもTitanium mobileでも、UIや動きのスピードなどでネイティブに負けてしまうことが多いため、UI部分として、以下の2つが使われることが多いようです。

jQuery mobile

sencha Touch


( ことごとく英語・・)


この4つを覚えてオープンプラットフォーム時代にむけて
スキルアップっすね! 

記事検索


手ぶらで通話 - bluetoothヘッドセット

1時間1円で暖かい。電気毛布。

夏のPC仕事のおともに冷えピタ。クールヘッドで脳のスピードがあがります。

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

info(あっと)tacshock.com
タグクラウド
QRコード
QRコード
  • ライブドアブログ