单击另一个DIV时停止播放音频

时间：2016-07-26 21:13:57

标签： jquery audio

我想知道你是否可以帮助我？我正在为一个项目创建一个小音板，以帮助我掌握jQuery。我希望当前活动声音文件中的音频停止并在单击另一个div时重置为开头，然后播放其关联的音频文件。目前这是我的页面设置方式：

HTML： 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Parisienne" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Archivo+Narrow" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/jquery-ui.js"></script>
  <script type="text/javascript" src="js/playaudio.js"></script>
    <title>Sample</title>
  </head>
  <body>
      <div class="title">Sample</div>
      <div id="accordion">
  <h3 class="accordion-title">Who Are We?</h3>
  <div class="accordion-content">
    <p>
    Content
    </p>
  </div>
  </div>
        <div class="wrapper">
          <div class="shake-overflow">
            <div id="button-div1"><img id="mobile-img" src="img/ralph-tongue.png" /><p class="button-text">Did He Really?</p></div>
            <div id="button-div2"><img id="mobile-img" src="img/ralph-tongue.png" /><p class="button-text">Train Tracks</p></div>
            <div id="button-div3"><img id="mobile-img" src="img/ralph-tongue.png" /><p class="button-text">Ayyy</p></div>
            <div id="button-div4"><img id="mobile-img" src="img/ralph-tongue.png" /><p class="button-text">Petey</p></div>
          </div>
          <div class="shake-overflow">
            <div id="button-div5"><img id="mobile-img" src="img/ralph-tongue.png" /><p class="button-text">Mr. Raj</p></div>
            <div id="button-div6"><img id="mobile-img" src="img/ralph-tongue.png" /><p class="button-text">Mary</p></div>
            <div id="button-div7"><img id="mobile-img" src="img/ralph-tongue.png" /><p class="button-text">At The Port</p></div>
            <div id="button-div8"><img id="mobile-img" src="img/ralph-tongue.png" /><p class="button-text">Twister</p></div>
          </div>
          <div class="shake-overflow">
            <div id="button-div9"><img id="mobile-img" src="img/ralph-tongue.png" /><p class="button-text">Lewis Poois</p></div>
            <div id="button-div10"><img id="mobile-img" src="img/ralph-tongue.png" /><p class="button-text">You're a Prick!</p></div>
            <div id="button-div11"><img id="mobile-img" src="img/ralph-tongue.png" /><p class="button-text">AHAHAHA</p></div>
            <div id="button-div12"><img id="mobile-img" src="img/ralph-tongue.png" /><p class="button-text">I Lived There</p></div>
          </div>
        </div>
  </body>
</html>

CSS： 

body{
  background: url(../img/leather-jacket.jpg) 50% 0 no-repeat fixed;
  background-size:cover;
  overflow: scroll;
  overflow-x: hidden;
}

img{
  max-width: 100%;
  height:auto;
}

.ui-state-focus { outline: none; }

.accordion-title{
  text-align: center;
  color:white;
  font-family: 'Parisienne', cursive;
  font-weight:normal;
  font-size: 30pt;
  width: 30%;
  margin: 0 auto;

}

.accordion-title:hover {
  cursor: pointer;
}

.accordion-content{
    margin:0 auto;
    margin-top:2%;
    margin-bottom:2%;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255,255,255,.22);
    width:40%;
    padding:15px;
    color:white;
    font-family: 'Archivo Narrow', sans-serif;
    font-size: 15pt;
}

.accordion-content p {
  -webkit-margin-before: 0em !important;
  -webkit-margin-after: 0em !important;
  text-align: justify;
}

.title{
  font-family: 'Parisienne', cursive;
  font-size: 50pt;
  font-weight:normal;
  text-align: center;
  color:white;
  border-bottom: 1px solid rgba(255, 255, 255, 0.29);
  margin-bottom:3%;
}

.wrapper{
  width:80%;
  background: rgba(0, 0, 0, 0.25);
  margin:0 auto;
  border:1px solid rgba(255,255,255,.22);
  overflow: hidden;
  padding:2%;
  margin-top:2.5%;
}

.wrapper img{
  margin-top:1%;
}

.logo{
  height:auto;
}

.shake-overflow{
  overflow: hidden;
}

.button-text{
  margin:1% 0 1% 0;
}

/*4 Column*/

#button-div1{
  width:20%;
  float:left;
  margin-right:6.53%;
  border:1px solid rgba(255,255,255,.22);
  margin-bottom:2%;
  font-family: 'Archivo Narrow', sans-serif;
  font-size:20pt;
  color:white;
  text-align: center;
}

#button-div1:hover{
  cursor:pointer;
  background: rgba(54, 54, 54, 0.28);
}

#button-div2{
  width:20%;
  float:left;
  margin-right:6.53%;
  border:1px solid rgba(255,255,255,.22);
  margin-bottom:3%;
  font-family: 'Archivo Narrow', sans-serif;
  font-size:20pt;
  color:white;
  text-align: center;
}

#button-div2:hover{
  cursor:pointer;
  background: rgba(54, 54, 54, 0.28);
}

#button-div3{
  width:20%;
  float:left;
  margin-right:6.53%;
  border:1px solid rgba(255,255,255,.22);
  margin-bottom:3%;
  font-family: 'Archivo Narrow', sans-serif;
  font-size:20pt;
  color:white;
  text-align: center;
}

#button-div3:hover{
  cursor:pointer;
  background: rgba(54, 54, 54, 0.28);
}

#button-div4{
  width:20%;
  float:left;
  border:1px solid rgba(255,255,255,.22);
  margin-bottom:3%;
  font-family: 'Archivo Narrow', sans-serif;
  font-size:20pt;
  color:white;
  text-align: center;
}

#button-div4:hover{
  cursor:pointer;
  background: rgba(54, 54, 54, 0.28);
}

#button-div5{
  width:20%;
  float:left;
  margin-right:6.53%;
  border:1px solid rgba(255,255,255,.22);
  margin-bottom:3%;
  font-family: 'Archivo Narrow', sans-serif;
  font-size:20pt;
  color:white;
  text-align: center;
}

#button-div5:hover{
  cursor:pointer;
  background: rgba(54, 54, 54, 0.28);
}

#button-div6{
  width:20%;
  float:left;
  margin-right:6.53%;
  border:1px solid rgba(255,255,255,.22);
  margin-bottom:3%;
  font-family: 'Archivo Narrow', sans-serif;
  font-size:20pt;
  color:white;
  text-align: center;
}

#button-div6:hover{
  cursor:pointer;
  background: rgba(54, 54, 54, 0.28);
}

#button-div7{
  width:20%;
  float:left;
  margin-right:6.53%;
  border:1px solid rgba(255,255,255,.22);
  margin-bottom:3%;
  font-family: 'Archivo Narrow', sans-serif;
  font-size:20pt;
  color:white;
  text-align: center;
}

#button-div7:hover{
  cursor:pointer;
  background: rgba(54, 54, 54, 0.28);
}

#button-div8{
  width:20%;
  float:left;
  border:1px solid white;
  border:1px solid rgba(255,255,255,.22);
  font-family: 'Archivo Narrow', sans-serif;
  font-size:20pt;
  color:white;
  text-align: center;
}

#button-div8:hover{
  cursor:pointer;
  background: rgba(54, 54, 54, 0.28);
}

#button-div9{
  width:20%;
  float:left;
  margin-right:6.53%;
  border:1px solid rgba(255,255,255,.22);
  font-family: 'Archivo Narrow', sans-serif;
  font-size:20pt;
  color:white;
  text-align: center;
}

#button-div9:hover{
  cursor:pointer;
  background: rgba(54, 54, 54, 0.28);
}

#button-div10{
  width:20%;
  float:left;
  margin-right:6.53%;
  border:1px solid rgba(255,255,255,.22);
  font-family: 'Archivo Narrow', sans-serif;
  font-size:20pt;
  color:white;
  text-align: center;
}

#button-div10:hover{
  cursor:pointer;
  background: rgba(54, 54, 54, 0.28);
}

#button-div11{
  width:20%;
  float:left;
  margin-right:6.53%;
  border:1px solid rgba(255,255,255,.22);
  font-family: 'Archivo Narrow', sans-serif;
  font-size:20pt;
  color:white;
  text-align: center;
}

#button-div11:hover{
  cursor:pointer;
  background: rgba(54, 54, 54, 0.28);
}

#button-div12{
  width:20%;
  float:left;
  border:1px solid rgba(255,255,255,.22);
  font-family: 'Archivo Narrow', sans-serif;
  font-size:20pt;
  color:white;
  text-align: center;
}

#button-div12:hover{
  cursor:pointer;
  background: rgba(54, 54, 54, 0.28);
}

/*2 Column*/

@media screen and (min-width: 601px) and (max-width:1227px){

.accordion-content{
  width:90%;
}

.accordion-title{
  width:90%;
  margin-bottom:2.5%;
}

.wrapper{
  width:90%;
  margin:0 auto;
  overflow: hidden;
  padding:2%;
}

#button-div1{
  width: 40%;
  float: left;
  margin-right: 8.5%;
  margin-left: 5.5%;
  margin-bottom: 3%;
}

#button-div2{
  width:40%;
  float:left;
  margin-right:0%;
  margin-bottom:3%;
}

#button-div3{
  width: 40%;
  float: left;
  margin-right: 8.5%;
  margin-left: 5.5%;
  margin-bottom: 3%;
}

#button-div4{
  width:40%;
  float:left;
  margin-bottom:3%;
}

#button-div5{
  width: 40%;
  float: left;
  margin-right: 8.5%;
  margin-left: 5.5%;
  margin-bottom: 3%;
}

#button-div6{
  width:40%;
  float:left;
  margin-right:0%;
  margin-bottom:3%;
}

#button-div7{
  width: 40%;
  float: left;
  margin-right: 8.5%;
  margin-left: 5.5%;
  margin-bottom: 3%;
}

#button-div8{
  width:40%;
  float:left;
  margin-bottom:3%;
}

#button-div9{
  width: 40%;
  float: left;
  margin-right: 8.5%;
  margin-left: 5.5%;
  margin-bottom: 3%;
}

#button-div10{
  width:40%;
  float:left;
  margin-right:0%;
}

#button-div11{
  width: 40%;
  float: left;
  margin-right: 8.5%;
  margin-left: 5.5%;
}

#button-div12{
  width:40%;
  float:left;
}
}

/*1 Column*/
@media screen and (min-width: 250px) and (max-width:600px){

  .shake-overflow{
    overflow:visible;
  }

  .accordion-content {
    width:90%;
  }

  .accordion-title{
    width:90%;
    margin-bottom: 2.5%;
  }

  .wrapper{
    width:90%;
    margin:0 auto;
    overflow: hidden;
    padding:2%;
  }

  #button-div1{
    width:100%;
    float:left;
    margin-right:0%;
    margin-bottom:3%;
  }

  #button-div2{
    width:100%;
    float:left;
    margin-right:0%;
    margin-bottom:3%;
  }

  #button-div3{
    width:100%;
    float:left;
    margin-right:0%;
    margin-bottom:3%;
  }

  #button-div4{
    width:100%;
    float:left;
    margin-bottom:3%;
  }

  #button-div5{
    width:100%;
    float:left;
    margin-right:0%;
    margin-bottom:3%;
  }

  #button-div6{
    width:100%;
    float:left;
    margin-right:0%;
    margin-bottom:3%;
  }

  #button-div7{
    width:100%;
    float:left;
    margin-right:0%;
    margin-bottom:3%;
  }

  #button-div8{
    width:100%;
    float:left;
    margin-bottom:3%;
  }

  #button-div9{
    width:100%;
    float:left;
    margin-right:0%;
    margin-bottom:3%;
  }

  #button-div10{
    width:100%;
    float:left;
    margin-right:0%;
    margin-bottom:3%;
  }

  #button-div11{
    width:100%;
    float:left;
    margin-right:0%;
  }

  #button-div12{
    width:100%;
    float:left;
    margin-bottom:0%;
  }
  }

}

JQUERY： 

$(document).ready(function() {
  var reallyObj = document.createElement("audio"); reallyObj.src="recordings/Did he really.m4a";  reallyObj.autoPlay=false;  reallyObj.preLoad=true;
  var trainObj = document.createElement("audio"); trainObj.src="recordings/Train.m4a"; trainObj.autoPlay=false; trainObj.preLoad=true;
  var ayyObj = document.createElement("audio"); ayyObj.src="recordings/Ayy.m4a"; ayyObj.autoPlay=false; ayyObj.preLoad=true;
  var peteyObj = document.createElement("audio"); peteyObj.src="recordings/Petey.m4a"; peteyObj.autoPlay=false; peteyObj.preLoad=true;
  var rajObj = document.createElement("audio"); rajObj.src="recordings/Mr. Raj.m4a"; rajObj.autoPlay=false; rajObj.preLoad=true;

  $('#button-div1').on('click', function(){
    reallyObj.play();

  });

  $('#button-div2').on('click', function(){
    trainObj.play();

  });

  $('#button-div3').on('click', function(){
    ayyObj.play();

  });

  $('#button-div4').on('click', function(){
    peteyObj.play();

  });

  $('#button-div5').on('click', function(){
    rajObj.play();

  });

  //div fadeIn
  $('#button-div1').hide().fadeIn(2000);
  $('#button-div2').hide().fadeIn(2200);
  $('#button-div3').hide().fadeIn(2400);
  $('#button-div4').hide().fadeIn(2600);
  $('#button-div5').hide().fadeIn(2800);
  $('#button-div6').hide().fadeIn(3000);
  $('#button-div7').hide().fadeIn(3200);
  $('#button-div8').hide().fadeIn(3400);
  $('#button-div9').hide().fadeIn(3600);
  $('#button-div10').hide().fadeIn(3800);
  $('#button-div11').hide().fadeIn(4000);
  $('#button-div12').hide().fadeIn(4200);

  //logo fadeIn
  $('.logo').hide().fadeIn(2000);

  //title fadeIn
  $('.title').hide().fadeIn(2000);
  $('.accordion-title').hide().fadeIn(2000);

  //wrapper fadeIn
  $('.wrapper').hide().fadeIn(2000);

  //accordion
  $(function() {
    $( "#accordion" ).accordion({
      active: false,
      collapsible: true,
      animate: {
        duration: 1000
    }
    });
  });

  //Image shake animation
  $("img").click(function () {
    $(this).effect("shake", { times:3, direction:"up", distance:10 },1000);
  });
});

目前，正如您所看到的，我只是创建变量，将音频元素存储在其中并在点击具有我所设置ID的div时播放它们。什么是逻辑上实现我的目标的最佳方式？我是否能够添加另一个控制一个文件停止的函数和一个不同文件的播放，具体取决于点击的div，或者如果我以不同的方式重写逻辑会更好吗？

任何帮助都非常受欢迎。

1 个答案:

答案 0 :(得分：0)

好吧，避免在代码中重复总是一种改进。您可以通过首先向所有按钮div添加一个公共类来重构一些代码，比如class =＆＃34; button-div＆＃34;，然后用以下内容替换所有on divs click事件处理程序：< / p> 

var divAudiosMap = {"button-div1": reallyObj, "button-div2": trainObj, ...};

$('.button-div').click(function() {
    var divID = $(this).attr('id');
    divAudiosMap[divID].play();
});

使用这样的映射总是有助于避免重复，例如避免多个if语句。

希望这有帮助。

相关问题
最新问题