HTML5のCamvasと "JavaScript" で音声処理と画像描画。

Canvas Area.

Canvas Play / Stop Music Play / Stop

0% Cancel Loading

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

Music Volume:

Shuffle music. Next

Please select the type of visual effect from the following.

Simplify.
Particles Emission Wavelet of Tiled Dots A Large Amount of Particles
Precipitating Particles Moving Particles Cloth Fluctuation
Ring Fluctuation Colorful Wave

Please select the type of sound source from the following.

Sine Wave Triangle Wave
Guitar Guitar (with the visualization of the vibration of the string.)

Note: Guitar sound is generated from physically based simulation in real-time.

Please select the mode of playing from the following.

MouseDown or Tap the Canvas.
Input from the Keyboard. (Let's play the keyboard!)
Auto Rhythm Playback.
Random Sound.

Please select the octave number from the following.

0 1 2 3 4 5 6 7 8 9

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

タグ：揺らぎ 布 補間 グロー効果 三角波 沈殿 堆積 演奏 キーボード ピアノ 運動 相互作用 分子 原子 粒子 3次元 希ガス JavaScript プログラム 音 サイン波 正弦波 sin COS ADSR ノイズ 生成 曲線 トグル ボタン 座標 クリック タイマー ギター 弦 物理シミュレーション 質点 2次元メッシュ ドット模様 変位 バネ 波 Canvas HTML5 Web Audio API レイヤー ダブル バッファリング 描画 運動方程式 重低音 アタック ランダム ウォーク 円環 ピンク ノイズ アニメーション FM 周波数変調 シグモイド関数 パーティクル 放射 高速化