1. 首頁
  2. 問答
  3. 當另一個DIV被點擊時停止播放音頻

當另一個DIV被點擊時停止播放音頻

2016-07-26 90 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，或者如果我以不同的方式重新編寫邏輯，會更好嗎？

任何幫助大大讚賞。

來源

2016-07-26 Charlie Coplestone

回答

0

那麼，避免重複代碼總是一個改進。你可以先添加一個公共類，所有按鈕的div重構了一些這方面的代碼，說階級=「按鈕格」，然後更換上div的所有點擊事件處理像這樣的東西：

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

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

使用這樣的地圖總是有助於避免重複，例如避免多個if語句。

希望這會有所幫助。

來源

2016-07-26 21:33:54 which1ispink

+0

我明白了！爲此非常感謝。這將代碼的一部分切成了一小部分。一旦另一個div被點擊，我將如何去停止一個音頻文件？ –

相關問題

 相關問題