Hatena Blog Tags
はてなブログ トップ
Web Audio API
このタグでブログを書く

Web Audio API

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
voicy tech blog•2年前

オーディオ波形動画を生成するWebぺージの作り方

本記事はVoicy Advent Calendar 2022の11日目の記事です。 はじめに こんにちは、株式会社VoicyでWebフロントエンジニアをしているきーくん(@komura_c)です。今回は、業務に関わる内容ではないのですが、以前に趣味で開発したオーディオ波形動画を生成するWebぺージの内容を整理してまとめました。ぜひ読んでみてください！ この記事の内容 主な機能として、画像の読み込み、オーディオファイルの読み込み、波形の描画、キャプチャ、動画として出力をWebフロントエンドで行うWebぺージを作成しました。初めはHTML&CSSと素のJavaScriptで作っていたのですが、Ne…

#Web Audio API

関連ブログ

Yumuta Music Tech Blog•4年前

ブラウザで動くシンセサイザーの制作

当ブログの初記事となります。張り切って書きたいと思います。 今回は、シンセサイザーの基礎とWeb Audio APIの勉強もかねて、ブラウザ上で動作するシンセサイザー (以下ブラウザシンセと呼びます) を制作してみたので紹介いたします。実際に動くデモもあるのでぜひ触ってみてください。 目次 ブラウザシンセを作ったきっかけ 今回制作したもの シンセサイザー基礎 シンセサイザーとは シンセサイザーの構成要素 オシレーター (Oscillator, OSC) フィルター 音量エンベロープ (Amplifier Envelope, AMP ENV) 低周波オシレーター (Low Frequency O…

#シンセサイザー#JavaScript#Web Audio API#Google Chrome#プログラミング
モールス練習帖•14日前

ウェブブラウザによる無線機の遠隔操作の実験（２）

前回は送信所と操作所の間で音声のやり取りができるところまで実装しました。今回はリモートCWキーイングを実装します。 音によるCWキーイング 操作所の電鍵でモールス符号を打鍵することで、Web Audio API の低周波発振器によりモールス信号音を発生させます。 その音声を WebRTC で送信所へ送り、送信所のブラウザがモールス信号音の有無により無線機のCWキーイングを行います。 モールス信号オシレーター モールス信号音を生成するには Web Audio API の OscillatorNode を使用します。 this.osc = audioCtx.createOscillator() t…

norio shimizu blog•4ヶ月前

DAY2024/06/09の気になった技術ブログ一覧

本日の気になった技術ブログ Tips リンク集です。 UnityでInputField(TMP)を使う コルーチンとは？簡単に理解してみる 【Unity】確認ダイアログを作る 【Unity】Shader Graphサンプルを利用して動く2D背景を作る 【C＃】単体テストを作成する方法 iOSでもバックグラウンドでWeb Audio APIの音が鳴るようにする Androidアプリサンプルにおける単体テストのテストスコープについて調べてみた

あかり描像のブログ•4ヶ月前

Tone.js で月光 3 楽章を演奏する

ブラウザで音を鳴らすことができる Tone.js を使って、ベートーヴェンの月光 3 楽章の冒頭 14 小節を演奏させてみたというだけの記事です。

mich0w0h blog•6ヶ月前

2024年4月 仕事復帰、保育園入園、そして退園へ

今月いろいろなことが起こりすぎて4月1日が遠い昔のように感じます。。。そんな今月もしっかり振り返りをして締めようと思います。 Webで簡単なリズムゲームをつくりはじめた 仕事復帰した 子が保育園に入園した アデノウイルスで一家総やられ 保育園をやめた よかったコンテンツ WORK DESIGN（ワークデザイン） 行動経済学でジェンダー格差を克服する 正直不動産 星屑の王子様 Melatonin Goならわかるシステムプログラミング Webで簡単なリズムゲームをつくりはじめた こんなコンセプトのゲームをつくりたい！というアイデアが舞い降り、それにはリズムゲームが合っていそうだなと感じたので、リズ…

モールス練習帖•6ヶ月前

電波文化祭（１）「インターネットでモールス通信 - DitDahChat」

以下の記事は昨年の2023年10月1日（日）に開催された「電波文化祭⚡️サイクル1」向けに書いた記事です。 オリジナルは次のURLをご覧ください。 scrapbox.io 「インターネットでモールス通信 - DitDahChat」 DitDahChatとは DitDahChatは、インターネット上でモールス通信を楽しめるウェブアプリです。ブラウザが動作する端末であれば、スマートフォン、タブレット、パソコンのいずれでも動作します。 モールス通信を楽しむにはアマチュア無線の資格の取得や、無線機やアンテナの準備が必要だと思っていませんか。DitDahChatならいつでもどこでも、すぐに楽しむことがで…

凹みTips•9ヶ月前

Unity の WebGL ビルドでマイク入力を扱えるライブラリを作ってみた

はじめに Unity には Microphone というクラスがあり、これを通じてマイクの情報や入力を取得できます。しかしながら Microphone は WebGL では利用することが出来ません。 docs.unity3d.com Unity では FMOD をオーディオ周りとして利用しているようで、基本的にスレッド上で動くためスレッドが（部分的にしか）利用できない WebGL とは相性がよくなく、結果的に Web Audio API をベースに自前で実装する、という選択をしたようです。その上で多くのオーディオ系 API は再実装されたものの、幾つか Web Audio API との相性が良…

ひとりでのアプリ開発 - fineの備忘録 -•9ヶ月前

Web開発 - JavaScriptとは

初めに 本記事は、JavaScriptとはどのようなもので何ができるのか、まとめます。

クモのようにコツコツと•9ヶ月前

【Tone.js & Next.js】Tone.jsでシンセジェネレーターを作った

Tone.jsでシンセサイザーの音作りができるシンセジェネレーターを作りました。シンセサイザーの音の作り方を理解したい&Tone.jsでシンセサイザーの音作りがどこまでできるのかを検証する目的です。当初思い描いていたものは一通り実現できました！

凹みTips•9ヶ月前

uLipSync の WebGL 対応をしてみた

はじめに 前回調査記事を書きました。 tips.hecomi.com 今回は続きで、調査を元に実際に WebGL のサポートを行いました（マイクサポートのみまた後日）。実装しながら気づいたことや、問題に対してどのように対応したかなどについてまとめましたのでご紹介します。 ダウンロード github.com 実験と問題解決 前回は WebGL では解析の入口となっていたオーディオバッファを取得できる OnAudioFilterRead() が動作しないことから、代替手段として Web Audio API からバッファをもらってくる方式と AudioClip.GetData() によって取ってくる…

凹みTips•10ヶ月前

uLipSync の WebGL 対応を調査してみた

はじめに 過去に何度かリクエストを頂いているのですが、まだ uLipSync で対応していないことの一つに WebGL 対応があります。WebGL ではいくつかの機能が制限されており、そのまま使えない機能が多々あります。例えば現在解析に用いている OnAudioFilterRead コールバックは WebGL では利用できませんし、他にもマイクも同様に使用できません。 tips.hecomi.com こういった制約の関係で uLipSync は WebGL では現在動作しない形になっています。ただ、うえぞうさんがオーディオ再生側に関しては動作するような仕組みを作成して下さっています（ちょうど …