タグ

ブックマーク / qiita.com/mohayonao (9)

  • 別タブを選択しても精度の落ちないタイマー - Qiita

    JavaScriptで定期的な処理を行う場合、window.setIntervalを使いますが、ChromeやFirefoxのwindow.setIntervalは別タブを選択すると精度(実行間隔)が落ち、例えばゲーム音声処理などで精度を保ちたい場合に問題になることがあります。 WebWorkersを使ってバックグラウンドでタイマーを動作させると、別タブを選択しても精度の落ちないタイマーを作ることができます。 var MutekiTimer = (function() { var MutekiTimer = function() { initialize.apply(this, arguments); }, $this = MutekiTimer.prototype; var TIMER_PATH = (function() { var BlobBuilder, URL, builder

    別タブを選択しても精度の落ちないタイマー - Qiita
    efcl
    efcl 2018/04/05
    WebWorkerでmタイマーを回すとバックグラウンドでも精度がオチないという話
  • AudioWorker を試してみる - Qiita

    2016.09.08 追記 AudioWorkerは編纂中の仕様から削除されました。Web Audio API先生の次回作AudioWorkletにご期待ください!! Web Audio API には ScriptProcessorNode という、JavaScript で信号処理を記述するための部品があります。Web Audio API で用意されている部品の組み合わせではやりようがない処理をしたいときに重宝するのですが、最新のドラフト仕様では DEPRECATED となっていて将来的には廃止されるようです。 そして廃止される ScriptProcessorNode に変わって提案されているのが AudioWorker という仕組みで、ScriptProcessorNode との大きな違いとしてメインスレッドで行っていた信号処理をワーカースレッドで行うようになります。また、任意の Aud

    AudioWorker を試してみる - Qiita
    efcl
    efcl 2016/01/05
    Web Audio APIのAudioWorkerについて。
  • 背景をCanvasにする - Qiita

    背景をCanvasにしてグリグリ動かすとインパクトがあって良い。(これとかこういう感じ) 少し工夫しないとCanvasが前面に来てボタンの操作とかができなくなるので、下記のようなHTML/CSSを書いてやる。 <body> <canvas id="canvas"></canvas> <section id="body> /* 実際のbodyはここに書く */ </section> </body> #canvas { position:fixed; top:0; left:0; width:100%; height:100%; } #body { position:absolute; top:0; left:0; }

    背景をCanvasにする - Qiita
    efcl
    efcl 2015/07/30
    背景をCanvasにする話
  • Web Audioの新しいAPIについてざっくり解説 - Qiita

    Web Audio API の仕様は日々 GitHub上で議論 されていて、ある程度同意が得られたものは ドラフトページ で公開されています。仕様のブラッシュアップのほかに追加される API や変更のある API があり、それらはちらほらとブラウザに実装もされてきているので、簡単な説明とサポート状況、ポリフィルについてまとめました。 この記事に書いてあるポリフィルは下記のリポジトリにまとめてあります。 また、各API対応状況は下記のページでも確認できます。 http://mohayonao.github.io/web-audio-api-shim/test/impl.html http://compatibility.shwups-cms.ch/en/home Microsoft Edge / Safari 9 の対応状況が調べられていないので、どなたか情報ください!! 新しく追加されるA

    Web Audioの新しいAPIについてざっくり解説 - Qiita
    efcl
    efcl 2015/06/30
    新しく増えたWeb Audio APIとそのpolyfillについて
  • 4パターンのWebWorker生成方法とインラインワーカーの技法 - Qiita

    WebWorker の作り方を4つ紹介するついでに、ライブラリ作るマンから見た それぞれの所感 と node.js でも動かせる & テストしやすい インラインワーカーの技法 について書きます。 1. 外部のワーカーファイルを読み込む 基のやり方。 一番わかりやすいので良いけど、ライブラリとして配布することを考えると複数ファイルの管理をする/してもらうのが面倒い。ライブラリの中で書くならワーカーのパスは設定で変更できるようにしたほうが良い。 シンプルでわかりやすい 管理が面倒い var worker = new Worker("worker.js"); worker.onmessage = function(e) { console.log(e.data); // (3) hello!! }; worker.postMessage("hello"); // (1)

    4パターンのWebWorker生成方法とインラインワーカーの技法 - Qiita
    efcl
    efcl 2015/03/17
    WebWorkerの生成方法についてのまとめ
  • ES7 の Async/Await を使ってみた - Qiita

    Taming the asynchronous beast with ES7 babel の experimental に ES7 の Async/Await が入ったというので、さっそく導入してみた。対象は画像を点字を変換するわりかしどうでも良いモジュール。 seurat - JavaScript utility to generate a braille text from an image 導入前 ファイル読み込みや画像の変換に非同期処理を多用しており、node.js スタイルの 非同期API(コールバックを渡すやつ) を prominence というユーティリティ関数で Promise 化していたが、行ごとに then が出てきたり、複数の値を渡すために Promise.all を使ったりと、あまり読みやすいとは言えないコードだった。(コールバック地獄になるよりはマシだと思うけど.

    ES7 の Async/Await を使ってみた - Qiita
    efcl
    efcl 2015/03/12
    Babel(regenerator)を使ったasync/awaitの変換対応について
  • ぼくのかんがえたさいきょうのES6プロジェクトテンプレート - Qiita

    というのを考えたので紹介します。 2015.09.04 内容が古くなっていたので修正 リンティングツールを jshint から eslint に変更 テストでの power-assert 用のオプション指定方法の変更 概要 基的にはこの記事 ライブラリをES6で書いて公開する所から始めよう (必読) と同じで、それにいくつかのタスクを追加しています。やることと使用しているライブラリは以下の通りです。 ES6のコードをES5ベースに変換する / babel ブラウザ用コードを生成する / browserify ミニファイする / UglifyJS テストする / mocha, power-assert カバレッジレポートを作る / isparta リンティング / eslint ディレクトリ構成 build: ブラウザ用にビルドされたコード bower install されたときに読み込ま

    ぼくのかんがえたさいきょうのES6プロジェクトテンプレート - Qiita
    efcl
    efcl 2015/02/22
    ES6でのプロジェクト構成について。 ビルド、npm run-script、Browserify、テスト、Lint、コードカバレッジなどの設定について
  • Web Audio APIのソースコード - Qiita

    WebKit (Chrome, Opera, Safari) リポジトリ WebKit/webkit インターフェース https://github.com/WebKit/webkit/tree/master/Source/WebCore/Modules/webaudio 音響処理はここに書かれている https://github.com/WebKit/webkit/tree/master/Source/WebCore/platform/audio Gecko (Firefox) リポジトリ mozilla/gecko-dev インターフェース https://github.com/mozilla/gecko-dev/tree/master/dom/media/webaudio 音響処理はblinkから持ってきている https://github.com/mozilla/gecko-dev

    Web Audio APIのソースコード - Qiita
    efcl
    efcl 2015/02/20
    ブラウザのWeb Audio APIの実装
  • 音を扱うJavaScriptライブラリや記事 - Qiita

    Web Audio API を中心に音を扱うライブラリや記事をざっとまとめました。 サウンドファイルの再生に特化したやつ ゲーム用途とかならこのあたりで十分っぽい howler.js SoundJS 簡単に演奏できるやつ beeplay / 記事 メソッドチェーンで音をつなげていく abeck ABC記譜法 で書ける テンプレート的なやつ TemplateSynth / 記事 ポリシンセ用のテンプレート mml-emitter MMLをイベントとして発火する 信号処理するやつ Tone.js 必要な機能がひととおり揃っている tuna Web Audio API 用のエフェクター flocking 音の構造をJSONで書く。node.jsでも動く。 neume.js jQueryっぽく書けるインターフェースが特徴だけど色々雑い。 pico.js Web Audio API, flash f

    音を扱うJavaScriptライブラリや記事 - Qiita
    efcl
    efcl 2015/02/19
    Web Audio API関連のライブラリやpolyfill、fallback実装などのリソースまとm
  • 1