Click on the title to jump to the item’s location.
♪
Controls for music.
If you want to play music, please select your music directory.
0%
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.
(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.
キーボード演奏が可能でヴィジュアライザーの機能が付いた音楽再生ウェブ アプリケーションです。
[手順: 1]
“Canvas Play / Stop” ボタンを押して下さい。
[手順: 2]
フォルダーを選択する為のボタンを押して、現れたウィンドウから音楽ファイルが入っているフォルダー (ディレクトリー)を選択して下さい。
この時、選択の為のウィンドウには、 “開く” などの代わりに、 “アップロード” などと書かれたボタンがあるかもしれませんが、これを押して下さい。決して実際にインターネットにアップロードされたりは致しませんので御安心下さいませ。
[手順: 3]
“Music Play / Stop” ボタンを押して下さい。
すると、音楽の再生と共にスペクトラム アナライザーや音楽のアクセントに連動する花火のようなエフェクトのヴィジュアライザーが動作致します。
後は、Canvas上を沢山クリック / タップしてみて下さい。
また、キーボードのキーを押してピアノのように音楽を演奏する事も出来ます。
オクターヴの移動も可能です。
プレイリストは “Web Storage API” で自動保存致します。プレイリストをテキスト ファイルとして書き出しと取り込みも出来ます。
尚、古いブラウザーや性能が低い端末では動作しなかったりするかと思います。
もしも何か問題が生じても私は責任を取れませんので御了承下さいませ。
[このプログラムについて]
動作デモ ページ: https://impactcrater.github.io/MusicPlayer
ソース コード: https://github.com/ImpactCrater/MusicPlayer
“HTML5” の “Canvas” 要素を利用して画面の描画をしております。
このプログラムのコードは全てブログ記事のHTML文書内に “JavaScript” で記述したものであり、作成するに当たってテキスト エディターとウェブ ブラウザー以外は何も使用しておりません。
追加のライブラリーなどは一切使用せず、純粋にHTML5対応ブラウザーだけで動作致します。
音に関しては、 “Web Audio API” を利用して、独自の関数で波形を作って鳴らしております。
フォルダーの選択に “HTMLInputElement.webkitDirectory” という未だ標準化されていない機能を利用している為、動作環境は限られます。 “Firefox 54” 以降では動作確認済みです。
[手順: 1]
“Canvas Play / Stop” ボタンを押して下さい。
[手順: 2]
フォルダーを選択する為のボタンを押して、現れたウィンドウから音楽ファイルが入っているフォルダー (ディレクトリー)を選択して下さい。
この時、選択の為のウィンドウには、 “開く” などの代わりに、 “アップロード” などと書かれたボタンがあるかもしれませんが、これを押して下さい。決して実際にインターネットにアップロードされたりは致しませんので御安心下さいませ。
[手順: 3]
“Music Play / Stop” ボタンを押して下さい。
すると、音楽の再生と共にスペクトラム アナライザーや音楽のアクセントに連動する花火のようなエフェクトのヴィジュアライザーが動作致します。
後は、Canvas上を沢山クリック / タップしてみて下さい。
また、キーボードのキーを押してピアノのように音楽を演奏する事も出来ます。
オクターヴの移動も可能です。
プレイリストは “Web Storage API” で自動保存致します。プレイリストをテキスト ファイルとして書き出しと取り込みも出来ます。
尚、古いブラウザーや性能が低い端末では動作しなかったりするかと思います。
もしも何か問題が生じても私は責任を取れませんので御了承下さいませ。
[このプログラムについて]
動作デモ ページ: https://impactcrater.github.io/MusicPlayer
ソース コード: https://github.com/ImpactCrater/MusicPlayer
“HTML5” の “Canvas” 要素を利用して画面の描画をしております。
このプログラムのコードは全てブログ記事のHTML文書内に “JavaScript” で記述したものであり、作成するに当たってテキスト エディターとウェブ ブラウザー以外は何も使用しておりません。
追加のライブラリーなどは一切使用せず、純粋にHTML5対応ブラウザーだけで動作致します。
音に関しては、 “Web Audio API” を利用して、独自の関数で波形を作って鳴らしております。
フォルダーの選択に “HTMLInputElement.webkitDirectory” という未だ標準化されていない機能を利用している為、動作環境は限られます。 “Firefox 54” 以降では動作確認済みです。
コメント