ブラウザにおける録音及び音声ファイルの生成、転送 – iroha Tech Note
iroha Tech Note 備忘録です。HTML5/JS、Electron(旧Atom-Shell), NW.js(旧node-webkit)、Adobe AIR/Flex、標準化の話などを中心に、日々学んだことを書いていきます。 最近、ブラウザ上での録音、および録音した音声ファイルの生成、転送について調査する機会があったので、まとめてみました。 Chrome, Firefox, Edge における録音 Chrome などのモダンブラウザでは HTML5 の Web Audio API を使用して録音が可能です。 (Web Audio API とはブラウザ上で音声の再生、録音を行う API でモダンブラウザを中心に実装が進んでいます。) 各ブラウザの Web Audio APIのサポート状況 http://caniuse.com/#search=web%20audio 具体的には以下の
JSFLでjson2.jsライブラリを読みこんだら、すんなり使えたというメモ |
WEBブラウザでJavaScriptを組んでいるとJSON.parseやJSON.stringifyがすぐに使えますよね。しかしJSFLで呼んでみたもののそもそも存在していないようです。 そんな中で、JSFLでJSONを扱いたくてjson2.jsライブラリを読みこんでみたら、すんなり使えたというメモです。 素直に実行してみる 実際、素直に書いて実行してみます。 var jsonData = JSON.parse( '{ "test":1234567890 }' ); fl.trace( "jsonData : " + jsonData ); fl.trace( "jsonData.test : " + jsonData.test ); fl.trace( "JSON.stringify : " + JSON.stringify( jsonData ) ); のようなコードを実行すると 以下
JavaScriptでAR。FLARToolKitをJavaScriptへ移植·JSARToolKit MOONGIFT
JSARToolKitはFlash用ARライブラリFLARToolKitをJavaScriptに移植したライブラリになります。 マーカーを使ったARというとマーカーを認識するカメラが必要になりますが、HTML5ではWebカムのAPIはまだ一般的ではありません。そのためFlashを使うのですが、有名なものとしてはFLARToolKitがあります。そんなFLARToolKitをJavaScriptにポートしたのがJSARToolKitになります。 左側が解析前の動画。中央が認識状況、右側がARを反映した処理になります。 こちらも左側が解析前。解析後はマーカーの上に赤いマークが表示されています。 デモ。マーカーの上にFlickrの画像を反映しています。紙を動かしてもきちんと追従するのでまるで紙に写真が描かれているかのようです。 こちらは面白い。物体がマーカーの上でバウンドしています。マーカーに接
TechCrunch | Startup and Technology News
Live Nation says its Ticketmaster subsidiary was hacked. A hacker claims to be selling 560 million customer records. An autonomous pod. A solid-state battery-powered sports car. An electric pickup truck. A convertible grand tourer EV with up to 600 miles of range. A “fully connected mobility device” for young urban innovators to be built by Foxconn and priced under $30,000. The next Popemobile. Ov
TweenX - tween library for haxe
TweenXはクロスプラットフォームで動作する、Haxe向けのトゥイーンライブラリです。オブジェクトの移動先を指定して、モーションさせることを可能にします。
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう - ICS MEDIA
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。 スプライトシートを使う方法 ベクターアニメーションを使う方法 スプライトシートビルダーを使う方法 おまけ：GIFアニメーションを使う方法 おまけ：Flashアニメーションを使う方法 スプライトシートを使う スプライトシートとは映画のコマのようにアニメーションの全コマを画像として用意しておいて、順番に高速に切り替えることでアニメーションを実現する方法です。enchant.jsやCreateJSなど多くのJavaScriptのフレームワークで採用されており、もっともスタンダードな方法です。 表現の再現性が高いう
ExGameの製作で感じたこと
久々のブログが自分語りになって大変恐縮ですが、将来の自分のためにメモしておきます。 自分がExGameの製作を始めたのは2010年11月2日のことです。iPhone上でFlashが一切動かなかった当時、HTML5でFlash Playerを作れば大当たりする可能性は非常に高そうでした。当時のバイト君に技術検証を進めてもらっていて、その結果2010年8月頃には「いけそうだ」という感覚はありました。 しかし、そこから実際の開発に着手するまでに3ヶ月もかかってしまったのです。その期間の逡巡には色々と含蓄がある気がするので、まとめておこうと思います。 まず、HTML5のFlash Playerはその時点で既に存在していました。具体的には「Gordon」というオープンソースと、「Smoke Screen」という個人ベースのソース非公開プロジェクト（後にオープンソースになったらしいです）の二つがありま
jQuery SWFObject
Skip to main content What is the jQuery SWFObject plugin? The jQuery SWFObject plugin is an addon for jQuery that lets you easily embed flash movies on a page. This plugin gives you the best of both worlds; you get the power of SWFObject within the jQuery API. The latest version, 1.1.1, is based on the latest SWFObject version 2.2. The project was started in 2009 with permission from the SWFObject
Toolkit for CreateJS 1.2の新機能紹介 | ClockMaker Blog
Flash ProfessionalからHTML5に書き出す機能であるToolkit for CreateJSの最新版Version 1.2が公開されました。前回のリリースが2012年9月だったので8ヶ月ぶりのバージョンアップとなります。 Flash to HTML5 | Learn more about the CreateJS toolkit ※追記(2014/01/26) : Flash Professional CC 13.1以降では、拡張機能Toolkit for CreateJSは廃止され、同等の機能が「HTML5 Canvasドキュメント」としてFlash Pro CCに組み込まれました。 今回のバージョンアップにおける新しい機能は、リリースノートや試してみたところによると新しい機能は次の通りです。 モーションガイドのサポート マスクのサポート 最新版CreateJSバージョ
CreateJSを使ってインタラクティブなHTML5デモを作ってみた - ICS MEDIA
CreateJS勉強会の参加応募数からも関心の高さがうかがえるCreateJSですが、弊社でも研究をしており今回は制作したデモをいくつか紹介します。 有名な絵画っぽいもの CreateJSとCSSを用いたデモです。カーソルをキャンバス上で動かすと絵が描け、ドラッグするとちょっと3Dっぽい動きをします。絵の描画はCreateJS、3Dっぽい動きはCSSで作っています。絵の描画は重ね塗りし続けると負荷が増大するので、毎フレームキャッシュし描画するコストを減らし最適化しています。 デモはこちらから Box2D Drop CreateJSと物理演算ライブラリ「Box2D」を組み合わせたデモです。マウスでアイコンをドラッグ＆ドロップすることで投げることができます。Box2DライブラリはActionScript版とほとんど同じAPIで用意されているので、ActionScriptのノウハウを活用できます
HTML5関連技術のWebGL(three.js)とFlash(Away3D)のパフォーマンス比較 | ClockMaker Blog
HTML5関連技術であるWebGL (three.js ライブラリを使用)でどれだけのオブジェクトを表示できるのか気になったので、Flash(Away3Dライブラリを使用)とパフォーマンスを比較してみました。WebGL対応ブラウザであるGoogle ChromeやFirefox等でご覧ください。 HTML Demo (Primitive Version) HTML Demo (Primitive Version Ex) HTML Demo (Optimum Version) Flash Demo (Primitive Version) Flash Demo (Optimum Version) 訂正 ※[2013/01/16 23:50追記] 匿名さんやthree.jsの開発者であるMr.doobさんからコメントで、ジオメトリの作成部分で最適化が足りない旨の指摘を頂きました。ジオメトリを無駄
レガシーなWebブラウザにもgetUserMediaを·getUserMedia.js MOONGIFT
getUserMedia.jsはFlashを使うことでレガシーなWebブラウザでもgetUserMediaライクなWebカムアクセスを実現するJavaScriptライブラリです。 HTML5の新しいAPIの一つにWebカムアクセスがあります。そんなWebカムアクセスをレガシなーWebブラウザを含めて使えるようにしてくれるのがgetUserMedia.jsです。 最初です。カメラへのアクセスが求められます。 まずはWebカムの映像を画像として保存します。 さらに顔を認識して鼻眼鏡をつけるアクションです。 getUserMedia.jsではWebRTCに対応している場合はHTML5のgetUserMediaを使い、それ以外の場合はFlashベースのWebカムアクセスを使います。結果は同じように扱えるので、安心してWebカムアクセスできるようになるでしょう。 getUserMedia.jsはJa
CreateJSでスマフォ向けwebアプリを作りました | buccchi.jp
CreateJSを使って「ぬりぬり育成 ジェルミィ」という mixi アプリを制作しました。 のでその感想なんかを。 結論から言うと CreateJS 最高です。 上記QRコードよりスマフォでアクセスしてください。 ※ mixi へのログインが必要となります。 ログインメンドイ！って人はPC体験版をどうぞ。 http://vaseline.jp/nurinuri/ CreateJS でなにができるのか CreateJS には、大きく4つのライブラリが含まれています。 EaselJS canvas を as 的に扱える。as になれてる人ならすんなりいける。 TweenJS アニメーションを制御。なにかしらのトゥイーンライブラリを使ったことがあればすんなりいける。メソッドチェーンで記述できるので直感的。 SoundJS 音を制御。今回は見送り、独自に実装。 PreloadJS 外部ファイルの
JavaScriptからFlashにフォーカスを与えられるよ
こんな記事を見つけたけどそんなことないよ。 Flash上でキー操作をするにはFlashにフォーカスが当たっていなければならない。フォーカスが当たっていない時にJavaScriptからフォーカス出来るか実験してみた。 http://codefairy.org/etc/focus-swf.html結果。 Firefox 3: 一度手でフォーカスを当てる操作をした後だとフォーカス出来るSafari 4: 無理Chrome 2: 無理IE 8: 無理むり！ JavaScriptからFlashにフォーカスを与えられるか この記事ではフォーカスを得られるかどうかを MXML の Application.focusIn イベントで判別してるんだけど、ここに問題がある。 簡単にまとめると、Flash を扱う場合にはフォーカスといっても ブラウザが管理しているフォーカスFlash が管理しているフォーカス
FlashやHTML5で作成されたカードの合成UI・演出のまとめ
もはやコーディングコンテストサイトと化しているjsdo.itですが、いま開催中の SPEC vol.5 はいつもとちょっと違います。 今回は、いつものHTML5・JavaScript・CSSに加えて、ActionScriptでのエントリーもできます！ 「じつはFlashのほうが得意！」という方にも挑戦していただいているんですが、もうすでに続々と面白い作品が集まりだしているので個人的に気になる作品をいくつかご紹介したいと思います。 今回のお題「カードの合成のUI・演出を作ってください」 Flash編 forked from: SPEC vol.5 投稿用コード - wonderfl build flash online forked from: SPEC vol.5 投稿用コード - wonderfl build flash online JavaScript編 ※スマートフォン専用 締切は
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript製FlashPlayer「swf2js」swfをそのままHTML5に変換。 - Qiita
SHAKE blog
kudox.jp
地獄のJavaScriptセキュリティ
KataPad.com is for sale | HugeDomains
