Остановить воспроизведение звука при нажатии другого DIV

Мне было интересно, можете ли вы мне помочь? В настоящее время я создаю небольшую доску для проекта, чтобы помочь мне справиться с 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); 
    }); 
});

В настоящее время, как вы можете видеть, я просто создаю переменные, сохраняя в них аудио-элементы и воспроизводя их при нажатии на div с идентификатором того, что я установил. Что было бы лучшим способом логически достичь моей цели? Могу ли я добавить еще одну функцию, которая контролирует остановку одного файла и воспроизведение другого файла в зависимости от того, на что нажал div или, было бы лучше, если бы я переписал логику по-другому?

Любая помощь очень ценится.

источник

2016-07-26 Charlie Coplestone

Ну, избегая повторения в коде, это всегда является улучшением. Вы можете реорганизовать некоторые из этого кода, первый добавив общий класс для всех кнопок дивы, скажем класс = «кнопка-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

Я вижу! Большое спасибо за это. Это сократило этот раздел кода на долю того, что было. Как я могу остановить остановку одного аудиофайла после нажатия на другой div? –

Остановить воспроизведение звука при нажатии другого DIV

ответ

Смежные вопросы