最终版2

改了界面
999Yy999 · Jun 10, 2020 · 46def87 · 46def87
1 parent b12c965
commit 46def87
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 18 deletions.
diff --git a/NewAudioR/src/main/java/com/audio/controller/AudioController.java b/NewAudioR/src/main/java/com/audio/controller/AudioController.java
@@ -60,7 +60,7 @@ public String showmusics(@RequestParam(defaultValue="1") int pc,Model model){
  model.addAttribute("musics", musics);
 
  // 给定ps的值，每页显示的行数,默认值PageBean给的是每页显示10条
- int ps = 30;
+ int ps = 10;
  //将查询的数据封装到分页控件 pc tr ps beanList
  PageBean<HashMap<String,Object>> pb = audioService.listMusicByPage(pc,ps);
  model.addAttribute("pb", pb);

diff --git a/NewAudioR/src/main/webapp/resources/css/filter.css b/NewAudioR/src/main/webapp/resources/css/filter.css
@@ -14,9 +14,34 @@
 }
 
 .filter {
+ display: inline;
+ border-radius: 5px 5px 5px 5px;
+ background: #008080;
+ padding: 10px 12px 10px 12px;
+ font-size: 25px;
+ text-align: center;
+ color: white;
+ margin-top: 15px;
+ line-height: 20px;
+ cursor: pointer;
+ cursor: hand;
+ box-shadow: 3px 2px 5px #484b49;
+
+ padding-left: 60px;
+ padding-right: 60px;
+ margin-right: 60px;
+ margin-top: 5px;
+ margin-bottom: 5px;
+ border-top-width: 0px;
+ border-bottom-width: 0px;
+ border-right-width: 0px;
+ border-left-width: 0px;
+}
+
+.search{
  display: block;
  border-radius: 5px 5px 5px 5px;
- background: #495570;
+ background: #008080;
  padding: 10px 12px 10px 12px;
  font-size: 25px;
  text-align: center;
@@ -25,11 +50,15 @@
  line-height: 20px;
  cursor: pointer;
  cursor: hand;
- box-shadow: 3px 2px 5px #888888;
+ box-shadow: 3px 2px 5px #484b49;
 }
+.search:hover {
+ background: #305f5f;
+}
+
 
 .filter:hover {
- background: #53627F;
+ background: #305f5f;
 }
 
 #dec {

diff --git a/NewAudioR/src/main/webapp/resources/css/home.css b/NewAudioR/src/main/webapp/resources/css/home.css
@@ -11,7 +11,7 @@ body {
 
 body {
  font-family: 'Arial', sans-serif;
- background-color: #495570;
+ background-color: #b3dfe3;
  vertical-align: bottom;
 }
 
@@ -21,7 +21,16 @@ body {
  right: 0;
 }
 
-#articles {
+
+.functions {
+ padding: 5px;
+ color: #000;
+ font-weight: 300;
+ font-size: 50px;
+ text-align: right;
+}
+
+#musics {
  padding: 5px;
  color: #e2f2fe;
  font-weight: 300;

diff --git a/NewAudioR/src/main/webapp/resources/html/home.html b/NewAudioR/src/main/webapp/resources/html/home.html
@@ -37,8 +37,13 @@
  </script>
  -->
  <div class="canvas">
- <div id="title">Audio Recognizition</div>
- <div id="articles">Musics:1316</div> <!-- 之后动态获取数据到这里 -->
+ <div id="title">音乐识别系统</div>
+ <div id="musics">1316首音乐</div> <!-- 之后动态获取数据到这里 -->
+ <br/><br/><br/>
+ <div class="functions">1.建指纹库</div>
+ <div class="functions">2.录音识曲</div>
+ <div class="functions">3.辅助识别</div>
+ <div class="functions">4.测试识别率</div>
  <!-- 
  <div id="years"></div>
  <div id="sets"></div>

diff --git a/NewAudioR/src/main/webapp/resources/js/app.js b/NewAudioR/src/main/webapp/resources/js/app.js
@@ -85,11 +85,11 @@ function pauseRecording(){
  if (rec.recording){
  //pause
  rec.stop();
- pauseButton.innerHTML="继续";
+ pauseButton.innerHTML="继续录制";
  }else{
  //resume
  rec.record()
- pauseButton.innerHTML="暂停";
+ pauseButton.innerHTML="暂停录制";
 
  }
 }
@@ -103,7 +103,7 @@ function stopRecording() {
  pauseButton.disabled = true;
 
  //reset button just in case the recording is stopped while paused
- pauseButton.innerHTML="暂停";
+ pauseButton.innerHTML="暂停录制";
 
  //tell the recorder to stop the recording
  rec.stop();
@@ -119,6 +119,7 @@ function createDownloadLink(blob) {
 
  var url = URL.createObjectURL(blob);
  au = document.createElement('audio');
+
  var li = document.createElement('li');
  var link = document.createElement('a');
 
@@ -207,7 +208,7 @@ function add(blob){
  var tr=document.createElement("tr");
  // 新建一项
  var id=document.createElement("td");
- var dur=document.createElement("td");
+ //var dur=document.createElement("td");
  //var noise=document.createElement("td");
  //var url=document.createElement("td");
  var play=document.createElement("td");
@@ -220,7 +221,13 @@ function add(blob){
  var filename = new Date().toISOString();
  var vartist=document.getElementById("artist").value;
  var valbum=document.getElementById("album").value;
-
+ var invartist,invalbum;
+ if (vartist==""){
+ invartist="无";
+ }
+ if (valbum==""){
+ invalbum="无";
+ }
  //a.href=au.src;
  ///a.download=filename+".wav";
  //a.innerHTML="下载";
@@ -233,10 +240,19 @@ function add(blob){
 
  //id内容
  id.innerHTML=num;
- dur.innerHTML=au.duration;
+
+ //dur.innerHTML=au.duration;
  //url.innerHTML=au.src;
- tdinputartist.innerHTML=vartist;
- tdinputalbum.innerHTML=valbum;
+ if (vartist==""){
+ tdinputartist.innerHTML=invartist;
+ }else{
+ tdinputartist.innerHTML=vartist;
+ }
+ if(valbum==""){
+ tdinputalbum.innerHTML=invalbum;
+ }else{
+ tdinputalbum.innerHTML=valbum;
+ }
 
  //xm.innerHTML="第"+num+"学生";
  //var search=document.createElement("td");
@@ -246,7 +262,7 @@ function add(blob){
  tbody.appendChild(tr);
  //id加到表里
  tr.appendChild(id);
- tr.appendChild(dur);
+ //tr.appendChild(dur);
  //tr.appendChild(noise);
  //tr.appendChild(url);
  tr.appendChild(play);
@@ -258,7 +274,7 @@ function add(blob){
  var req="?artist="+vartist+"&album="+valbum;
  var upload = document.createElement('a');
  //upload.href="#";
- upload.innerHTML = "Search";
+ upload.innerHTML = "识别";
  upload.addEventListener("click", function(event){
  var xhr=new XMLHttpRequest();
  //设置响应返回的数据格式