iPhone Safariで動画をインライン再生する方法への反応の中に「音声は？」との声がちらほらありました。 スマホは常にサイレントモードにしてて殆ど音出さないのですっかり頭から抜けていましたが、実験済みでしたので今回は音声付きでインライン再生する方法の話をば。 ##音声をAudio APIを使って同時に再生 最初に思いつくのは動画からDemuxして分離した音声をAudio APIを使って同時に再生する方法でしょう。 実際これで足りる場合もあります。が、足りない場合もあります。 ##VideoとAudioに同時に再生命令を送っても、同じ速さで再生されるかは保証されない 昔々にAviUTLだのTMPGEncだのでエンコしてた人なんかはわかると思いますが、分離された音声と映像は結構かんたんにズレます。 まして今回はVideoをまともに再生していないわけで。 ですからナレーションとBGMのみの
Phaser - Desktop and Mobile HTML5 game framework モバイル/デスクトップ向けのHTML5製の2Dゲームフレームワーク。 Pixi.jsベースでCanvasやWebGLのレンダリングもサポート。 Tags: flash-like 2d sounds collisions physics typescript webgl free cdnjs: //cdnjs.cloudflare.com/ajax/libs/phaser/2.0.5/phaser.min.js Examples - PixiJS ベースとなっている Pixi.js のサンプル。レンダリング結果の雰囲気がつかめる。 HTML5 Game Engines - Find Which is Right For You HTML5ベースのゲームエンジン一覧。比較がしやすい。 Phaser
Update [14/11/11]: Chromium での実装が M40 からあるそうなので、末尾に引用追記させていただきました。 [14/11/12]: この記事を書くにあたって、色々なかたにレビューや助言を頂いたのですが、謝辞などが一切抜けてました、本当にすいません。追記しました、ご協力頂いた方々本当にありがとうございました。 WHATGW Fetch Spec WHATWG のメンテナンスするドラフトに Fetch Spec が追加されました。 もうすでに日本語訳もあります、すばらしい。Fetch Standard 日本語訳 この仕様には二つのことが定義されています。 "Fetching": Fetch するとは何か? の定義 "Fetch API": fetch() の定義 後者の定義に基づく fetch() という DOM API の実装も始まっています。(詳細は後述) しかし
HTML5 の Web Speech API をご存知でしょうか？ ブラウザベースで音声認識とテキストの読み上げを実現する API です。 今回はこの Web Speech API について試したことをまとめてみました。 ちなみに少し前の Chrome では Speech Input API という INPUT 要素に x-webkit-speech という属性を記述するのみで、手軽に音声認識を実現できるという機能がありましたが現バージョンでは廃止されてるようです・・・ Web Speech API の対応ブラウザは Can I Use よりご確認ください。 テキストの読み上げを行う Speech Synthesis API Speech Synthesis API を使用すると、指定したテキストを PC に読み上げさせることできます。 使い方は非常に簡単で、new SpeechSynth
HTML5 の DOCTYPE 宣言 <!DOCTYPE html> ですが、今までなんとなく「どーせ IE6 では互換モードなんでしょー」って感じで生きてきたんです。 ごめんなさいごめんなさい＞＜ サンプルコード 確認してみてください <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5 の DOCTYPE 宣言とレンダリングモードのテスト</title> </head> <body> <h1>HTML5 の DOCTYPE 宣言とレンダリングモードのテスト</h1> <dl> <dt>CSS1Compat</dt> <dd>標準モード</dd> <dt>BackCompat</dt> <dd>互換モード</dd> <dl> <script type="text/javascript">alert(docume
RFC5322で定義されているメールアドレスの書式を完全にサポートすることは簡単ではありませんが、適当な正規表現を紹介してOKとする記事があとを絶ちません。 HTML5には input[type=email] という要素があり、メールアドレスの書式チェックをクライアントサイドで行えるようになっています。このチェックでは、下記の(Perl5の記法にならった)正規表現を使っています。 /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/ 注釈に この要件は電子メールの構文を定義するRFC5322に対して 意図的に違反 (willful violation) している。 とあるように、仕様を完全に満足する正規表現ではありませんので、電子メールヘッダを解析するような本格的な用途に対しては不十分ですが、WEBサ
File API で作成した blob をダウンロードする
この記事は “HTML5 Advent Calendar 2012” の16日目の記事です。他の記事もぜひご覧ください。 HTML5 では BlobBuilder オブジェクトを作成して、ファイルをメモリ上に読み込んだり、あるいはユーザーの入力やサーバーから取得したデータを元にしてメモリ上にファイルの内容を作成することが可能です。また作成した Blob は XML HTTP Request (XHR) の FormData としてサーバーにアップロードすることも可能です。 ではメモリ上の Blob をローカルに保存したい場合、どうすればよいでしょうか。Web ページのスクリプトから直接ローカルのファイル システムを操作する File System API (File API: Directories and System と File API: Writer) の標準化について議論が進めら
This is still a work in progress feel free to make changes you think would improve it. Before you start To understand this article, it is recommended to be comfortable with JavaScript, the Canvas API and the DOM API It's even better if you are also familiar with SVG. Although it's not trivial (for security reasons), it's possible to draw DOM content—such as HTML—into a canvas. This article, derive
Translation of: What Does It All Mean? - Dive Into HTML5 Diving In The Doctype The Root Element The <head> Element Character Encoding Friends & (Link) Relations rel = stylesheet rel = alternate Other Link Relations in HTML5 New Semantic Elements in HTML5 A long digression into how browsers handle unknown elements Headers Articles Dates and Times Navigation Footers Further Reading 訳注 Diving In この章で
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 調べつつ社内向けに書いたけど別に競争的な内容(わらい)を含んでないのでインターネットの皆様でお役立てください。 いわゆる情報量が低い記事となっておりますので、各位共々よろしくお願いいたします。 追記 この記事はネタをネタとして楽しめる子供のインターネットとしてお楽しみください dis られたので、真面目に考えてみた。 幸せになりたいソーシャルゲーム系Webフロントエンドエンジニアが本気で考える HTML GUI ツール第一回 よーけんてーぎー HTML + CSS の職人技を軽減させる 視覚的に HTML の構築と CSS のスタイリン
2024/09/10 (2024年09月 のアーカイブ) NT 東京 2024 に出展しました かつて開催されていたシンセビルダーズサミット常連の山下さんからお誘いがあったので、先週末 9月7～8日は東京都千代田区北の丸公園の科学技術館で NT 東京というイベントに出展してきました。 イベント名称 : NT 東京 2024 日時 : 2024年9月7日 (土)・8日 (日) 開催 両日とも 10:00 ～ 17:00 会場 : 科学技術館 イベントホール 主催 : NT 東京実行委員会 「NT」というのは「なんか作ってみた」という意味でこだわりがありつつも割と緩目のモノづくりの成果物を展示するイベントで全国各地で開催されています。会場の空気としてはメイカーフェアに近いのだけどよりももう少し緩い感じ。ジャンルはロボット関係、音関係、光りもの関係、3Dプリンタ等多岐にわたります。 という事で音
WebGLのシェーダープログラムで音声処理をしてみるというのを数日前から試してみたりしているのですが、結論から言えば今のところたいして良い結果は得られていません。それなりのGPUを積んだPCならJavaScriptで書いたよりは速い程度で動くのですが、グラフィックチップが非力なノートなんかでは酷い事になったりします。 まあせっかくなので、メモ代わりに一応公開しておきます。 https://github.com/g200kg/WebGL-Audio-processing これは、平面上の波の伝播の物理シミュレーションをWebGLでやってそこに音信号を通してみるという実験で、プレートリバーブの物理モデリングみたいなものです。浮動小数テクスチャーを使ってRGBの各面をそれぞれ点の変位、点の速度、出力バッファとして使うというような事をやっています。残念ながらサンプル単位で順次処理が必要な関係でGP
English | Japanese WebSequencer is a MIDI sequencer written in HTML5/Javascript. Chrome is recommended. WebSequencer can load up-to four WebMidiLink compatible Web-synths. MIDI files can be loaded by 'LoadFile' button or FILE-DROP. The created song can be saved from the 'SAVED-FILE' link after clicking the 'SaveFile' button. In addition, the song can be direct linked form 'SAVED-URL'. The link to
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
