☆ Web Audio APIでファイルから音を鳴らすためにSafariだけユーザ交流が必要 Web Audio API で AudioContext の createBufferSource() にファイルからバッファを読み込んで再生しようとしていたんですけど、click などのイベントを一度挟まないと音が出ませんでした。 調べると Safari だけは user interaction がないと音が出ないようにしてあるとかなんとか。しまったソースを忘れた。確かに Chrome (Vivaldi) や Firefox では何もしなくてもそのまま JavaScript だけ(?)自動的に音を鳴らし始められました。
特定の範囲の周波数の波形データを描画する デモ(ページを開くと音が流れるので音量注意) デモのサンプルコードは以下にあります soarflat-prototype/web-audio/docs/demo3/ 上のビジュアライザーは0Hz~約20000Hz、下のビジュアライザーは0Hz~約2000Hzの範囲の 波形データを描画しているものです。(下のビジュアライザーは少し描画を調整しています。) このような描画をしたい場合、getByteFrequencyDataで取得する配列のどの要素がどの周波数(Hz)の 波形データを格納しているか知る必要があります。 getByteFrequencyDataで取得する配列のどの要素がどの周波数(Hz)の波形データを格納しているか確認する デモのようなWeb Audioでオーディオビジュアライザーを制作する際に、 以下のようにgetByteFrequen
Sound Walker という Web アプリを作りました。 ↓ここで遊べます↓（スマートフォンで開いてください） https://www.sound-walker.app リポジトリはこちら https://github.com/Leonardo-mbc/sound-walker ホーム画面に追加することで、インストールしたアプリのように遊べます。 Webでどこまでできるかをやってみようと思って作り始めて、 ほっといて数年たったら技術がみるみる変わっていて、いろいろ味が出てきました。 Service Worker, Add To HomeScreen などなど Webでできるゲームってだけだったのが、普通にスマホで動くゲームになる時代になっております。 Sound Walker で使ってる技術は WebGL(Three.js), WebAudioAPI, ServiceWorker,
Web Music Developers JP Advent Calendar 2012 の 12日目です。 前回の記事では信号処理用の簡易インターフェイスを紹介しましたが、今日は内部でどういう処理を行なっているのかという話です。 といっても、音を作るための高度な信号処理の話ではなくて、各APIごとの簡単な使い方とブラウザによって使えるAPIが異なるだけでなく、同じAPIでもOSによって動作が異なったりバグっぽいのがあったりという状態なので、それらをできるだけ回避するためのバッドなノウハウ集といった具合、地獄の様相です。 Web Audio API編 やり方 まず使えるかどうかを判断します。 if (typeof webkitAudioContext != "undefined") { } Web Audio APIでは new webkitAudioContext() で作られる Aud
音楽の覚えがあるエンジニアとしては、触らなきゃダメだろーと思いつつ、なかなか手を付けられていなかったWebAudioAPI、 先日のハッカソンでようやく着手できました。 その過程でわかったこと・つくったものなどまとめました。 登場人物 HTML5のAudio要素を使う時と違って、 WebAudioAPIの場合は、使っているオブジェクトがけっこう多い。 そのあたりを把握するのが、WebAudioAPIのマスターの第一歩っぽい。 context (AudioContext) 音をとりまとめるcontext。 音の再生先(destination)なんかも、このcontextが握っているみたい。 WebAudioAPIに対応しているブラウザは、 window.AudioContext (window.WebkitAudioContext)というのが生えてるので、 これをインスタンス化すると作れる。
朝起きたら timbre.js が iOS6 で鳴らないやんけみたいなメールが来ていたので慌てて対応しました。スケールするマリオ も ホーミー も iPhone で、iPad で鳴ります！！ ただ、まだ不安定な感じで、すごくブチブチに鳴ってしまうときと、奇麗に鳴るときがある感じです。UIWebView だと確実にブチブチになる。 僕は JavaScriptNode でゼロから信号処理を行う派ですが、こんな感じにしたら使えるようになりました。 AudioBufferSourceNode を JavaScriptAudioNode に入力してあげないといけないみたいです。 追記 ちゃんと確認していないですが、画面読み込み後等に自動でスタートするのはダメっぽい。 ボタンとか画面をタッチしてから音を鳴らすとかしたほうが良さそうです。 ctx = new webkitAudioContext() s
Before the HTML5 <audio> element, Flash or another plugin was required to break the silence of the web. While audio on the web no longer requires a plugin, the audio tag brings significant limitations for implementing sophisticated games and interactive applications. The Web Audio API is a high-level JavaScript API for processing and synthesizing audio in web applications. The goal of this API is
デモ 03 時間領域の波形描画 AnalyserNodeインスタンスのgetByteTimeDomainDataメソッドで, 時間領域の波形描画に必要なデータが取得可能です. getByteTimeDomainDataメソッドは, Uint8Array型の配列を引数にとります. この配列に波形描画に必要なデータが格納されます. 引数に指定するUint8Array型の配列のサイズの上限はfftSizeプロパティの値です. これより大きい値を指定してもエラーは発生しませんが, 意味はありません. なぜなら, getByteTimeDomainメソッドは, fftSizeプロパティの単位で時間領域の波形データを取得するので, fftSizeプロパティ以上のインデックスに対応する配列の要素は0になるからです. 具体的には, fftSizeプロパティのデフォルト値は2048ですが, これより大きな配
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
