((outline))

!!! ページリンク
>>{24::gr10}{班ページトップへ}<br><br>
<br><br>


!!!モジュール分け

!!htmlファイル（cssも付随）

:__search.html__
* プルダウンを使って音域を入力できるようにする。
* 曲名や歌手名を入力できるようにする。
** 検索時にサジェスト機能があると良い

:__search.html__
* ユーザーが入力した音階からから当てはまる楽曲を検索する画面
* 機能
** 曲全体の音階を調整するボタン
** 入力された音階を微調整するボタン
** 音ごとに昇順、降順でソートするボタン

*data_search.jsから該当歌手の曲名が入ったリストを返す
<br><br>

:__list_output.html__
*「音域検索」では、その音域に当てはまる曲のリストを出力する。
*「歌手名検索」や「曲名検索」では、該当する歌手の曲のリスト又は、検索した曲をピンポイントで出力する。
*表形式で出力し、歌手名や音域での並び替えや、歌手名でのフィルタリングを行えるようにする。
*キー変更したときに自分の音域に当てはまる曲もわかるようにする
<br><br>

:__song_output.html__
* 楽曲の「曲名」、「歌手名」、「音域」、「MV」、「歌詞」など、楽曲にまつわる情報を出力する。
<br><br>

:__input.html__
*トップページ。楽曲を曲名や歌手名、音域から検索する。
*お試しで音を聞くことができるキーボードと、マイクから音を拾って、最高音、最低音を出力してくれる簡易音域チェッカーを使って、検索に役立てられるようにする。
*右上のアイコンから、ログイン画面に遷移する。
<br><br>

!!javascriptファイル

:__data_search.js__
*構造体で曲のデータをデータベ保存するデータベース。
*検索結果に対応した曲のリスト（構造体）をoutput.jsに渡す
<br><br>


:__output.js__
*出力方法を制御するファイル。
**数字で管理しているが、表示形式に変換しなければならないもの
**表形式での表示のさせ方
<br><br>


:__sort.js__
*結果表示画面における音階での並び替えを制御するファイル。
<br><br>


:__singer_filter.js__
*結果表示画面において出力する歌手名などに条件で絞り込みをする
<br><br>

:__filter.js__
*結果表示画面において表示やソート、キーの変更の制御を行うファイル。
*window.onloadでページを開いたときにフィルタを行うように設定
*関数
**filterAndDisplay() 入力された音階に対応する曲を検索し表示する関数
**convertToNoteNumber() 入力された音階や調整後の音階を表示する関数
**displayPagination() 表示された曲をページ分けして表示する関数
**incrementValue() 音ごとにキーを上げる関数
**decrementValue() 音ごとにキーを下げる関数
**incrementValues() 曲ごとにキーを上げる関数
**decrementValues() 曲ごとにキーを下げる関数
**incrementCounter()　キー変更をHTMLへ反映する
**decrementCounter()　キー変更をHTMLへ反映する
**updateCounters()　キー変更の合計を計算する関数
**convertToNote()　数値から音階へ変換する関数
**sortDataA()　昇順でソートする関数
**sortDataD()　降順でソートする関数

:__login.js__
* アカウント作成やログイン時に参照するデータ。
<br><br>

:__input.js__
* input.htmlに関するscriptが入っている。
*入力した曲名をsong_output.htmlに、歌手名をartist_song.htmlに、音域をsearch.htmlに渡すための関数が入っている。
*キーボード部分で鳴らす音の制御、周波数解析部分の制御を行っている。
*
検索部分<br>
search()...音階での検索<br>
search_so()...曲名での検索<br>
search...si()...歌手名での検索
*
キーボード部分<br>
make_sound()...設定した周波数から正弦波で音を作成<br>
play_sound()...make_soundで作成した音の再生<br>
*
周波数解析部分<br>
addEventListner()...周波数解析の制御<br>
function draw()...波形の描画<br>
frequencyToPitch()...周波数→音階の変換を行う


!!入力、検索画面
*担当：澤田昌弥<br>
   input.html<br>
   input.js<br>
   input.css<br>

*トップページ。楽曲を曲名や歌手名、音域から検索する。
*お試しで音を聞くことができるキーボードと、マイクから音を拾って、最高音、最低音を出力してくれる簡易音域チェッカーを使って、検索に役立てられるようにする。
*右上のアイコンから、ログイン画面に遷移する。
<br><br>