音を操るWeb技術 - Web Audio API入門 - ICS MEDIA
Webにおける表現はどんどん進化しています。Webサイトには当然のように動画が埋め込まれるようになり、CSSやSVG、canvasでのさまざまな表現が頻繁に見られるようになりました。さらにAR、VRといった表現も台頭し筆者も毎日ワクワクしながらインターネットの海を泳いでいます。 その中であまりメジャーではないと感じるのは「音」による表現です。もちろん音を用いた素晴らしいWebサイトはたくさんありますが、環境の制約が視覚表現以上に大きいため多くは見られないのでしょう。 とはいえ、音と視覚表現を組み合わせることによって表現できる世界観、インタラクション、その他諸々は計り知れないと筆者は思っています。今後オーディオなどの技術の進歩によって上記で述べた制約も乗り越えられるようになるかもしれません。時代を先どりしたい読者に向けて、今回の記事ではWebで音を扱う技術Web Audio APIについてお
オフラインでWebAudio APIを再生する - Qiita
Javascriptで音を鳴らすにはどうしたらいいかなぁと 色々調べてみました いくつか方法がありますが ①audioタグをJavaScriptで制御する ②WebAudio APIで再生する 今回はローカルの音を鳴らすにはどうしたらいいか考えました。 ①はローカルのリソースをaudioタグのsrcに指定すれば鳴らせます ②はXHRもしくはinputタグのfile属性からのファイル取得（File API）限定なため、 ブラウザの仕様上結構難しい ①でいいじゃないかという声が上がってくると思いますが iPhoneやAndroidではaudioタグの複数同時再生ができなかったりします 逆にWebAudio APIなら複数音同時再生できます。 （上記とは別にスマホブラウザでは①、②ともに ユーザアクションがないと再生できないという制限があります） ちなみに②のinputタグから取得する方法だと、
はてなブログを音読するボタン - hitode909の日記
そういえば，近年ではWeb Speech APIを使って，テキストを読み上げできるなと思ったので，このブログにも音読するボタンを設置してみた． 見出しの下あたりに「音読する」ボタンが出ていたら，押してみてください． 音読ボタンの様子． モダンなブラウザなら表示されてるはず．iOSには表示されてないかもしれない．表示されるけど音読してもらえないパターンもあるらしい． コードはギットハブに置いてます．3行くらい書いたら読み上げ可能になって，あとは友愛を調整すれば完成した．便利な世の中になりましたね． 読み上げてもらうコツとしては，ちゃんと句読点を入れる，というのがある．普段あまり句読点を使わないけど，今日は丁寧に句読点を入れてみています． あとは，GitHubをうまく読み上げてくれなかったので，ギットハブって書いたり，UIをうまく読んでくれなかったので，友愛って書いたりした． それでは，ここま
はじめてWeb Audio APIに触ってみる - Qiita
2017/12/4追記 実際に動くサンプルです。 普段はDTMとかで音楽に触れています響音カゲです。Web Audio APIというものを知り、ブラウザでどこまでできるのかやってみたくなったのでいろいろいじってみることにしました。 「初めて触る人でもこんなに簡単に音が出るよ！」って感じの紹介記事です。 とりあえず動かしてみる サイン波、三角波、矩形波、ノコギリ波の4種類の波形を鳴らしてみます。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Web Audio API Test</title> <link rel="stylesheet" href="./index.css"> </head> <body> <button onclick="playOsc('sine')">Sin</button>
Threejs+WebAudio APIで勉強がてらオーディオビジュアライザーをつくった - razokulover publog
Threejs+WebAudio APIで勉強がてらオーディオビジュアライザーをつくった。 成果物↓ 修正はしたが、音量少しデカいかもしれんので注意 threejs-audio-visualizer 背景 2017年1~3月の振り返りで次にやることとして3Dコンテンツを作りたいということを書いた。 その折、ちょうど業務でThree.jsを使う機会があったのでこの際勉強してみるかーということで取り掛かることにした。 やったこと とりあえずは「初めてのThree.js」を電子版で買って、3日くらいかけて読んでみた。 初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ 作者:Jos DirksenオライリージャパンAmazon 一応サンプルソースを動かしながら、カメラ・シーン・ジオメトリ・マテリアル・テクスチャ・メッシュ・レンダラー・ライトという各構成要素
HTML5 <audio> の能力を解き明かす - Internet Explorer ブログ (日本語版) - Site Home - MSDN Blogs
This browser is no longer supported. Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support. 本記事は、マイクロソフト本社の IE チームのブログから記事を抜粋し、翻訳したものです。 【元記事】Unlocking the power of HTML5 audio(2011/5/14 1:03 AM) 私たちの生活の中にはさまざまな音があります。Web 開発者は、今日では HTML5 <audio> 要素を使ってアプリケーションに音を埋め込むことができます。制御の柔軟性とプラットフォームとの統合により、単純な効果音から、ゲームのプレイ中に流れる音、洗練されたオーディオ エンジンに至るまで、さまざま
JavaScript で Web Audio API を実装した - 音の鳴るブログ
github.com 以前から Web Audio API に興味があって暇なときには仕様を読んだりしていたのですが、だいたい分かったぞ！！と思って勢いで書きました。すべて JavaScript で書いてあるのでブラウザはもちろん Node.js でも動作します。Node.js で動かす場合はレンダリング結果をストリームとして出力するかwav形式でエクスポートできます。 オンラインのデモ (web-audio-engine と native Web Audio API の比較ができます) web-audio-engine :: demo 先行する事例の node-web-audio-api WAAPISim : Web Audio API Simulator と比較すると、 チャネルの動的適応 (入力のチャネル構成によって下流のチャネル構成が変化する) や AudioNode のライフサイ
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で
Web Audio APIを利用してオーディオビジュアライザを作成する ~その1 音声データを読み込んで音を出す~ - Qiita
Web Audio APIを利用してオーディオビジュアライザを制作したので、それに関する備忘録です。 まとめて書くと内容が長くなり、複雑で解りにくなりそうなので分けて書いています。 その1は簡単な概要と音声データを読み込んで音を出すところまでです。 Web Audio APIとは Audioを扱うAPI。 AudioNodeを接続して、音(信号)に対して様々な操作ができる。 AudioNodeとは 音量の調整、周波数の解析、フィルタをかけたりと音(信号)に対して様々な操作ができるノード。(モジュールのようなもの) AudioNodeはいくつでも接続することができ、最終的にはAudioDestinationNode(出力)に接続して音を出す。 現実世界で言うとマイク(入力)、エフェクタ(フィルタ)、スピーカー(出力)をコードで繋げていくのと同じ。 とりあえず音を出す デモ(ページを開くと音が
AudioWorker を試してみる - Qiita
2016.09.08 追記 AudioWorkerは編纂中の仕様から削除されました。Web Audio API先生の次回作AudioWorkletにご期待ください！！ Web Audio API には ScriptProcessorNode という、JavaScript で信号処理を記述するための部品があります。Web Audio API で用意されている部品の組み合わせではやりようがない処理をしたいときに重宝するのですが、最新のドラフト仕様では DEPRECATED となっていて将来的には廃止されるようです。 そして廃止される ScriptProcessorNode に変わって提案されているのが AudioWorker という仕組みで、ScriptProcessorNode との大きな違いとしてメインスレッドで行っていた信号処理をワーカースレッドで行うようになります。また、任意の Aud
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
AudioParam Viewer - 音の鳴るブログ
Web Audio API の AudioParam の値を可視化できるやつを作った。 AudioParam Viewer コードを書いて実行(eval)すると30秒分の値の遷移を記録してグラフ表示します。param というのが操作する AudioParam のインスタンスで、Ctrl+O か Ctrl+Space で操作関数を補完できます。 仕組み Web Audio API はリアルタイムでオーディオ処理をするためのAPIだと思われがちだけど、OfflineAudioContext というのを使えば静的なオーディオ処理もできます。以下は簡単な使い方。レンダリング用のインターフェースがあるだけで基本的には AudioContext と同じように使えます。これを使うと30秒の処理を一瞬で行うことができるので、それを使って常に 1 を出力する AudioBufferSource とパラメータ
Web Audio API 解説 - 01.前説 | g200kg Music & Software
: サイト内検索 トップ 製品 KnobMan 偏ったDTM用語辞典 過去記事一覧 ソフトウェア/VST WebMusic その他 g200kg > Web Audio API 解説 > 01.前説 Web Audio API 解説 2019/01/1901.前説 « Prev 01.前説 02.とりあえず音を出す 03.オシレーターの使い方 04.ノードの接続 05.ノードのライフタイム 06.バッファソースでワンショットサンプルから音を出す 07.パラメータとオートメーション 08.a-rateパラメーターとk-rateパラメーター 09.スクリプトプロセッサーの使い方 10.フィルターの使い方 11.オシレーターのカスタム波形 12.アナライザーの使い方 13.ディレイの使い方 14.ウェイブシェイパーの使い方 15.コンプレッサーの使い方 16.コンボルバーの使い方 17.パンナー
WebAudioAPIで遊べるようになった - Qiita
音楽の覚えがあるエンジニアとしては、触らなきゃダメだろーと思いつつ、なかなか手を付けられていなかったWebAudioAPI、 先日のハッカソンでようやく着手できました。 その過程でわかったこと・つくったものなどまとめました。 登場人物 HTML5のAudio要素を使う時と違って、 WebAudioAPIの場合は、使っているオブジェクトがけっこう多い。 そのあたりを把握するのが、WebAudioAPIのマスターの第一歩っぽい。 context (AudioContext) 音をとりまとめるcontext。 音の再生先(destination)なんかも、このcontextが握っているみたい。 WebAudioAPIに対応しているブラウザは、 window.AudioContext (window.WebkitAudioContext)というのが生えてるので、 これをインスタンス化すると作れる。
WEB SOUNDER - Web Audio API 解説 -
オーティオデータの再生 トップページでも述べたことですが, 単純にオーディオデータを再生するだけであればHTMLMediaElementを利用したほうが良いでしょう. その理由は, 実装が簡単で,機能面もオーディオプレイヤーとしての基本的な機能はサポートされています. さらに, クロスブラウザ対応においても, Web Audio APIよりはるかに楽でしょう. Web Audio APIによるオーディオデータの再生について解説する目的とは, 単純にオーディオデータを再生するだけでなく, サウンドエフェクトを付加したり, 波形描画したりといったより高度なサウンド処理を実現することにあります. そのステップアップとして, まずはオーディオデータを再生することのみに主眼を置きます. Web Audio APIによるオーディオデータの再生方法は2つあります. AudioBufferSourceNo
Web Audio API
This version: https://www.w3.org/TR/2021/REC-webaudio-20210617/ Latest published version: https://www.w3.org/TR/webaudio/ Editor's Draft: https://webaudio.github.io/web-audio-api/ Previous Versions: https://www.w3.org/TR/2021/PR-webaudio-20210506/ https://www.w3.org/TR/2021/CR-webaudio-20210114/ https://www.w3.org/TR/2020/CR-webaudio-20200611/ https://www.w3.org/TR/2018/CR-webaudio-20180918/ https
Getting started with Web Audio API | Articles | web.dev
Getting started with Web Audio API Stay organized with collections Save and categorize content based on your preferences. 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 Au
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
