ヤター！ウェブブラウザで動くシンセできたよー - aike’s blog
最近のHTML5やWebブラウザのAPIの進化はけっこうすごくて、普通にサウンドプログラミングもできるようになってきました。そんなわけでシンセサイザーアプリを作ってみました。 サウンドを扱う方法はいくつかあるみたいですが、Google Chromeで使えるWeb Audio APIがEQやディレイなどあらかじめ用意されていて良さげなので使いました。 http://aikelab.net/websynth/ まだ、バグもけっこうあるのでじょじょにブラッシュアップしていきます。 Chrome以外では動かないと思うので試せない人はこちらの動画をどうぞ。 Google API Expertが解説するHTML5ガイドブック 作者: 羽田野太巳,白石俊平,古籏一浩,太田昌吾 出版社/メーカー: インプレスジャパン 発売日: 2010/09/16 メディア: 単行本（ソフトカバー） この商品を含むブログ
HTML5 で作る iPhone ローカル Web アプリ入門
さて、まず「ローカル Web アプリ」ってなんぞっていう話ですが、Web ベースの技術で作られブラウザからサーバにアクセスして利用するものの、いったんロードが完了したら、それ以降はネットワーク接続不要で動作する Web アプリ、といった概念を表した造語です。 iPhone の App Store を経由することなく配布が可能なので、アプリの内容について一切の制限がなく、また、最近のライブラリの進歩やモバイルパフォーマンスの向上により、ものによってはネイティブアプリと遜色ないレベルのものも作れるようになってきました。 先日、1 Click Config (閉鎖済) (解説記事) を作って公開しましたが、これがまさにローカル Web アプリとして動作しています。 ここで使われている技術の各論についてはそれぞれ詳しく書いたサイトがあるのですが、これらの技術をひとまとめに紹介しているサイトが見当た
HTML5のvideo/audio＋JavaScript APIテクニック
HTML5の＜video＞や＜audio＞タグとJavaScript APIで、自由に動画や音声を楽しもう。カスタムのビデオプレイヤーだって作れる video/audio要素のAPIやイベントを利用する video/audio要素は、JavaScriptを用いた細かい制御を行えるのも特徴の1つです。 カスタムのビデオプレイヤーを作ることも容易ですし、動画からフレームを切り出してCanvasに投影し、グラフィックとして取り扱う、なんてテクニックもあります。 今回は、そうしたJavaScript APIの利用方法について見ていきましょう。なお、この記事は2011年5月25日版の仕様に基づいています。 video/audioに共通のメソッド、プロパティ video要素とaudio要素は、メソッドやプロパティの多くが共通です。そうしたメソッドやプロパティを表すのが以下の一覧です。 MediaErr
Surfin' Safari - Blog Archive » Running scripts in WebKit
Posted by Tony Gentilcore on Friday, September 17th, 2010 at 10:10 am WebKit nightly builds now support the HTML5 async and defer script attributes. This makes it easier for web pages to load faster by downloading JavaScript without blocking other elements of the page. Normally when the parser encounters an external script, parsing is paused, a request is issued to download the script, and parsing
scriptのdefer/asyncを理解し、ページの高速化方法を探る | ゆっくりと…
Yslow ルールでは、スクリプトはページの最後尾、つまり </body> 直前に置け、と言っています。なぜなら、スクリプトの読み込みや実行により、他のページ要素の読み込みやレンダリングがブロックされてしまうからです。 一方、古くは IE4 の時代から Microsoft はこの問題に対処するため、defer 属性という独自の解決策を実装してきました。これは HTML 4.01、XHTML 1.0、1.1 で仕様として採用され、HTML5 にも発展する形で引き継がれています。 IE 以外のブラウザも既に対応されており、IE の独自仕様という色合いが濃かった従来と異なり、これからは広く利用されていくのではないかと思います。 下のビデオは、スクリプトの位置と defer 属性のあり／なしによる、ページの読み込み／表示速度の違いを Pagetest.com でテストしてみたもので、明らかな差異が
Cloud9 - Your development environment, in the cloud
AWS Cloud9 is a cloud-based integrated development environment (IDE) that lets you write, run, and debug your code with just a browser. It includes a code editor, debugger, and terminal. AWS Cloud9 comes prepackaged with essential tools for popular programming languages, including JavaScript, Python, PHP, and more, so you don’t need to install files or configure your development machine to start n
Flash?いいえ、HTML5です: ファイルのドラッグ&ドロップによるフォトアップロード機能について - mixi engineer blog
はじめまして。コミュニケーションサービス開発部の澤と申します。コーヒーとカレーをこよなく愛する新卒2年目の新米エンジニアで、弊社Webのフロントエンドを主に担当しています。最近はmixiスマートフォン版(mixi Touch)の開発にも精力的に取り組んでいます。 さて、本日はPC版のmixiで1つの機能をリリースいたしました。ファイルをWebブラウザにドラッグ&ドロップするだけで写真をmixiフォトにアップロードできるもので、HTML5 File API※1を採用しています。本記事ではこの機能について色々とお話をしたいと思います。 なにこれ? 以下では、ドラッグ&ドロップによるアップロード機能を「本機能」と呼びます。 百聞は一見にしかずです。本機能のプロモーションムービーがありますので、まずはこちらをご覧ください。 動画では下記を説明しています。 従来のアップロード方法からドラッグ&ドロッ
Impact - HTML5 Canvas & JavaScript Game Engine
The Awesomest Way to Create Even More Awesome HTML5 Games! Impact is a JavaScript Game Engine that allows you to develop stunning HTML5 Games for desktop and mobile browsers. I’ve tried four other JavaScript game engines, and this is the first one I’ve used that makes sense (…) Impact is the first truly professional-grade JavaScript and HTML5 game engine to hit the market. Game Developer Magazine,
video + canvas = magic | HTML5 Doctor
You’ve already learned about the <video> and <canvas> elements, but did you know that they were designed to be used together? In fact, the two elements are absolutely wondrous when you combine them! I’m going to show off a few super-simple demos using these two elements, which I hope will prompt cool future projects from you fellow web authors. (All of these demos work in every modern browser exce
An introduction to the Canvas 2D API | HTML5 Doctor
If the alt;video width="300" height="150"> element is the poster boy of HTML5, then <canvas> is definitely Danny Zuko. The <canvas> element is (still) part of the HTML5 specification, but the 2D drawing API has been moved into a separate document (in case you go looking and can’t find it). <canvas> has a wealth of features, like: drawing shapes, filling colours, creating gradients and pat
Closure Library でローカルファイルのドラッグ＆ドロップを実装する - WebOS Goodies
簡単なサンプルを作ってみましたので、ファイルのドラッグ＆ドロップをサポートしたブラウザ（現時点では Google Chrome, Safari, Firefox のいずれか）で試してみてください。灰色の部分に適当なファイルをドラッグ＆ドロップすると、そのファイル名を表示します。複数のファイルをドロップすることも可能です。 ソースコードは以下のような感じです。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ファイルのドラッグ＆ドロップのテスト</title> </head> <body style="margin:0; padding:0;"> <div id="droptarget" style="width:100%; height:200px; background-color:#eee;"> ここにドラッグして
jsdo.it
Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovrai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovrai a
The All-In-One Almost-Alphabetical Guide to Detecting Everything - Dive Into HTML5
The All-In-One Almost-Alphabetical Guide to Detecting Everything (Confused? Read Detecting HTML5 Features for a conceptual introduction. Want an all-in-one library instead? Try Modernizr.) <audio> return !!document.createElement('audio').canPlayType; <audio> in MP3 format var a = document.createElement('audio'); return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, '')); <audio> in
Modernizr: the feature detection library for HTML5/CSS3
MENURespond to your user’s browser features.Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer.Add your detects Development build What is Modernizr?It’s a collection of superfast tests – or “detects” as we like to call them – which run as your web page loads, then you can use the results to tailor the experience to the user. Why do I need it?All web develope
iPhoneがJavaScript＋SQLiteでGPSレコーダーに！ (1/5)
JavaScriptを使ってGPSデータを取得できるようになったiPhone OS 3.0。前回は、現在の位置情報を取得し、Googleマップに表示する方法を紹介しました。後編は、位置情報と日時をデータベースにどんどん記録していくプログラムを作ってみましょう。 Safariのデータベースを使う iPhoneに搭載されているSafariは、HTML5で追加される予定のAPI「Client-side database storage」を先行実装しており、ブラウザーが用意しているローカルデータベースにJavaScriptを使ってデータを保存できます。 iPhoneのSafariはデータベースエンジンとして「SQLite」を実装しています。SQLiteは、SQLのすべての命令には対応していませんが、簡単なWebアプリケーション用途であれば十分な機能を持つデータベースエンジンです。個々のテーブルは「
Opera News
Opera collaborates with Brazilian female artists to bring new Themes to your browser March 13th, 2025 We're adding two new Themes to Opera One that we made in collaboration with Brazilian artists Aline Bispo and Naia... Desktop 10 lucky winners among 35,000 participants off to browse from the Norwegian Hygge Desk of... March 12th, 2025 Hey there! The results are in and it’s time to announce the wi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマートフォンにおけるHTML5実装の最先端@Developers Summit 2012
Game Closure
HTML5 Boilerplate: The web’s most popular front-end template
Google Code Archive - Long-term storage for Google Code Project Hosting.