So-net無料ブログ作成
検索選択

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

自作の " 音楽再生ウェブ アプリケーション " が良く出来たので、専用のブログを新設してそこへ実装致しました。
キーボード演奏が可能でヴィジュアライザーの機能とプレイリスト機能が付いた音楽再生ウェブ アプリケーションです。

ブログ記事: "ウェブ音楽プレイヤー"
URL: http://musicvisualizer.blog.so-net.ne.jp/2017-06-26

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

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


ヴィジュアライザーはスペクトラム アナライザーの他、音のビートやアクセントに反応して花火のような、光る粒子が飛び散るエフェクトがございます。
JS_Music Player_SS_(2017_06_28)_2_Cropped_1 HTML5 ミュージック プレイヤーのスクリーンショット画像。 黒い背景の上に青色の二重の光る円環があり、円環の中心から青色の多数の輝く粒子が放出されている。 画面の下方には音楽のスペクトラム アナライザーのヴィジュアライザーが描画されており、垂直の青色のバーが多数横方向に並んで伸び縮みしている。 青色のバーは明るさと彩度と色相に微妙なグラデーションが掛かっている。
https://c1.staticflickr.com/5/4238/35410672282_f315bbd654_o.png

JS_Music Player_SS_(2017_07_01)_1_Cropped_1 HTML5 ミュージック プレイヤーのスクリーンショット画像。 黒色と灰色を基調としたデザイン。 操作用のボタンとプレイリストが表示されている。 画面上部には光り輝く円輪と光り輝く多数の粒子が描かれ、その後ろには青色の音楽のスペクトラム アナライザーのヴィジュアライザーが描画されており、垂直の青色のバーが多数横方向に並んで伸び縮みしている。 青色のバーは明るさと彩度と色相に微妙なグラデーションが掛かっている。
https://c1.staticflickr.com/5/4239/35665494675_bb42352426_o.png
プレイリストの機能も自作です。
楽曲毎に、再生する / 再生しないを選択する為のボタンを用意致しました。
初めはウェブ ブラウザーに備え付けのチェックボックスとラジオ ボタンを利用していたのですが、楽曲数が数千曲に及ぶと1つ操作する毎に0.4秒前後の時間だけ処理が止まってしまうようでしたので、自作のボタンに変更致しました。

JS_Music Player_SS_(2017_07_02)_1_Cropped_1 HTML5 ミュージック プレイヤーのスクリーンショット画像。 黒い背景の上に黄色や青緑色の光り輝く円輪が幾つもあり、円輪の中心からその円輪と同色の多数の光り輝く粒子が放出されている。
https://c1.staticflickr.com/5/4076/34856395613_abaf3d8651_o.png

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

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

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

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

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

JS_Music Player_SS_(2017_07_16)_1_Cropped_1 HTML5 ミュージック プレイヤーのスクリーンショット画像。 黒い背景の上に色とりどりの光り輝く円輪が沢山あり、円輪の中心からその円輪と同色の多数の光り輝く粒子が大量に放出されている。
https://c1.staticflickr.com/5/4318/35786837582_7ab3bcd1f0_o.png
第1オクターヴを選択してキーボードを乱打すると、少し花火大会のスターマインのようになります。
重低音が轟いて面白いです。

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

nice!(10)  コメント(0)  トラックバック(0) 

nice! 10

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

※ブログオーナーが承認したコメントのみ表示されます。

Facebook コメント

トラックバック 0