Wenn ich ein div mit einem Audio-Player einblendet, funktioniert die Audio-Wiedergabe-Taste nicht

Question

Ich habe eine Splash-Seite mit zwei Tasten darauf und zwei Content-Divs, die display:none sind. Wenn Sie auf eine der beiden Schaltflächen klicken, wird das Inhalts-DIV Ihrer Wahl direkt unter der Splash-Seite platziert und die Inhalts-DIVs werden eingeblendet. All dies funktioniert. Ein Inhaltsbereich verfügt jedoch über einen Audioplayer. Wenn Sie auf die Schaltfläche für die Audiowiedergabe klicken, passiert nichts. Wenn ich den display:none Stil wegnehme, funktioniert der Audio Button, aber dann sind meine Content Divs immer sichtbar und ich will das nicht. Weiß jemand was los ist bitte? Hat es damit zu tun, ein div aus dem dom zu entfernen und dann kann die Seite das Zeug im div nicht "sehen"?

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 --> 

Stil:

.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"); 
     } 

    } 

Es ist ein Arbeitsmodell dieser Code hier: working model

Answer 1

Hier ist eine Demo der Musik, die nicht abgespielt wird, bis der Abschnitt sichtbar ist.

$(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

Es ist eine Scoping-Ausgabe. Alle Funktionen über das Audio müssen in dem Code sein, der behandelt, was zu tun ist, wenn der Benutzer "Audio Photo Essay" oder "Story" wählt:

$('.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