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の最新版でも機能すると思います。

JavaScriptで並べ替えに "クイックソート" アルゴリズムを使用してみました。 [プログラミング]

データの並べ替えを高速に行う必要がある時、一般的に、最適なアルゴリズムと言えば " Quicksort " (クイックソート) アルゴリズムだそうです。

私はHTML5のCanvas要素とWeb Audio APIで簡易なミュージック プレイヤーを作ってみたのですが、音楽ファイルを含む多数のフォルダーがあるディレクトリーを読み込んだ後に、楽曲リストを名前順に並べ替える必要がございました。
そこで威力を発揮したのがクイックソートです。
数千曲のリストも素早く並べ替えられます。

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

以下に私の使用したコードを掲載致しますが、このコードは書き方として冗長なものとなっております。
また、始めに基準値を設定する為の複数個のサンプル データの中央の値を取る為にバブル ソートを行っておりますが、これについても実はもっと簡単に、サンプル数を3つに固定して単純な条件分岐だけで中央の値を取得する事も出来ます。

var data = [2,6,1,4,9,23,11,41,35,26,14,19,55,38,17,25,18,40,31,45,34,5,10,7,3,8,12,22];
var data2 = ['abc','aaaaaa','xy','ABC','123','12','5678','98','11F'];


// クイックソートを行う関数の宣言。
function quicksort( arrayOfData, boundaryOfLeft, boundaryOfRight )
{
 if( boundaryOfLeft < boundaryOfRight )
 // 区間内に複数個のデータがあるならば処理を行う。
 {
  // 奇数個のデータの中央の値を基準値として設定する。
  var sampleData = [];
  var pivot = 0;
  var randomNumber = 0;
  var numberOfSample = 3;
  var i = 0;
  var j = 0;

  // ランダムにサンプル データを抽出する。
  for( i = 0; i < numberOfSample; i++ )
  {
   randomNumber = Math.floor( Math.random() * (boundaryOfRight + 1 - boundaryOfLeft) + boundaryOfLeft );
   sampleData[i] = arrayOfData[randomNumber];
  }

  // バブル ソートを行う。
  for( i = 0; i < sampleData.length - 1; i++ )
  {
   for( j = sampleData.length - 1; j > i; j-- )
   {
    if( sampleData[j] < sampleData[j - 1] )
    {
     temporaryData = sampleData[j - 1];
     sampleData[j - 1] = sampleData[j];
     sampleData[j] = temporaryData;
    }
   }
  }

  // 中央の値を取る。
  pivot = sampleData[(numberOfSample - 1) / 2];

  i = boundaryOfLeft;
  j = boundaryOfRight;
  var temporaryData = null;
  while( true )
  {
   while( arrayOfData[i] < pivot )
   // 基準以上の値に出会うまで移動する。
   {
    i++;
   }

   while( arrayOfData[j] > pivot )
   // 基準以下の値に出会うまで移動する。
   {
    j--;
   }

   if( i >= j )
   // もし左右の注目位置が一致または交差したならば処理を抜ける。
   {
    break;
   }else
   // 左右の注目位置が未だ離れているならばその位置の値を交換する。
   {
    temporaryData = arrayOfData[i];
    arrayOfData[i] = arrayOfData[j];
    arrayOfData[j] = temporaryData;
    i++;
    j--;
   }
  }

  if( boundaryOfLeft < i - 1 )
  // 未だ左側の区間内に複数のデータがあるならば処理を繰り返す。
  {
   arrayOfData = quicksort( arrayOfData, boundaryOfLeft, i - 1 );
  }

  if( j + 1 < boundaryOfRight )
  // 未だ右側の区間内に複数のデータがあるならば処理を繰り返す。
  {
   arrayOfData = quicksort( arrayOfData, j + 1, boundaryOfRight );
  }
 }
 return( arrayOfData );
}


// クイックソートを実行する。
data = quicksort( data, 0, data.length - 1 );
data2 = quicksort( data2, 0, data2.length - 1 );

console.log( data ); // 1,2,3,4,5,6,7,8,9,10,11,12,14,17,18,19,22,23,25,26,31,34,35,38,40,41,45,55
console.log( data2 ); // 11F,12,123,5678,98,ABC,aaaaaa,abc,xy




共謀罪新設で刑法体系が様変わりしてしまう。 [邪悪, 政治]

本日、2017年6月15日、 " 共謀罪 " の趣旨を盛り込む、 " 改正組織的犯罪処罰法 " (共謀罪法)について、与党が参院法務委員会の審議を打ち切り、参院本会議にて野党の批判を無視して強行採決され、成立してしまいました。
これにより、日本の刑法体系は大きく転換される事となりました。

以前から訴えている通り、この共謀罪法の内容はテロ抑止の為のものというよりも、政権や政策に反対する人達など一般の市民団体や人権活動家、環境活動家などへ心理的圧力を加える為のものであると言わざるを得ません。

実際に犯罪を犯さなくても罪に問われる事になるのです。
保安林で茸採りをしただけでも犯罪準備行為の疑いがあるとして捜査対象と成り得るとされております。

一般の人は対象にはなりませんという政府の説明は只の口約束であって、実際は市民団体と反社会的勢力を明確に線引きしておりません。
普通の市民団体の中から一部の過激な行為をする人が出たとして、その途端に反社会的勢力と判断して関係無い人達まで捜査対象と成り得るのです。(デモ行進中に一部の人が警官隊と衝突する場合があります)

実際に処罰されるかどうかよりも寧ろ、捜査対象となる事が問題です。
沖縄のアメリカ軍基地建設反対運動の旗振り役の男性がフェンスの一部を切った事を理由に半年近く拘留されていた事を鑑みると、共謀の疑いで長期間に亘り拘留される可能性もあります。

中国やロシア、シンガポールなどのように、事実上の独裁体制を構築する為のものです。

共謀罪法を根拠にして警察組織が一般市民のスマートフォンの通信傍受を行ったり、人と人との繋がり、関係性も捜査される事になると危惧されております。

自分には関係が無いと思っている人が居るようですが、実は秘密裏に捜査対象に成り得るというプレッシャーを加えられているのです。
そして、世の為、社会の為と考えて活動していた市民団体や活動家の人達が萎縮する事により、少しづつ、しかし確実に社会は劣化して行くのです。

どうも、アジア諸国(とアフリカ諸国)では人権意識や民主主義が成熟しないようで、悲しい限りです。
日本は中国やロシアやシンガポールのような国になってはいけないのです

私のブログ記事: 安倍政権になってからの危機的な一連の変化。
http://crater.blog.so-net.ne.jp/2016-03-18-1

Firefox 54がとてつもなく速い!! [ソフトウェア]

本日、Firefox ウェブ ブラウザーを最新の " Firefox 54 " へとアップデート致しましたところ、そのあまりの高速っぷりに驚いてしまいました!

Firefoxの動作は今までも充分速く感じていたのですが、今度のFirefox 54は桁違いの軽快さです。
マルチプロセス動作が標準で有効化され、ヴィデオカードなどGPUによるハードウェア アクセラレーションも対応が進み、メモリーの使用量は少ないままに、ページの表示は一瞬で終わりますし、HTML5のCanvas要素を用いた自作のウェブ アプリケーションも動作が更に滑らかになりました!

こんなに速くなるとは予想しておりませんでしたが、棚からぼた餅です。
Firefox 最高!


(共謀罪最低!)

Web APIでディレクトリーを読み込む機能を標準化して欲しい。 [プログラミング]

この度、自作のウェブ プログラム音楽ファイルを読み込んで音楽を再生出来るように致しました。

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

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

これは自作のHTML5 音楽再生ウェブ アプリケーション プログラムで音楽ファイルを再生させながらヴィジュアライザーを表示している状態のスクリーンショット画像です。

音楽ファイルの読み込みには " HTMLInputElement " を利用しております。

ファイル入力の標準化された方法と致しまして、HTMLの " input " 要素で " type="file" " 、 " multiple " 属性を設定する事でウェブ ブラウザーの標準のファイル選択用のボタンが画面に表示され、それを押すとファイルを1つまたは複数選択して参照する事が出来ます。
私は以前作成した " HTML5 インタラクティヴ ジェネレーティヴ ディジタル アート " ではこの方法を利用致しました。

ですが私が新たに作成した " 音楽再生ウェブ アプリケーション " では、非標準の " HTMLInputElement.webkitdirectory " を利用して音楽ファイルが入っているフォルダーのあるディレクトリーを読み込むように致しました。

そして、読み込んだファイルの相対パスとファイル名に基づいてファイルの順序をクイックソート アルゴリズムで並べ替えてから " window.URL.createObjectURL( fileList[i] ) " で選択したファイル毎のURLを生成させ、音楽再生時に " XMLHttpRequest " でURLからデータを取得し、 " audioContext.decodeAudioData() " で音楽データをデコードして、バッファーにデータを入れて出力させます。

選択したフォルダー以下にある全てのフォルダーと音楽ファイルを読み込んでリストにして再生出来ます。

現状では、セキュリティ上の配慮からディレクトリーへのアクセスが可能な " HTMLInputElement.webkitdirectory " はWeb標準化されておりません。
その為、ヴェンダー プリフィクスが付いており、仕様が固まっていない上、将来標準化されるかどうかも不透明です。
一応、現在主流のブラウザーは対応しているようです。

この機能は非常に利用価値が高いものですので、是非とも標準化して心置き無く使用出来るようになって欲しいところです。

"MDN" (Mozilla Developer Network)の "HTMLInputElement.webkitdirectory" のページのURL:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory

"YaCy" が安定性向上のアップデート配信しました。 [P2P検索エンジン YaCy]

->->
[2017年6月15日追記]
私の環境で最新版のYaCyがCPU負荷100%になってしまう現象が確認されました。
この件についてバグ レポートを致しましたところ、回答を頂きました。
どうやらSolrの問題だそうで、私のデータが大き過ぎる為に引き起こされる現象であるようです。
私の現象の場合、 " yacy/defaults/solr/solrconfig.xml " というファイルの " <str name="buildOnStartup">false</str> " という項目に " <searchComponent name="suggest" class="solr.SuggestComponent"> " と書き加える事により問題が解消致しました!
<-<-

先日、P2P通信技術による分散型インターネット検索エンジンである " YaCy " (ヤスィー)のアップデートが配信されました。
YaCyのヴァージョンは、 " 1.921/9236 " となっております。
このヴァージョンでは全文検索エンジンがSolr 6.6へヴァージョン アップしております。

注意点と致しまして、このヴァージョンではJava 8が必要となっております。Java 7以前のヴァージョンのJava VMを利用している方は最新のJava 8をインストールしてからYaCyをアップデートするようにして下さい。

Java 8が利用出来るようにした後、既にYaCyを利用している方は、管理画面から最新のリリースをダウンロード、インストールしてアップデート出来ます。
未だYaCyをインストールしていない方は、まず公式ウェブサイトよりヴァージョン 1.92をダウンロード、展開、立ち上げてから同様に管理画面より最新版にアップデート出来ます。

私はYaCy 1.921/9236へアップデートしたところ、以前は時たま " UNRESOLVED PATTERN " というエラーが出る事があったのですが、この様な不具合は無くなりました。

また、YaCy Grid (YaCy/2)の開発も進んでいるようで、今後数ヶ月以内に利用可能になるようです。

"YaCy" の公式 "Twitter" アカウントのURL:
https://twitter.com/yacy_search

"YaCy" の公式ウェブサイトのURL:
http://yacy.net/en/index.html

[ブログ記事]
分散型検索エンジン "YaCy" が正式に日本語化されました。
http://crater.blog.so-net.ne.jp/2016-02-25

検索エンジン "YaCy" は実用性充分です。
http://crater.blog.so-net.ne.jp/2015-10-15

分散型検索エンジン YaCy の導入解説
http://crater.blog.so-net.ne.jp/2015-07-21

分散型検索エンジン YaCy のアップデート
http://crater.blog.so-net.ne.jp/2015-06-25

分散型検索エンジンYaCyについての解説動画
http://crater.blog.so-net.ne.jp/2015-03-22

Ubuntu PCでYaCy検索エンジンの為のポート開放の設定
http://crater.blog.so-net.ne.jp/2014-11-06

音楽と干渉する重低音の唸りが、とても心地良い。 [音]

JS_Art_SS_(2017_05_23)_2_Cropped_1 HTML5 インタラクティヴ ジェネレーティヴ ディジタル アートのスクリーンショット画像。 黒い背景の上に1つの光の円盤がある。 光の円盤からは 眩しく光り輝く青緑色の粒子が多数放出されており、青緑色や青紫色のリボンのような曲線が多数くねりながら放射されている。 光の円盤の周囲には青緑色の光輪がある。
https://c1.staticflickr.com/5/4272/34845047985_98d357231a_o.png
これは自作のHTML5 インタラクティヴ ジェネレーティヴ ディジタル アートのCanvas上をクリックして音を出した瞬間のスクリーンショット画像です。

自作のウェブ プログラムである、 " HTML5 インタラクティヴ ジェネレーティヴ ディジタル アート " では力強く迫力のある重低音を発する事が可能です。

HTML5のCamvasと "JavaScript" で音声処理と画像描画。
http://crater.blog.so-net.ne.jp/2016-06-30

音楽再生ソフトウェアの " Audacious " で重低音を含む楽曲を再生させ、その曲の中の重低音に合わせて、このウェブ プログラムにて重低音を再生させると、楽曲中の重低音とウェブ プログラムの発する重低音が干渉し、唸り(うなり)を上げます。

重低音が良質な楽曲と言えば、 " 宇多田ヒカル " さんの昔の名曲達がまず思い出されます。
宇多田ヒカルさんの昔の楽曲は豊かな重低音を巧みに使用し、その重低音のヴァリエーションも豊富であり、しかも濁らずに美しく楽曲に調和しております。

私は宇多田ヒカルさんの名曲、 " SAKURAドロップス" などを再生させ、自作ウェブ プログラムの重低音と合わせてみましたところ、それはそれは凄い体験が出来ました。
今までにライヴ コンサートやストリート ダンス イヴェントへ行った時などでも経験出来なかったような、重低音の渦に飲み込まれるような、筆舌に尽くし難い位の心地良い体験でした。

このウェブ プログラムでは音の高さや持続する長さなどは自在ですので、自分が心地良いと感じる唸り具合を探る事が出来ます。
周波数の差が小さい低周波音同士の唸りですので、その唸りは耳に聞こえるよりも低い可聴帯域外の低周波音となりますが、重低音の振幅として耳と体で感じ取る事が出来ます。
私は音楽再生ソフトウェアの " Audacious " で音量を7割程に下げて音楽を再生させ、ウェブ プログラムの方で凡そ50[Hz]位の重低音を再生させると最も迫力がありました。

勿論どのような楽曲でも良い訳ではなく、このウェブ プログラムとの相性と言ったものがあるようで、全く心地良くない組み合わせもございます。

しかしながら、重低音好きの人には是非体験してみて貰いたいと思うものでした。
お試しの際には、大型のサブウーファーなどの御使用を推奨致します。

->->
[2017年6月15日追記]
自作のウェブ プログラム自体に音楽再生機能を追加致しました。

JS_Art_SS_(2017_06_12)_1_Cropped_1 HTML5インタラクティヴ ジェネレーティヴ ディジタル アートのスクリーンショット画像。 黒い背景の上に1つの光の円盤がある。 光の円盤からは 眩しく光り輝く青色の粒子が多数放出されている。 光の円盤の周囲には青色の光輪がある。 画面の下方には音楽のスペクトラム アナライザーのヴィジュアライザーが描画されており、垂直の青色のバーが多数横方向に並んで伸び縮みしている。 青色のバーは明るさと再度と色相に微妙なグラデーションが掛かっている。
https://c1.staticflickr.com/5/4235/34423804153_be239c1372_o.png
これは自作のHTML5 インタラクティヴ ジェネレーティヴ ディジタル アートで音楽ファイルを再生させながらCanvas上をクリックして音を出した瞬間のスクリーンショット画像です。

自身の端末に保存されている音楽ファイルを複数選択して再生させる事が出来ます。
この際、音楽ファイルへのリンク、ショートカット、エイリアスを選択する事も可能ですので、プレイリストのように利用可能です。
音楽の再生音量はスライダーで調整可能ですので、音楽を再生しながらキーボード演奏機能で音を重ねたり、重低音を鳴らして唸りを発生させたりして遊べます。
スペクトラム アナライザーヴィジュアライザーも独自に実装致しました。

至高の重低音プレイを楽しみたい場合は、このウェブ プログラムで重低音の似合う楽曲を再生させながら、キーボード演奏機能オクターヴ番号のラジオ ボタンで " 1 " を選択して、キーボードの下段と上段を弾くと凄い体験が出来ます。

" 宇多田ヒカル " さんの昔の名曲達の他、 " Jennifer Lopez " さんの名曲達も重低音プレイと相性が良いようです。
<-<-