自作の音楽再生ウェブ アプリケーション専用ブログを開設致しました。

自作の " 音楽再生ウェブ アプリケーション " が良く出来たので、専用のブログを新設してそこへ実装致しました。

->->
[2019年07月03日 追記]
迷路自動生成プログラムと一緒に新しいブログに移転させました。

移転先: ウェブ音楽プレイヤー
URL: https://applicationprogram.blog.so-net.ne.jp/2019-07-03-1
<-<-

キーボード演奏が可能でヴィジュアライザーの機能とプレイリスト機能が付いた音楽再生ウェブ アプリケーションです。

HTML5のCanvas要素とWeb Audio API、Web Strorage API、File APIを使用し、JavaScriptで書きました。

お使いの端末に保存されている音楽ファイルを含むフォルダー (ディレクトリー)を選択してプレイリストに出来ます。
再生したくない曲はプレイリストの項目の先頭のボタンを押してオフにすると再生されないように出来ます。
再生したくない曲を非表示にも出来ます。
プレイリストは自動保存、自動読み出しされますが、テキスト ファイルとして書き出しと取り込みも出来ます。
Canvasの上部に表示される再生中の曲のタイトルをクリックすると、プレイリストの中のその場所へ移動出来ます。


ヴィジュアライザーはスペクトラム アナライザーの他、音のビートやアクセントに反応して花火のような、光る粒子が飛び散るエフェクトがございます。

https://c1.staticflickr.com/5/4238/35410672282_f315bbd654_o.png


https://c1.staticflickr.com/5/4239/35665494675_bb42352426_o.png
プレイリストの機能も自作です。
楽曲毎に、再生する / 再生しないを選択する為のボタンを用意致しました。
初めはウェブ ブラウザーに備え付けのチェックボックスとラジオ ボタンを利用していたのですが、楽曲数が数千曲に及ぶと1つ操作する毎に0.4秒前後の時間だけ処理が止まってしまうようでしたので、自作のボタンに変更致しました。


https://c1.staticflickr.com/5/4076/34856395613_abaf3d8651_o.png

キーボードを使っての演奏も可能です。
オクターヴの移動も出来ます。

ランダムな音の再生も出来ます。
一様な確率分布です。

正弦波と三角波の切り替えが出来ます。

キーボードのキーを押している間、またはマウスのボタンを押している間、音が持続(サステイン)致します。

重低音はアタックが強く、迫力がございます。


https://c1.staticflickr.com/5/4318/35786837582_7ab3bcd1f0_o.png
第1オクターヴを選択してキーボードを乱打すると、少し花火大会のスターマインのようになります。
重低音が轟いて面白いです。

注意と致しまして、お使いのウェブ ブラウザーが古かったり、端末の性能が低い場合、動作致しません。
Firefox 54にて動作確認済みです。
おそらくChromeやSafariの最新版でも機能すると思います。

タグ：エフェクト HTML5 ミュージック プレイヤー 視覚化 Web Audio API プログラム 音楽再生ソフトウェア Canvas ウェブ アプリケーション ヴィジュアライザー 重低音 プレイリスト