So-net無料ブログ作成
検索選択
前の8件 | -

自作のウェブ音楽プレイヤーを微改造致しました。 [音楽再生ウェブ アプリケーション]

自作のウェブ音楽プレイヤーに少々手を加えました。
JS_Music Player_SS_(2017_08_01)_1_Cropped_1 HTML5 ミュージック プレイヤーのスクリーンショット画像。 黒い背景の上に多数の色とりどりの二重の光る円環があり、円環の中心からその円環と同色の多数の輝く粒子が放出されている。 画面の下方には音楽のスペクトラム アナライザーのヴィジュアライザーが描画されており、垂直の紫色のバーが多数横方向に並んで伸び縮みしている。 紫色のバーは明るさ色相に微妙なグラデーションが掛かっている。
https://c1.staticflickr.com/5/4305/35502920313_e252aa8d90_o.png
少々派手目にデザイン致しました。

JS_Music Player_SS_(2017_08_01)_2_Cropped_1 HTML5 ミュージック プレイヤーのスクリーンショット画像。 黒い背景の上に多数の色とりどりの二重の光る円環があり、円環の中心からその円環と同色の多数の輝く粒子が放出されている。 画面の下方には音楽のスペクトラム アナライザーのヴィジュアライザーが描画されており、垂直の青色のバーが多数横方向に並んで伸び縮みしている。 青色のバーは明るさ色相に微妙なグラデーションが掛かっている。
https://c1.staticflickr.com/5/4329/36310119965_2306d6f0b0_o.png
具体的には、スペクトラム アナライザーのヴィジュアライザーの色について、以前は青一色で固定だったのですが、時間と共に様々な色に変化して行くように変更致しました。
また、明るさの変化の仕方も修正致しました。

人それぞれ色の好みなどがあり、このようなデザインは好みではない方も居らっしゃるかもしれませんが、私の感覚で作成致しました。

このページに掲載しているスクリーンショット画像は、音楽を再生しながらキーボードを打鍵して沢山の波紋が広がり、多数の粒子が四方八方に飛び散っている様子を記録したものです。

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

nice!(3)  コメント(0) 

ウェブサイトを一括で全部ダウンロードする方法。 [ウェブサイトをダウンロードする方法]

最も簡単に任意のウェブサイトを全部ダウンロードして保存する方法です。
勿論、使用するのは " wget " コマンドです。
wget コマンドはCUIから利用可能で、ウェブサイトのリンクを辿りながらページや画像などのコンテンツをダウンロードして保存したり出来る便利な機能です。
wgetがインストールされていない場合はまずwgetをインストールして置いて下さい。

以下に、写真投稿サーヴィスのFlickrから静的に画像が貼られたウェブサイトをダウンロードするコマンドの例を示します。
wget -r -l 3 -k -p -w 1 --random-wait \
--reject-regex='_o.png|_o.jpg' \
-H -D xxxx.xxxx.jp,\
c1.staticflickr.com,c2.staticflickr.com,c3.staticflickr.com,c4.staticflickr.com,c5.staticflickr.com,c6.staticflickr.com,c7.staticflickr.com,c8.staticflickr.com,c9.staticflickr.com,\
farm1.staticflickr.com,farm2.staticflickr.com,farm3.staticflickr.com,farm4.staticflickr.com,farm5.staticflickr.com,farm6.staticflickr.com,farm7.staticflickr.com,farm8.staticflickr.com,farm9.staticflickr.com \
http://xxxx.xxxx.jp/ \
-P ./download/site001/


[使用したオプションと引数の説明]
-r
ハイパーリンクを辿って再帰的にダウンロードします。既定値では5階層まで辿ります。

-l 3
再帰的に辿るリンクの階層数を指定した数に制限します。例では3回分のハイパーリンクを辿ります。

-k
ダウンロードが完了した後に、ファイル内に記述されているURLを、ローカルで閲覧するのに適したものに変換します。

-p
ウェブ ページを正しく表示するのに必要なファイルを全てダウンロードします。インラインの画像ファイル、音声ファイル、参照されるスタイルシートなどです。

-w 1
リクエスト毎に指定の秒数待ちます。例ではリクエスト間隔を1秒に設定しました。

--random-wait
リクエスト間隔を指定秒数の0.5倍から1.5倍の間で変化させる事により、ウェブサイトから遮断される事を回避します。

--reject-regex='_o.png|_o.jpg'
正規表現によって条件に合致するURLを弾きます。この例では " _o.png " という文字列を持つファイルと、 " _o.jpg " という文字列を持つファイルを弾きます。

-H
外部のドメインからもファイルをダウンロードします。

-D xxxx.xxxx.jp,c1.staticflickr.com,....
ファイルをダウンロードするドメインを限定します。複数のドメインを指定する際にはコンマ (,)で区切って列挙します。

http://xxxx.xxxx.jp/
ダウンロード対象の起点となる任意のURLを指定します。

-P ./download/site001/
ダウンロードしたファイルを保存するディレクトリー (フォルダー)を指定します。


この例のウェブサイトではページ内に、写真投稿サーヴィスのFlickrにアップロードされている画像を " <img> " タグで表示しています。
これらの静的にリンクされた画像も保存したいので、ダウンロード対象のウェブサイトのドメインに加えて、Flickrの画像データが置かれているドメインである " c1.staticflickr.com " から " c9.staticflickr.com " と " farm1.staticflickr.com " から " farm9.staticflickr.com " を、 " -H -D " に続けてコンマで区切って指定致します。

また、オリジナル サイズの画像ファイルはデータが大きく、サーヴァーのサーヴィスに負担を掛けてしまうので、 " _o.png " 及び " _o.jpg " で終わるファイル名を持つオリジナル サイズの画像をダウンロードしないように弾いております。


これにより、画像なども含めてウェブサイトを丸ごと全部ダウンロードして保存する事が出来ます。
注意点と致しまして、多くのファイルをダウンロードしようとすると、相手のウェブサイトのサーヴァーに過負荷となり、サーヴィスを妨害する事になりかねませんので、極力ウェブサイト全体のダウンロードは避けて下さい。 この方法を実行するのは、どうしても必要な場合だけにして下さい。

次の記事がとても参考になります。
"@IT" の記事 "Linux基本コマンドTips(24):【 wget 】コマンド――URLを指定してファイルをダウンロードする" のURL:
http://www.atmarkit.co.jp/ait/articles/1606/20/news024.html

"GNU Wget" の公式の解説ページのURL:
https://www.gnu.org/software/wget/manual/html_node/index.html

nice!(0)  コメント(0) 

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

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

ブログ記事: "ウェブ音楽プレイヤー"
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

前の8件 | -