初心者でも音楽アプリが作れる！Web Audio APIを簡略化したJSライブラリ「Tone.js」でピアノ鍵盤を作ってみよう！ -
どうも、まさとらん（@0310lan）です。 今回は、Web Audio APIの実装で面倒な処理をすべて簡略化し、誰でも音楽プログラミングを楽しむことが可能なJavaScriptライブラリのご紹介です。 わずか数行のコードでゼロから「音」を作り出し、メロディを奏でたりエフェクトをかけたりシーケンスを組み立てたり…など、本格的なWebアプリも作れるポテンシャルを秘めていますよ！ 【 Tone.js 】 （多彩なサンプル事例はコチラから確認できます） ■必要なファイルを準備しよう！ 今回は、簡単なサンプルデモを実際に作りながら「Tone.js」の基本的な使い方をご紹介していこうと思います。 作るのは、簡易的な「ピアノの鍵盤」です！ 「Tone.js」を使うと、わずかなコードで「音」を生成して発音させることが出来るので、「鍵盤」のモチーフは初めての学習にちょうど良いと思います。 さて、このサン
web audio lesson
web audio lesson lessons lesson 01 lesson 02 lesson 03 lesson 04 lesson 05 lesson 06 quizzes lesson 01 / answer lesson 02 / answer lesson 03 / answer lesson 04 / answer lesson 05 / answer
2016-06-13のJS: jQuery 3.0、Firefox 47.0、Web Audio API入門
JSer.info #283 - jQuery 3.0が正式にリリースされました。 幾つかの非互換性が含まれていますが、jQuery 1.xや2.xからアップグレードする場合のドキュメントも公開されています。 基本的にはjQuery Migrateという移行用のプラグインを入れて、警告を修正したら本体をアップグレードする流れになっています。 jQuery Core 3.0 Upgrade Guide | jQuery 【翻訳まとめ】jQuery 3.0 アップグレードガイド - Qiita また、今回のjQuery 3リリースと同時に、ajaxとeffectを取り除いたslimビルドが公開されています。 Firefox 47がリリースされました。 Widevine CDM(DRMなストリーミング)のサポート、Service Worker/Push APIのデバッグ機能の改善、 about:
2016-04-11のJS: Grunt 1.0.0、React 15.0、ツールで学ぶJavaScript
JSer.info #274 - Grunt 1.0.0が正式リリースされました。 Grunt 1.0.0 released - Grunt: The JavaScript Task Runner JavaScript作業自動化ツール「Grunt 1.0.0」が登場。約2年もの開発停滞から復活 － Publickey 1.0.0 RC1からは依存パッケージのアップデートがされていますが、grunt.util._で参照できるlodashが4.3.0に更新されています。 grunt.util._自体が非推奨であるため、以下のように自分でlodashをインストールして使うことが推奨されています。 React v15.0がリリースされました。 幾つか問題があったため、既にReact v15.0.1がリリースされていますが、基本的には0.14.xからは非推奨の警告メッセージがなければそのままアップグ
サイマルキャストはWebRTCになぜ必要なのか？W3C TPACで交わされたもっとも重要な議論を解説する
サイマルキャストはWebRTCになぜ必要なのか？W3C TPACで交わされたもっとも重要な議論を解説する 岩瀬 義昌（HTML5 Experts.jp編集部） 2015年10月26日から30日にかけて、札幌で「TPAC2015」が開催されました。本記事はその中でも、29日と30日に開催されたWebRTCワーキンググループの議論をレポートします。 TPACとは? TPACとは、Webの標準化団体であるW3C(World Wide Web Consortium)が開催する1週間のイベントのことです。様々な国、様々な企業からメンバーが集まり、現在のWeb標準・将来的なWebの機能(例えば、cryptoやaudio)について議論します。今回は、札幌開催であり主要なWebRTC仕様策定者が一同に日本に集結しました。 最大の議論の焦点となったサイマルキャスト WebRTCのW3C側の仕様は、まだCR(
こてさきAjax:WebSocket + node.jsでAudio Streaming - livedoor Blog（ブログ）
第７回のHTML5とか勉強会で、羽田野さんにAudio Data APIを教えていただいて依頼、やりたかったことがあります。それは、AudioをWebSocketを使ってストリーミング配信すること。これが出来たので紹介します。 音声ストリーミングは、リアルタイム系のサービスの中では難しい部類の一つ。遅延がひどいと、自然なコミュニケーションが難しく、またネットワーク転送中にジッタ（データ到達間隔が揺らぐこと）が起きると、音がプツプツ切れたり間延びしたりと明らかに違和感が生じます。インターネットでは、厳密な意味でのQoS制御は困難ですので、どうしても遅延やジッタが生じますし、これらのパラメータはネットワーク転送だけでなく、サーバーークライアントでの実装ももろに効いてきます。 といったわけで、音声ストリーミングみたいなサービスがブラウザ＋Javascriptだけで出来たら、結構嬉しいよな〜やりた
Cycle.js / RxJS 入門してサンプラー作ってみた - マルシテイア
youtu.be http://gmork.in/cyro/ サンプラー。 キーボードを押したら音が増える。 [A-Z] : 音を入力 Shift + [A-Z] : そのキーの音をすべて削除 / : 設定パネルの表示 / 非表示 一応ソース fand/cyro · GitHub Cycle.js / RxJS の感想 Cycle.jsとは cycle.js.org Cycle.js は Unidirectional dataflow / Model-View-Intent を実現するWebフレームワーク。 RxJS 及び virtual-dom を使って書かれており、開発者もこれらを利用することになる。 作者の André Staltz 氏は Rx オジサンで、Rx に関するサイトを幾つか作ってる。 Flux や Elm, Famous のアーキテクチャを解説した記事は少しバズったので、
Web Audio API 解説 - 17.パンナーの使い方 | g200kg Music & Software
: サイト内検索 トップ 製品 KnobMan 偏ったDTM用語辞典 過去記事一覧 ソフトウェア/VST WebMusic その他 g200kg > Web Audio API 解説 > 17.パンナーの使い方 Web Audio API 解説 2019/01/1917.パンナーの使い方 « Prev 01.前説 02.とりあえず音を出す 03.オシレーターの使い方 04.ノードの接続 05.ノードのライフタイム 06.バッファソースでワンショットサンプルから音を出す 07.パラメータとオートメーション 08.a-rateパラメーターとk-rateパラメーター 09.スクリプトプロセッサーの使い方 10.フィルターの使い方 11.オシレーターのカスタム波形 12.アナライザーの使い方 13.ディレイの使い方 14.ウェイブシェイパーの使い方 15.コンプレッサーの使い方 16.コンボルバー
WebAudioAPIで遊べるようになった - Qiita
音楽の覚えがあるエンジニアとしては、触らなきゃダメだろーと思いつつ、なかなか手を付けられていなかったWebAudioAPI、 先日のハッカソンでようやく着手できました。 その過程でわかったこと・つくったものなどまとめました。 登場人物 HTML5のAudio要素を使う時と違って、 WebAudioAPIの場合は、使っているオブジェクトがけっこう多い。 そのあたりを把握するのが、WebAudioAPIのマスターの第一歩っぽい。 context (AudioContext) 音をとりまとめるcontext。 音の再生先(destination)なんかも、このcontextが握っているみたい。 WebAudioAPIに対応しているブラウザは、 window.AudioContext (window.WebkitAudioContext)というのが生えてるので、 これをインスタンス化すると作れる。
JavaScriptとWeb Audio事始め
JavaScriptとWeb Audio事始め 自己紹介 azu @azu_re Web scratch, JSer.info アジェンダ ウェブで音を扱う方法 HTML Audio要素 Audio要素の制限 Web Audio API HTML Audio要素 <audio src="music.mp3" autoplay /> Audio要素で音声ファイルを指定再生できる Img要素、Video要素の音声版 指定するだけなので簡単 Audio要素のいいところ 大体のブラウザがサポートしてる Audio要素の問題 iOSやAndroidで制限がある ユーザーインタラクションで開始しないと再生できない 同時に再生できる音声が1つとなる制限 Audio要素の問題 - ユーザインタラクション var audio = new Audio('sound.mp3'); // クリックしたら、再生 d
Web Audio API+AngularJS
var request = new XMLHttpRequest(); request.open('GET', myURL, true); request.responseType = 'arraybuffer'; request.onload = requestLoad; request.send(); function requestLoad() { // yay, finally done loading _audioContext.decodeAudioData(request.response, doneDecoding); } function doneDecoding(buffer) { // yay, finally done decoding playBuffer(buffer); } function playBuffer(buffer) { var bufferSou
Mixing positional audio and WebGL | Articles | web.dev
Introduction In this article I’m going to talk about how to use the positional audio feature in the Web Audio API to add 3D sound into your WebGL scenes. To make the audio more believable, I will also introduce you to the environmental effects possible with the Web Audio API. To get a more thorough introduction to the Web Audio API, check out the Getting started with Web Audio API article by Boris
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Room of metal
https://bugs.chromium.org/p/chromium/issues/detail?id=121673
https://bugs.chromium.org/p/chromium/issues/detail?id=241543
CSSの非表示(display:none)を使った広告の切り替えについて - Google グループ
BaseAudioContext: createPanner() メソッド - Web API | MDN