2023 ソフトウェア設計及び演習用の班Wiki

23::gr03::モジュール分け

モジュール分け(html, js, cssファイルの順)

htmlファイル

top.html(担当:刈谷、中野、角掛)
  • トップページ。他のhtmlファイルのパスを使って画面切り替えを行えるようにする

voice_imput.html(担当:吉田、中島)
  • 声の入力を行う画面。
  • マイクでの入力を行い、以下のものを表示する
    • 現在観測中の音
    • 読み取った最高音・最低音
    • 読み取っている音声波形

  • 観測音をもとに、音域の決定は半自動で行う

manual_input.html(担当:角掛)
  • 音域を自分で選択する画面。最低音、地声最高音、裏声最高音をそれぞれ入力する
  • 入力はint型の整数戻り値も整数。

singer_search.html(担当:角掛)
  • 歌手名を入力する画面
  • 入力された文字が含まれている歌手を表示するサジェスト機能あり
  • 入力はstring型の文字列
  • data_search.jsから該当歌手の曲名が入ったリストを返す

song_search.html(担当:角掛)
  • 曲名を入力する画面。
  • 入力された文字が含まれている曲を表示するサジェスト機能あり
  • 入力はstring型の文字列。
  • data_search.jsから該当の曲名が入ったリストを返す

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

voice_sample.html(担当:吉田)
  • それぞれの音階( mid1E ~ hihiA )の音声サンプルを表示。



javascriptファイル

data_search.js(担当:島脇、清水、正野、角掛)
  • 構造体で曲のデータをデータベ保存するデータベース。
  • 受け取った変数に応じて返す構造体の中身を決定する。
  • 検索結果に対応した曲のリスト(構造体)をoutput.jsに渡す

tuner.js(担当:吉田、中島)
  • 音声入力の結果から音域を割り出し、結果をdeta_search.jsに送る

output.js(担当:角掛)
  • 出力方法を制御するファイル。
    • 数字で管理しているが、表示形式に変換しなければならないもの
    • 表形式での表示のさせ方

pitch_match.js(担当:角掛、島脇)
  • 音階を文字や数字で管理し、それぞれに変換する

sort.js(担当:角掛)
  • 結果表示画面における音階での並び替えを制御するファイル。

key_control.js(担当:角掛)
  • output.htmlで表示する曲の音域の条件を変える。

singer_filter.js(担当:角掛)
  • 結果表示画面において出力する歌手名などに条件で絞り込みをする



cssファイル

top.css(担当:刈谷)
  • トップページのデザイン

input.css(担当:角掛)
  • 音域検索(manual_input.html)、歌手名検索(singer.html)、曲名検索(song.html)に用いるデザイン

voice_input.css(担当:角掛)
  • 音声入力画面(voice_input..html)のデザイン

manual_input.css(担当:角掛)
  • 手動入力画面(manual_input.html)のデザイン

name_search.css(担当:角掛)
  • 曲名や歌手名で検索ページの検索バーのデザイン

setting.css(担当:角掛)
  • 設定画面(setting.html)のデザイン

output.css(担当:角掛)
  • 検索結果の出力画面(output.html)のデザイン



モジュール分けの図

モジュール分け(最新).jpg


最終更新日:2023/07/28 11:56:36