Web Audio APIを恐ろしく簡単にする「Tone.js」で音楽プログラミングを試してみた！ : うえぶはっく
「Web Audio API」を使うと音声の「再生」だけでなく、音の「生成」や「加工」などもJavaScriptだけで手軽にプログラミングすることが出来るようになります。 ただ、ちょっとクセがあるので「扱いにくい…」と感じる人も少なくないでしょう。 そこで、誰でも簡単に「Web Audio API」を活用できるJavaScriptライブラリ「Tone.js」について、今回は簡単なサンプルと共にご紹介しようと思います！ ファイルを準備しよう！ まずは、「Tone.js」を使ったサンプルを作るのに必要な「index.html」と「app.js」を用意しましょう。 「Tone.js」自体は、GitHubからダウンロードするか、以下のURLから利用可能です。 https://tonejs.github.io/build/Tone.min.js ひとまず、「index.html」はこんな感じでOKで
XSound - Web Audio API Library for Synthesizer, Effects, Visualization, Recording ... -
XSound - Web Audio API Library for Synthesizer, Effects, Visualization, Recording ... - NEW !! XSound 2.0 がリリースされました. 以下の変更が加えられています. ES5 から ES2015 ~ へコードの書き換え const, let アロー関数式 class 構文 ES Modules ... etc ESLint によるコード検証 webpack によるビルド環境 つまり, 内部が変わっただけで, 外部, すなわち, API は 1.x と同じです. コードリーディングしやすくなったことで, issue をたてたり PR を送ったりする敷居を低くしました. XSound とは ? Web Audio API のライブラリの1つで, サウンドの生成 ワンショットオーディオの再生 楽曲
【Service Worker最前線】仕様策定の現場で何が議論されているのか？
【Service Worker最前線】仕様策定の現場で何が議論されているのか？ 安田 絹子 昨年末頃からホットなトピックになりつつある「Service Worker[1]」ですが、その先行実装が落ち着いてきた今夏、仕様に対する提案や今後の方向性などについて話し合うF2F（Face-to-Face）ミーティングがサンフランシスコで開かれました。本稿では、このミーティングの様子を中心に、Service Workerの最近、そしてこれからの論点をいくつか解説してみたいと思います。 Service Workerは昨年5月に最初のドラフトが公開されたばかりの新しいAPIですが、Webの前提を変える可能性を持った基盤APIとして注目されています。Service WorkerはあくまでWebの1つのAPIにすぎませんが、このミーティングではWebのこれからの方向性を考える上でも興味深い議論がいくつかなさ
YouTubeがFlashを排除し、HTML5の最後の障害を取り除いた - 週刊アスキー
公式な発表だ：Flashは失速し、HTML5の勢いは止まらない。 サービス開始から10年、YouTubeは1月27日、Adobe Flashをデフォルト・プレイヤーの座から引きずり下ろした。それに代わって、同サイトは延々と出てくるネコの動画や、テイラー・スウィフトの「歌ってみた」、映画の予告編などを再生するのにHTML5をデフォルトに設定すると発表した。 数年前にはその動きは考えられなかったことだろう。2010年、アドビはオンライン動画の約75％がFlashを使用していることを誇っていた。しかし、昨年の時点でHTML5が80％以上のシェアとなり、その人気は強固になったようだ。 YouTubeにとってこの変更は自然なことと言えそうだ。5年前、アドビがトップの座を誇っていた頃、同サイトはHTML5をオプションとして提供し始め、今回の変更の基礎を築いた。実際のところ、ほとんどのユーザーにはおそら
紙面に近づけたい！HTML＋CSSで作る文字レイアウト12個 | PRESSMAN*Tech
印刷する紙のデザインと異なり、Webデザインは環境によって見た目が変わります。どの環境でも同じレイアウトで見せるには画像として書き出せば確実なのですが、テキストの部分はそうもいきません。 DTPデザイナーの方からも「こんな文字のレイアウトはWebだと無理？」といったご相談を受けることがよくあります。 今年に入って、HTML5＆CSS3に対応したブラウザのシェアもかなり増えてきましたので、今回は文字のレイアウトに関するHTMLとCSSをご紹介したいと思います。 目次：段組み縦組み（縦書き）行末揃え（両端揃え）先頭文字スタイル（ドロップキャップ）段落先頭1字下げ2行目から1字下げ（ぶら下げインデント）行頭禁則文字ふりがな（ルビ）圏点（傍点、脇点）大文字と小文字の変更スモールキャップス（スモールキャピタル）長体、平体（水平比率、垂直比率）※IE以外のブラウザは、2014年7月4日現在の最新版にて
スマートフォン向けのHTML5製フレームワーク・Lungo.js
今更ですけどLungo.jsを少し触って 見ました。Lungo.jsはHTML5+CSS3の スマートフォン向けフレームワーク です。jQueryやmootoolsなどを必要 としない非依存型のライブラリです ので覚えておいて損は無いかも。 スマフォ向けフレームワークです。GPLv3ライセンスでOSSとして公開されています。 スマフォ向けのフレームワークは相当出回っていますので珍しくないかもですけど・・触った感じはなかなか使いやすそうでした。コアファイルは非圧縮で40kbほど。 以下、公式サイトのサンプルです。 Sample スターターキット的にも使えそうです。 ↑ 実機でのスクリーンショット この手のは沢山あるので好みで選べばいいですね。詳細は以下でどうぞ。 Lungo.js
HTML5はなぜ重要なのか？
図1 アップルやグーグル、アマゾンやマイクロソフト、フェイスブックといった企業が、ネットとコンピュータが融合する時代のこれからを占うべく激しく競合している。 ことの始まりは、1990年代のなかば、PCの画面の中で起こったことだ。フューチャーウェーブ・ソフトウェアという会社が、画期的なアニメーションの作成ソフトとWebプラグインを作り、これをマクロメディアが買収して「Flash」となった。それまで、文字と写真がほとんどだったWebの画面に、ゲームのような滑らかさでイラストが動きだしたのだ。いわゆる「RIA」（Rich Internet Application）という、Webだけで立派なアプリが作れる世界になってくる。 やがて、「Flash MX 2004」というバージョンが登場して、アニメーションと一緒に動画までをも扱えるようになる。実のところ、2005年にスタートした「YouTube」のヒ
Adobe Edge プレビュー 版 5 公開 - akihiro kamijo
HTML5 アニメーション作成ツールの Edge プレビュー 5 が Adobe Labs に公開されました。 （Edge@Labs） HTML5 に対応しないブラウザのサポートなど、数多くの機能が追加されています。リリースノートによるとサポート環境は少し減りました。サイトの記述では変わってませんが、Vista をお使いの方は注意した方がよいかもしれません。 ダウンロードはこちらです。 （Edge@Labs Download） プレビュー版 4 からランタイムが変更されているため、以前のバージョンで制作したコンポジションは、そのまま動かないこともありそうです。 プレビュー版 5 の主な新機能は、以下の通りです。 パブリッシュ関連 ｊQuery を Edge コンポジションと一緒にパッケージするか、CDN からダウンロードするかを選択できる HTML5 をサポートしない IE8 等のブラウザ
Mozilla、オープンモバイルプラットフォーム「Open Web Device」を発表
Mozilla、オープンモバイルプラットフォーム「Open Web Device」を発表：年内に搭載端末が登場？ Mozillaとスペインの大手キャリアTelefonicaは2月27日（現地時間）、バルセロナで開催のMobile World Congress（MWC） 2012において、HTML5ベースのオープンモバイルプラットフォーム「Open Web Device（OWD）」を発表した。年内に搭載端末が登場するという。 このプラットフォームは、MozillaのオープンモバイルOS「Boot to Gecko（B2G）」をベースにしており、完全にオープンソース化される。アップデートなどのプラットフォームの管理や関連アプリストア（後述）の運営はMozillaが担当する。 プロジェクトには米Qualcomm、米Adobe Systems、米Facebookも参加。Qualcommは同プラット
HTML5 Canvas
HTML5はWeb開発に革命をもたらすとも言われています。本書ではHTML5の機能で最も注目されているCanvasについて学びます。Canvasを使った2Dオブジェクトの描画、テキストレンダリング、画像・映像・音声処理、WebGLによる3Dアニメーション。これらすべてのトピックをインタラクティブなサンプルとともにわかりやすく解説します。Canvasの機能を最大限に引き出すためのアルゴリズムを扱っているので実践手法や応用力も身につきます。Canvas 2D APIのすべてを網羅しているのでリファレンスとしても好適です。 目次 訳者まえがき まえがき 1章 Canvas入門 1.1 HTMLページの基礎 1.1.1 <!DOCTYPEhtml> 1.1.2 <htmllang="en"> 1.1.3 <meta charset="UTF-8"> 1.1.4 <title>...</title
FlashからHTML5へ! マイクロソフト、FF XIII-2サイト開発裏話を紹介
日本マイクロソフトは12月20日、スクウェア・エニックスと共同で展開しているFINAL FANTASY XIII - 2(以下、FFXIII-2)とInternet Explorer 9(以下、IE9)のキャンペーンサイト「モーグリのツイートキャッチ」を紹介する説明会を開催。キャンペーンサイトの概要や、開発裏話が披露された。 モーグリのツイートキャッチは、FFXIII-2の中で登場する「モーグリ投げ」を模したキャンペーンサイト。Twitter上で投稿されたFFXIII-2に関するつぶやきを収集し、それらを位置情報と関連付けながらランダムに表示する機能を搭載している。現在地から方角を決めてモーグリを投げる(ドラッグする)と、その方角でつぶやかれた投稿をモーグリが収集してくる。ゲームと同じ演出が使われており、同様の世界観を味わうことができる。 収集したツイートは、Collection Boxに
HTML5やクラウドなどを使えばここまでできる「モーグリのツイートキャッチ」
一見するとフツーのよくあるキャンペーンサイトですが、Flash・Silverlight・Javaといった追加プラグイン的なものを一切使っておらず、その裏側ではHTML5のCANVAS・SVG・Geolocation要素など使えるものを使いまくっており、しかもクラウドやCDN(コンテンツデリバリネットワーク)をバックグラウンドで使用、見た目よりもはるかに技術的にがんばりまくっている……というサイトがこの「モーグリのツイートキャッチ」です。 モチーフとしては、「FinalFantasy XIII-2」にてモーグリを投げ飛ばして遠方のお宝を探索させる「モーグリ投げ」をちょっと違う形で再現しており、このモーグリ投げによってネット上からTwitter上のツイートを集めてくることが可能になっています。もちろんツイートを集めるためにAPIを叩く際にもがんばっていろいろ工夫しています。 Internet
情弱なはてブ民にも判りやすく HTML5 vs Flash のこと教えてやる
(ここで言うHTML5はcss3とJavascriptも含めた技術全体の事、逆にFlashはAir等の派生技術は含めないブラウザ上のFlashPlayerの技術のみを指します。） ウェブに携わる人間には常識だけど、HTML5は何でも出来るスーパーヒーローではない。 どちらかというと、中日の高木とか、ヤクルトの宮本とか、巨人の川相とかの方が近い。知らないやつはググれgoogle:いぶし銀。 HTML5の真骨頂は、昨今のリッチなインターネットコンテンツを、非常に簡潔にスマートに記述できるところにある。複雑な事をすれば凝った事もある程度できるけど、得意分野じゃない（標準APIが機能不足だし、JavaScriptの言語仕様が複雑な処理に向いていない）。 ブラウザだけでここまで出来る、とか、 Flashはもういらない、とか、 ってのは、川相だって筋肉付ければホームラン打てるようになるし清原はもういら
IE6〜8でのHTML5の印刷を適切にサポート·IE Print Protector MOONGIFT
IE Print ProtectorはIE8以前のWebブラウザでHTML5サイトの印刷をサポートするライブラリ。 IE Print ProtectorはIE用、JavaScript製のオープンソース・ソフトウェア。HTML5/CSS3になって、HTMLの表現力があがった。それに伴って新しいタグが幾つも追加されている。新しいWebブラウザであれば問題はないが、HTML5非対応のWebブラウザにとっては大きな問題だ。 表示 その最たるものがIEではないだろうか。未だに企業によってはIE6を使っている場合もある。そんなレガシーなWebブラウザでも印刷時の問題を解消してくれるのがIE Print Protectorだ。 IE Print ProtectorはJavaScriptを使って印刷時の問題を解消する。IE Print Protectorを読み込んでいない状態と、読み込んだ時とで印刷プレビ
コーディングとSEOの概念が変わるかもしれない、Microdataについての概要 - kojika17
6月2日、Google、Microsoft、Yahoo!の検索大手3社が協力して、構造化データマークアップの標準化に乗り出しました。 長期的な最終目標は、幅広いフォーマットのサポートとしているようですが、まずはHTML5のMicrodataに集中するようです。 Microdataが新しいWebの歴史の礎の1つとなるかもしれません。 以前にも「MicrodataとMicroformatsの違いについて」取り上げましたが、今回は実際にMicrodataでどうなるのか、ご紹介致します。 Microdataとは何か？ マークアップ言語であるHTMLは「見出し(h1,h2,h3... )」「段落(p)」「リスト(ul,ol,li)」などの文章構造を示すことができても、「人の名前」「肩書き」「地域」などを示すことができません。 それらをHTMLでメタデータとして追加する方法のひとつとして、HTML5の
HTML5に関する「IE9の限界」とIE10への期待 (1/2)
sponsored TUF Gaming＆DualのRTX 4080 SUPER/4070 Ti SUPER/4070 SUPERをベンチマーク 前世代から40％アップも！RTX 40 SUPERシリーズ搭載ASUS製カードの進化がスゴイ sponsored 通信を高速化するチャンネル幅設定、メッシュWiFi構成時の注意点、SSIDの「NATモード」まで 知っておくと役立つNETGEAR Insightの便利設定《ネットワーク構成編》 sponsored 写真／動画編集のプロにピッタリ！ なタワー型PCがマウスコンピューターの決算セールで特価に sponsored 165Hz対応液晶＆Core i7＆GeForce RTX 4050！ 本格ゲーミングノートがセール中！ sponsored ROG Swift Pro PG248QPレビュー リフレッシュレート540Hzって見極められる!?
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【やじうまPC Watch】 HTML5でできたドラムマシンが公開される
HTML5のW3C正式勧告に完全対応、読みやすい分かりやすい使いやすいと三拍子揃ったHTML5&CSS3のリファレンス本
TechCrunch | Startup and Technology News
スマートフォンにおけるHTML5実装の最先端@Developers Summit 2012