2024 ソフトウェア設計及び演習用の班Wiki
24::gr10::モジュール分け
モジュール分け
htmlファイル（cssも付随）
- search.html担当：髙橋 俊喜
- ユーザーが入力した音階からから当てはまる楽曲を検索する画面
- 機能
- 曲全体の音階を調整するボタン
- 入力された音階を微調整するボタン
- 音ごとに昇順、降順でソートするボタン
-
data_search.jsから該当歌手の曲名が入ったリストを返す
- song_output.html担当：竹田 笙馬
-
楽曲の「曲名」、「歌手名」、「音域」、「MV」、「歌詞」など、楽曲にまつわる情報を出力する。
- input.html担当：澤田昌弥
- トップページ。楽曲を曲名や歌手名、音域から検索する。
- お試しで音を聞くことができるキーボードと、マイクから音を拾って、最高音、最低音を出力してくれる簡易音域チェッカーを使って、検索に役立てられるようにする。
- 右上のアイコンから、ログイン画面に遷移する。
- main.html担当：葛西 日向
- ログイン画面表示。ユーザー名とパスワードの受取を担う。
- input.htmlから、ページ遷移する。
javascriptファイル
- data_search.js担当：関口堂真
- 構造体で曲のデータを保存するデータベース。
- 検索結果に対応した曲のリスト（構造体）をoutput.jsに渡す
- filter.js担当：髙橋 俊喜
- 結果表示画面において表示やソート、キーの変更の制御を行うファイル。
- window.onloadでページを開いたときにフィルタを行うように設定
- 関数
- filterAndDisplay() 入力された音階に対応する曲を検索し表示する関数
- convertToNoteNumber() 入力された音階や調整後の音階を表示する関数
- displayPagination() 表示された曲をページ分けして表示する関数
- incrementValue() 音ごとにキーを上げる関数
- decrementValue() 音ごとにキーを下げる関数
- incrementValues() 曲ごとにキーを上げる関数
- decrementValues() 曲ごとにキーを下げる関数
- incrementCounter() キー変更をHTMLへ反映する
- decrementCounter() キー変更をHTMLへ反映する
- updateCounters() キー変更の合計を計算する関数
- convertToNote() 数値から音階へ変換する関数
- sortDataA() 昇順でソートする関数
- sortDataD() 降順でソートする関数
- script.js担当：葛西 日向
- アカウント作成やログイン時に参照するデータ。
- ログイン後、song_output.htmlへページ遷移。
- input.js担当：澤田昌弥
- input.htmlに関するscriptが入っている。
- 入力した曲名をsong_output.htmlに、歌手名をartist_song.htmlに、音域をsearch.htmlに渡すための関数が入っている。
- キーボード部分で鳴らす音の制御、周波数解析部分の制御を行っている。
-
検索部分
search()...音階での検索
search_so()...曲名での検索
search...si()...歌手名での検索 -
キーボード部分
make_sound()...設定した周波数から正弦波で音を作成
play_sound()...make_soundで作成した音の再生
-
周波数解析部分
addEventListner()...周波数解析の制御
function draw()...波形の描画
frequencyToPitch()...周波数→音階の変換を行う
入力、検索画面
-
担当：澤田昌弥
input.html
input.js
input.css
- トップページ。楽曲を曲名や歌手名、音域から検索する。
- お試しで音を聞くことができるキーボードと、マイクから音を拾って、最高音、最低音を出力してくれる簡易音域チェッカーを使って、検索に役立てられるようにする。
- 右上のアイコンから、ログイン画面に遷移する。
音域検索結果出力画面
-
担当：髙橋 俊喜
search.html
filter.js
- 入力、検索画面で入力された音階をもとに当てはまる楽曲を検索する画面。
- 検索後にキー、最高音、最低音、裏声最高音をボタンによって増加、減少させることができる。
- 最高音、最低音、裏声最高音をボタンによってソートすることができる。
楽曲検索結果出力画面
-
担当：竹田 笙馬
song_output.html
song_output.css
- 入力画面で入力された曲名や、音域検索結果画面でクリックされた曲名をもとに当てはまる楽曲の詳細（歌詞、MVなど）を表示する画面。
- ページ下部にあるボタンで、Topページである入力画面や、その楽曲を手掛けたアーティストのページに移動することができる。
- 最低音や最高音がどこか分かるように歌詞が見やすく施されている。
最終更新日：2024/07/26 14:12:51
