http://tily.no.de/telephone トップページ、部屋とニックネームを決めて開始する http://tily.no.de/telephone/sandbox 手軽に試す用 電話というか音声チャットなんだけど、Flash のマイクでとった音声を WebSocket 経由で送信して、受け取った側では Web Audio API とか Audio Data API とかで再生するというのを作った。Firefox と Chrome で動く。 はずなんだけど、no.de の SmartMachine のスペックが低いせいか、遅延のあるせいか相手側の音声がブツブツ切れて聴こえてしまう…。ローカルではちゃんと音声チャットっぽいことができているんだけど。 なんか色々他の人のコードを使ったり参考にしたりしたので書いておきます。 socket.io サンプルのチャットプログラム デザインと

HTML5を解釈してくれる最近のブラウザでは、キャッシュマニフェストという機構を利用してオフラインWEBアプリケーションなどが存在しています。この機能を利用して、通常のWEBコンテンツでも画像、CSS、JavaScriptなど、ブラウザ側でキャッシュさせて、本来オンラインで取得すべきデータのみにアクセスさせ、高速にコンテンツを表示させましょう。 マニフェストファイルを認識させる設定 キャッシュさせる内容を記述したファイルをマニフェストファイルと呼びます。このマニフェストファイルをサーバから提供し、クライアントのブラウザで正常に解釈ができるように設定を追加する必要があります。ApacheをはじめとしたHTTPサーバの設定ファイルに下記の様に設定するか、.htaccessなどのファイルに追加してください。 AddType text/cache-manifest .manifest マニフェスト

はじめに ブラウザ間でP2P通信が実現できれば、ブラウザ上で動作するP2Pアプリが作れて面白そうだなーと思ったのでWebSocketを使って実現してみました。仕組みについては以下で説明していきますが、私が実現した方法は限定的で実用性が低く色々と足りない部分もあるので、軽い気持ちで読んで頂けるとありがたいですw 仕組みの概要 なぜWebSocketを使うのか 従来、Webサーバとクライアント(Webブラウザ)間で非同期に通信するにはXHR(XMLHttpRequest)を用いてきました。基本的にこのXHRは以下の図のように同一ドメインとしか通信できないという制約がありました。*1 しかし、WebSocketのthe Origin-based security modelでは異なるドメインとも通信することが可能になります。WebSocketプロトコルでは、サーバとクライアント間で接続を確立する

先日作成した「関西電気保安協会リズムマシーン」と「ONE-LINER-ORCHESTRA」が Chrome, Safari *1 (Web Audio API) Firefox (Audio Data API) Opera (HTMLAudioElement) で使えるようになりました。 どちらも pico-player.js っていう拙作ライブラリを使っているんだけど、普通に便利なので紹介します。 https://gist.github.com/1342081 CoffeeScriptで書いてコンパイルしています。もうJavaScript書けなくなってきました。 2011/11/08追記 別タブ選択時に音が途切れる減少を解消しました。 関連記事： http://d.hatena.ne.jp/mohayonao/20111108/1320756534 2011/11/07 追記 Coffe