2016-07-26 86 views
0

我想知道你是否可以帮助我?我目前正在为一个项目创建一个小型音板,以帮助我熟练掌握jQuery。我希望当前活动的声音文件中的音频停止,并在单击另一个div时重置为开头,而不是播放其关联的音频文件。目前,这是我的网页是如何设置:当另一个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,或者如果我以不同的方式重新编写逻辑,会更好吗?

任何帮助大大赞赏。

回答

0

那么,避免重复代码总是一个改进。你可以先添加一个公共类,所有按钮的div重构了一些这方面的代码,说阶级=“按钮格”,然后更换上div的所有点击事件处理像这样的东西:

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

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

使用这样的地图总是有助于避免重复,例如避免多个if语句。

希望这会有所帮助。

+0

我明白了!为此非常感谢。这将代码的一部分切成了一小部分。一旦另一个div被点击,我将如何去停止一个音频文件? –

相关问题