當我用音頻播放器淡入div時，音頻播放按鈕不起作用

Question

我有一個帶有兩個按鈕的啓動頁和兩個內容div。當你點擊兩個按鈕中的一個時，你選擇的內容div直接放在初始頁面下，內容div淡入。所有這些都有效。但是一個內容分區有一個音頻播放器。當你點擊音頻播放按鈕時，沒有任何反應。如果我拿走display:none風格，音頻按鈕可以工作，但是我的內容div始終可見，我不想要。有誰知道發生了什麼事？它是否需要從dom中刪除div，然後頁面無法「看到」div內的內容？

HTML：

<section class="module parallax parallax-1"> 
     <div class="container1"> 

     </div> 

     <div class="btn_wrapper"><div class="btn" id="btn_pix">Audio Photo Essay</div> <div class="btn" id="btn_text">Story</div></div> 

    </section> 
    <div id="first_container"> 

    </div> 


    <div id="story_pix" class="story_wrapper"> 
     <section id="story-start" class="row medium-9 large-7 columns"> 
      i am the photo story 
      <div class="audioPlayer-container"> 
       <div class="timeline" id="timeline1"> 
        <div class="playhead" id="playhead1"></div> 
       </div> 
       <audio class="audio" id="audio1" src="audio/Audio_IBEW01c.mp3" /> 
      </div> 

      <button id="button1" class="pButton play" ></button> 
      <div class="time_wrapper"> 
       <span id="time_played1" class="time_played">00:00</span>/<br/> 
       <span id="duration1" class="duration">00:45 sec.</span> 
      </div> 
     </section> 
    </div> 


<div style="margin-top: 50px;"></div> 

<div id="story_text" class="story_wrapper" > 
     <section class="row medium-9 large-7 columns"> 
     i am the text story 
     </section> 
</div><!-- end text story --> 

風格：

.btn_wrapper { 
    position:absolute; 
    left: 0px; 
    display:inline-block; 
    top: 85vh; 
} 
.btn { 
    background: white; 
    color: #131514; 
    padding: 5px 10px; 
    width: 180px; 
    height: auto; 
    text-align: center; 
    font-family: 'proxima-nova', sans-serif; 
    cursor: pointer; 
    float: left; 
    margin-left: 10px; 
} 
.btn:hover { 
    background: lightgray; 
} 
section.module p { 
    margin-bottom: 40px; 
    width: 100%; 
    color: #333; 
    font-family: 'Open Sans', serif; 
    font-size: 100%; 
    /*padding: 20px 0;*/ 
} 
section.module p:last-child { 
    margin-bottom: 0; 
} 
section.module.content { 
    /*padding: 40px 0;*/ 
} 
section.module.parallax { 
    height: 1200px; 
    background-position: 50% 50%; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover; 
} 
section.module.parallax-1 { 
    background-image: url("../img/ContentForPhotoStory/20170722rldIBEWPhotoStory001_forweb.jpg"); 
    position: relative; 
} 
.audioPlayer-container { 
    background-size: 85%; 
    height: 70px; 
    width: 100%; 
    position: relative; 
    bottom: -1%; 
    margin-top: -62px; 
} 

audio { 
    width: 100%; 
    background: transparent; 
    background-image: none; 
    box-shadow: none; 
    position: absolute; 
    bottom: 0; 
} 
.play { 
    background: url('../img/headphones-play.png'); 
} 
.pause { 
    background: url('../img/headphones-pause.png'); 
} 

.pButton.play, 
.pButton.pause { 
    background-size: 50% 50%; 
    background-repeat: no-repeat; 
    background-position: center; 
    height: 100px; 
    width: 100px; 
    border: none; 
    float: left; 
    outline: none; 
} 

.timeline { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    margin: 30px 0 0; 
    border-top: 0; 
    background: #656565; 
    height: 10px; 
    border-left: 0px; 
    border-bottom: 0px; 
    overflow: hidden; 
    z-index: 2; 
} 

.playhead { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 50px; 
    height: 10px; 
    z-index:3; 
    border-top: 0; 
    background: lightgray; 
    border-left: 0px; 
    border-bottom: 0px; 
    overflow: hidden; 
} 

.time_wrapper { 
    border-left: 0; 
    margin: 0 0 0 10px; 
    font-family: 'proxima-nova',sans-serif; 
    font-weight: normal; 
    font-size: 14px; 
    line-height: 14px; 
    color: #e8e8e8; 
    text-shadow: 0 0 0 rgba(0,0,0,0); 
    padding: 10px 0 0 0; 
    text-align: left; 
    width: 100px; 
    height: 36px; 
    clear:both; 
    float:left; 
    /* transform: translateX(-50%); 
    -moz-transform: translateX(-50%); 
    -ms-transform: translateX(-50%); 
    -webkit-transform: translateX(-50%);*/ 
    display: inline-block; 
} 

.story_wrapper { 
    display:none; 
} 

的jQuery：

$('.btn, .storypanel').on('tap', function() { 
     var thisID = $(this).attr('id'); 
     var thisChapter = thisID.replace('btn', 'story'); 
     var thisChapter = thisChapter.replace('panel', 'story'); 
     $('#' + thisChapter).remove().insertAfter('#first_container'); 
     $('.story_wrapper').fadeIn(); 
     $('html,body').animate({ 
      scrollTop: $('#'+thisChapter).offset().top 
     }, 1000); 
    }); 

    //audio player functions 
    var playhead; 
    var timeline; 
    var duration; 
    var index; 
    var music; 

    //iterate through all audio files 
    var audios = document.getElementsByClassName("audio"); 


    //play when play button clicked 
    $('.pButton').on('tap', function() { 
     var thisIndex = $(this).attr('id'); 
     thisIndex = parseInt(thisIndex.replace('button', '')); 
     music = $('#audio'+thisIndex)[0]; 
     var pButton = $('#button'+thisIndex); 
     playAudio(music, pButton); 
    }); 

    function playAudio(music,pButton) { 
     if (music.paused) { 
      music.play(); 
      pButton.attr('class',''); 
      pButton.attr('class','pButton pause'); 

     } else { 
      music.pause(); 
      pButton.attr('class',''); 
      pButton.attr('class','pButton play'); 
     } 
     music.addEventListener("timeupdate", timeUpdate, false); 

     var index = $(music).attr('id'); 
     index = index.replace('audio',''); 
     timeline = $('#timeline'+index); 
     var timelineWidth = timeline.width(); 

     //Makes timeline clickable 
     $(timeline).on("tap", function (event) { 
      moveplayhead(event); 
      music.currentTime = duration * clickPercent(event); 
     }); 

     // returns click as decimal (.77) of the total timelineWidth 
     function clickPercent(event) { 
      return (event.clientX - getPosition(timeline))/timelineWidth; 
     } 

     function moveplayhead(event) { 
      var newMargLeft = event.clientX - getPosition(timeline); 

      if ((newMargLeft != 0) && (newMargLeft != timelineWidth)) { 
       playhead.css('margin-left', newMargLeft + "px"); 
      } 
      if (newMargLeft == 0) { 
       playhead.css('margin-left', "0px"); 
      } 
      if (newMargLeft >= timelineWidth) { 
       playhead.css('margin-left', timelineWidth + "px"); 
      } 
     } 

     // Returns elements left position relative to top-left of viewport 
     function getPosition(el) { 
      return el.get(0).getBoundingClientRect().left; 
     } 
    } 

    function timeUpdate() { 
     duration = music.duration; 
     var index = music.id; 
     index = parseInt(index.replace('audio','')); 
     playhead = $("#playhead" + index);   
     var playPercent = 100 * (music.currentTime/duration); 
     playhead.css('margin-left', playPercent + "%"); 
     var time = music.currentTime; 
     var minutes = Math.floor(time/60); 
     if (minutes < 10) { 
      minutes = "0" + minutes.toString(); 
     } 
     var seconds = Math.floor(time); 
     if (seconds >= 60) { 
      seconds = seconds - 60; 
     } 
     if (seconds < 10) { 
      seconds = "0" + seconds.toString(); 
     } 

     $('#time_played'+index).text(minutes + ":" + seconds); 
     if (time == duration) { 
      playhead.css('margin-left', '0px'); 
      $('#time_played'+index).text("00:00"); 
     } 

    } 

有了這個代碼的工作模式在這裏： working model

Answer 1

這是演示直到該部分可見時才播放的音樂。

$(document).ready(function() { 
 
    $('button').click(function() { 
 
    $('.audio-section').css('display', 'block'); 
 
    $('audio')[0].play(); 
 
    }); 
 
});

.audio-section { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button>Show Section</button> 
 

 
<div class="audio-section"> 
 
    <audio src="http://www.vorbis.com/music/Epoq-Lepidoptera.ogg"></audio> 
 
    <div>Here is the section</div> 
 
</div>

Answer 2

這是一個範圍界定問題。關於音頻的所有功能都需要放在處理用戶選擇「音頻照片文章」或「故事」時要執行的操作的代碼中：

$('.btn, .storypanel').on('tap', function() { 
     var thisID = $(this).attr('id'); 
     var thisChapter = thisID.replace('btn', 'story'); 
     var thisChapter = thisChapter.replace('panel', 'story'); 
     $('#' + thisChapter).remove().insertAfter('#first_container'); 
     $('.story_wrapper').fadeIn(); 
     $('html,body').animate({ 
      scrollTop: $('#'+thisChapter).offset().top 
     }, 1000); 

     //audio player functions 
     var playhead; 
     var timeline; 
     var duration; 
     var index; 
     var music; 

     //play when play button clicked 
     $('.pButton').on('tap', function() { 
      var thisIndex = $(this).attr('id'); 
      thisIndex = parseInt(thisIndex.replace('button', '')); 
      music = $('#audio'+thisIndex)[0]; 
      var pButton = $('#button'+thisIndex); 
      playAudio(music, pButton); 
     }); 

     function playAudio(music,pButton) { 
      if (music.paused) { 
       music.play(); 
       pButton.attr('class',''); 
       pButton.attr('class','pButton pause'); 

      } else { 
       music.pause(); 
       pButton.attr('class',''); 
       pButton.attr('class','pButton play'); 
      } 

      music.addEventListener("timeupdate", timeUpdate, false); 

      var index = $(music).attr('id'); 
      index = index.replace('audio',''); 
      timeline = $('#timeline'+index); 
      var timelineWidth = timeline.width(); 

      //Makes timeline clickable 
      $(timeline).on("tap", function (event) { 
       moveplayhead(event); 
       music.currentTime = duration * clickPercent(event); 
      }); 

      // returns click as decimal (.77) of the total timelineWidth 
      function clickPercent(event) { 
       return (event.clientX - getPosition(timeline))/timelineWidth; 
      } 

      function moveplayhead(event) { 
       var newMargLeft = event.clientX - getPosition(timeline); 

       if ((newMargLeft != 0) && (newMargLeft != timelineWidth)) { 
        playhead.css('margin-left', newMargLeft + "px"); 
       } 
       if (newMargLeft == 0) { 
        playhead.css('margin-left', "0px"); 
       } 
       if (newMargLeft >= timelineWidth) { 
        playhead.css('margin-left', timelineWidth + "px"); 
       } 
      } 
      // Returns elements left position relative to top-left of viewport 
      function getPosition(el) { 
       return el.get(0).getBoundingClientRect().left; 
      } 
     } //end playAudio 

     function timeUpdate() { 
      duration = music.duration; 
      var index = music.id; 
      index = parseInt(index.replace('audio','')); 
      playhead = $("#playhead" + index);   
      var playPercent = 100 * (music.currentTime/duration); 
      playhead.css('margin-left', playPercent + "%"); 
      var time = music.currentTime; 
      var minutes = Math.floor(time/60); 
      if (minutes < 10) { 
       minutes = "0" + minutes.toString(); 
      } 
      var seconds = Math.floor(time); 
      if (seconds >= 60) { 
       seconds = seconds - 60; 
      } 
      if (seconds < 10) { 
       seconds = "0" + seconds.toString(); 
      } 

      $('#time_played'+index).text(minutes + ":" + seconds); 
      if (time == duration) { 
       playhead.css('margin-left', '0px'); 
       $('#time_played'+index).text("00:00"); 
      } 
     } //end timeUpdate 
    }); //$('.btn, .storypanel') tap