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

"ウェブ音楽プレイヤー" [ウェブ音楽プレイヤー]


Web Music Player with Visualizer
Click the title to jump to the location of the item.
ウェブ音楽プレイヤーのヴィジュアライザーのスクリーンショット画像。
Controls for music.

If you want to play music, please select your music directory.
Please select the type of sound from the following.

If you want random sound output, please check the option below.

You can play the keyboard. 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. (1) or (9): Always G1.
Music Playlist.
Hide Unselected Items
Import Playlist:

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

[手順: 1]
" Canvas Play / Stop " ボタンを押して下さい。

[手順: 2]
フォルダーを選択する為のボタンを押して、現れたウィンドウから音楽ファイルが入っているフォルダー (ディレクトリー)を選択して下さい。
この時、選択の為のウィンドウには、 " 開く " などの代わりに、 " アップロード " などと書かれたボタンがあるかもしれませんが、これを押して下さい。決して実際にインターネットにアップロードされたりは致しませんので御安心下さいませ。

[手順: 3]
" Music Play / Stop " ボタンを押して下さい。

すると、音楽の再生と共にスペクトラム アナライザーや音楽のアクセントに連動する花火のようなエフェクトのヴィジュアライザーが動作致します。
後は、キャンヴァス上を沢山クリック / タップしてみて下さい。
また、キーボードのキーを押してピアノのように音楽を演奏する事も出来ます。
オクターヴの移動も可能です。
プレイリストは " Web Storage API " で自動保存致します。プレイリストをテキスト ファイルとして書き出しと取り込みも出来ます。
尚、古いブラウザーや性能が低い端末では動作しなかったりすると思います。
もしも何か問題が生じても私は責任を取れませんので御了承下さいませ。

[このプログラムについて]
" HTML5 " の " Canvas " 要素を利用して画面の描画をしております。
このプログラムのコードは全てブログ記事のHTML文書内に " JavaScript " で記述したものであり、作成するに当たってテキスト エディターとウェブ ブラウザー以外は何も使用しておりません。
追加のライブラリーなどは一切使用せず、純粋にHTML5対応ブラウザーだけで動作致します。
音に関しては、 " Web Audio API " を利用して、独自の関数で波形を作って鳴らしております。
フォルダーの選択に " HTMLInputElement.webkitDirectory " という未だ標準化されていない機能を利用している為、動作環境は限られます。 " Firefox 54 " では動作確認済みです。

[ソースコード]
" Yahoo!ボックス " サーヴィスにソース コードのhtml ファイルをアップロードして公開させて頂きます。
次のリンク先のページにある " ダウンロード " ボタンを押すと当プログラムのhtml ファイルをダウンロード出来ます。
Yahoo!ボックス: https://yahoo.jp/box/4g9aEl

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

nice! 0

コメント 0

コメントを書く

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

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

トラックバック 0