So-net無料ブログ作成
検索選択
HTML5 インタラクティヴ アート ブログトップ

HTML5のCamvasと "JavaScript" で音声処理と画像描画。 [HTML5 インタラクティヴ アート]


Canvas Area.

If you want to play music, please select your music files (or symbolic links, aliases, shortcuts).

Please select the type of visual effect from the following.




Please select the type of sound source from the following.


Note: Guitar sound is generated from physically based simulation in real-time.
Please select the mode of playing from the following.




Please select the octave number from the following.
Key assignment.
(z):c (s):cs (x):d (d):ds (c):e (v):f (g):fs (b):g (h):gs (n):a (j):as (m):b (,):c
(q):c (2):cs (w):d (3):ds (e):e (r):f (5):fs (t):g (6):gs (y):a (7):as (u):b (i):c
(Shift): Increase or decrease one octave.


このHTML ページ内で " JavaScript " を実行します。
音と視覚効果を生成してみます。

遊びで " JavaScript " でインタラクティヴ アートのプログラムを書いてみたので、 " Canvas Play / Stop " ボタンを押して、キャンヴァス上を沢山クリック / タップしてみて下さい。
下の方は30[Hz]位からの強烈な重低音が出ます。最高の重低音、最強の重低音でサブウーファーが部屋を揺らします。
また、オプションでキーボードのキーを押してピアノのように音楽を演奏することも出来ます。
オクターヴの移動も可能です。
更に、お持ちの音楽ファイルを複数選択して再生させ、スペクトラム アナライザーのヴィジュアライザーを表示させる事も出来ます。 この際、音楽ファイルへのリンク、ショートカット、エイリアスを選択する事も可能ですので、プレイリストのように利用可能です。 尚、一部の古いブラウザーでは音が出なかったり動作しなかったりすると思います。
もしも何か問題が生じても私は責任を取れませんので御了承下さいませ。
もしこのWeb アプリに御興味を持たれましたら、どこかでこれを紹介して下さい。

[このプログラムについて]
" HTML5 " の " Canvas " 要素を利用して画面に画像を表示しております。
このプログラムのコードは全てブログ記事のHTML文書内に記述したものであり、作成するに当たってテキスト エディターとウェブ ブラウザー以外は何も使用しておりません。 追加のライブラリーなどは一切必要無く、純粋にHTML5対応ブラウザーだけで動作致します。
この作品がもし、どなたかがプログラミングの学習、勉強を始めるきっかけになったら嬉しいです。
音に関しては、 " Web Audio API " を利用して、独自の関数で波形を作って鳴らしております。
解説とソースコードは次のページで掲載させて頂きます。

私のブログ記事: 自作の " HTML5 インタラクティヴ アート " の説明。
http://crater.blog.so-net.ne.jp/2017-05-25

HTML5 インタラクティヴ アート ブログトップ