プログラミングスクール比較

プログラミングに関する情報サイトです。副業,稼ぎ方,学習方法,スクール等

プログラミング 学習

音楽 プログラミング アプリ( javascript,読み込み,再生,ゲーム)

投稿日:2020年12月1日 更新日:

音楽 プログラミング アプリ ベースを javascriptで少し簡単に
試作してみましたので、公開しておきます。

予告バーなどみたいなのはないような、シンプルなものです。
クリック判定はスペクトラム周波数の値で行っています。

 

音楽 プログラミング アプリ html部分

 

まずはhtmlの部分から

 

  • ファイル読み込みコントロール
  • スペクトラス周波数表示用canvas
  • ゲーム用のクリック用のボタン
  • ゲーム用の判定表示
  • ゲーム用の得点表示

などを表示しています。

 

音楽 プログラミング アプリ 変数初期化

 

以下からはjavascriptのコードです。
グローバル変数やキャンバスサイズの設定など。
ボタンクリックはクリックされるとグローバル変数がtrueになるだけ。

 

音楽 プログラミング アプリ スペクトラム周波数色分け表示

 

引数として受け取った、スペクトラム周波数の配列の値で
canvasにスペクトラムバーをHSVで色分けして描画する関数。
HSVやHSLは色相角度で色を求めることができるので
プログラミングで色を扱う時に使いやすいです。

 

音楽 プログラミング アプリ ボタン判定

 

クリック判定、引数のj_array,fps_cntで
判定を行い、得点を加算しています。

 

音楽 プログラミング アプリ ボタン判定の配列

 

クリック判定 する、しないの配列を作る。
スペクトラム周波数により判定を作っています。
音楽ファイルによって
b1_judge,b2_judge,b3_judge
を調整しないと判定が出ないか、出続ける
ので音楽ファイルによって値を変更する必要がある

ここを少し変更すると、予告バーの音符ファイルみたいなのを
作れるかと思います。

 

音楽 プログラミング アプリ ファイルをdataUALに変換

 

音楽ファイルをdataURLに変換
音楽ファイルが読み込まれたときに呼ぶ関数。

 

音楽 プログラミング アプリ Web Audio API初期化 メイン処理

 

以下はメインの処理、音楽ファイルが、ファイルコントロールに読み込まれた時のイベントです。

  • Web Audio API用初期化処理
  • 音楽ゲーム用の変数の初期化処理
  • 音楽ファイルからデータを取り出す

などの各初期化処理を1度だけ行う。

setIntervalに書かれている処理がメインで動く部分
スペクトラム描画とゲームのボタン判定処理と
なります。

 

音楽 プログラミング アプリ 全コード

 

上記したコードをすべてまとめたものです。
htmlにコピーすると、そのまま動きます。
(テスト動作、スマホだけCrayon Syntax Highlighterとの絡みで
変な表示になるので無しです)

試作してみた所は、音ゲーは予告バーがないともぐらたたき
みたいになるということが分かりました。
記事が伸びてくるようでしたら予告バーまで追加しておきます。

 

音楽 プログラミング アプリ 動作テスト






POINT:
0

-プログラミング 学習
-, , ,

記事
プログラミング スクール 退職後おすすめ

退職してからじっくりと学べるおすすめな プログラミング スクールを 紹介しています。 退職した場合は…

プログラミング 写経(模写)は時間の無駄かもしれないが上達する

プログラミング初心者の方は何からはじめていいのか わからないということで、とりあえずあまり考えずに …

プログラミング学習 挫折 対策

プログラミング 学習でのモチベーションの保ち方 を学習した際のことを考えていろいろと書いてみました。…

プログラミング 儲かる方法

プログラミング 副業 フリーランスでの 案件で稼ぐのではなく、趣味で儲ける方法を記載しています。 ア…