So-net無料ブログ作成
  • ブログをはじめる
  • ログイン
音楽再生ウェブ アプリケーション ブログトップ

ウェブ音楽プレイヤーの視覚エフェクトの見た目を改良しました。 [音楽再生ウェブ アプリケーション]

JS_Music Player_SS_(2018_06_10)_1_edited_1 黒い背景の上に黄色、青色それぞれの二重の光の輪が広がり、輪と同色の粒子が無数に飛び散っている。 画面下部には高さがまちまちの青色と紫色のグラデーションの縦長の棒が横方向に沢山並んだ音楽スペクトラム アナライザーのヴィジュアライザーが表示されている。 画面最上部にはアーティスト名、アルバム名、曲名が表示されている。
https://c2.staticflickr.com/2/1749/40896433410_53ba332f9a_o.png
自作のHTML5 ウェブ音楽プレイヤーで音楽を再生している時に表示されるスペクトラム アナライザーの見た目に垂直方向のグラデーションを付けてみました。
音量が大きい部分が明るくなるので、より華やかになり、気分も盛り上がります。
また、花火のようなエフェクトにつきましても、中心の輪にグラデーションを付けました。
スクリーンショットでは少々分かり難いですが、実際に再生すると豪華です。

HTML5のCancasでスペクトラム アナライザーやパーティクルのエフェクトなどを実装するのは簡単だし楽しいです。
次のウェブアプリのページ下部のリンクからソース コードをダウンロードできます。

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

是非遊んでみて下さい。
プレイリストの自動保存、書き出し、読み込みに対応しています。
キーボードを打鍵してピアノ演奏ができます。
重低音を出せます。

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

音楽プレイヤーのタイトル表示部をCSSでモノクローム液晶画面のような表示にしました。 [音楽再生ウェブ アプリケーション]

JS_Music Player_SS_(2018_02_27)_1_cropped_1 黒い背景の上に緑色、黄色、青色の幾つもの二重の光の輪が広がり、輪と同色の粒子が無数に飛び散っている。 画面下部には高さがまちまちの水色の縦長の棒が横方向に沢山並んだ音楽スペクトラム アナライザーのヴィジュアライザーが表示されている。 画面最上部にはアーティスト名、アルバム名、曲名が表示されている。
https://c1.staticflickr.com/5/4740/25630768797_b7030543b7_o.png
自作のHTML5 ウェブ音楽プレイヤーのアーティスト名、アルバム名、曲名を表示する部分(スクリーンショット画像の最上部)をCSSのスタイルで昔のモノクローム液晶画面風にしてみました。
枠を立体的にして、ボックス内に液晶っぽい色を付け、文字と枠の内側に影を付けただけですが、懐かしい液晶の見た目が再現出来たと思います。
ただ、タイトルの背景が明るいと目立ってしまい、Canvasのヴィジュアライザーの邪魔になるので、背景は大分暗く設定してあります。

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

SS_MonochromeLCD_CSS_(2018_02_27)_1 モノクローム液晶のように見える画面デザインのスクリーンショット画像。
https://c1.staticflickr.com/5/4724/25643650397_461ccceb8b_o.png
モノクロ液晶風のCSS スタイルのサンプル画像です。

[モノクローム液晶画面風のインライン style属性のサンプル コード]
<div id="monochromeLCD_outerFrame"
 style="position: relative; margin-right: auto; width: 480px;
 background-color: #8e8e8e;
 border-top: solid 4px #606060; border-left: solid 4px #4e4e4e;
 border-right: solid 4px #202020; border-bottom: solid 4px #0e0e0e;
 color: #aeaeae"
>

<div id="monochromeLCD_innerFrame"
 style="position: relative; padding: 2px;
 background-color: #2e2e2e;
 text-align: left; text-shadow: 1px 1px 1px #000000"
>

Monochrome LCD

<div id="monochromeLCD"
 style="position: relative; padding: 4px; height: 80px;
 background-color: #2e2e2e"
>

<div id="displayAreaOfMessage"
 style="width: 320px; position: absolute; bottom: 8px; padding: 4px 12px;
 background-color: #6c6e6a;
 border-top: solid 2px #0e0e0e; border-left: solid 2px #202020;
 border-right: solid 2px #4e4e4e; border-bottom: solid 2px #606060;
 box-shadow: 1px 1px 4px 4px #2c2e2a inset;
 text-align: left; color: #202020; font-size: 20px; text-shadow: 1px 1px 2px #202020"
>

I love you!<br />
How about you?

</div>
<div
 style="position: absolute; bottom: 2px; right: 0"
>

Old style.

</div>
</div>

<div
 style="border-top: solid 2px #0e0e0e; border-bottom: solid 2px #606060"
>
</div>

Retro Design.

</div>
</div>


[実際の表示]
Monochrome LCD
I love you!
How about you?
Old style.
Retro Design.


ブログ最終確認日: 2018年5月3日
nice!(1)  コメント(0) 

HTML5 ウェブ音楽プレイヤーのヴィジュアライザーに改造を施しました。 [音楽再生ウェブ アプリケーション]

自作のウェブ音楽プレイヤーの視覚効果に手を加えました。

JS_Music Player_SS_(2017_09_17)_1_Cropped_1 HTML5 ミュージック プレイヤーのスクリーンショット画像。 黒い背景の上に多数の色とりどりの二重の光る円環があり、円環の中心からその円環と同色の多数の輝く粒子と光線が放出されている。 画面の下方には音楽のスペクトラム アナライザーのヴィジュアライザーが描画されており、垂直の青緑色のバーが多数横方向に並んで伸び縮みしている。 青緑色のバーは明るさと色相に微妙なグラデーションが掛かっている。
https://c1.staticflickr.com/5/4423/37093818902_0d5e8080ff_o.png
音のアクセントがあった時に波紋と花火のような色とりどりの光の粒子が放出されるのですが、これに新たに光線も追加致しました。

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

このページに掲載しているスクリーンショット画像は、音楽を再生しながらキーボードを打鍵してスペクトラム アナライザーと視覚効果が描画されている様子です。

キーボードを弾いて奏でられる重低音が凄いですよ。
プレイリスト機能もございます。
ソースコードは公開しております。

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

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

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

自作のウェブ音楽プレイヤーに少々手を加えました。
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) 

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

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

ブログ記事: "ウェブ音楽プレイヤー"
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の最新版でも機能すると思います。

音楽再生ウェブ アプリケーション ブログトップ