jquery - 当我使用音频播放器淡入 div 时，音频播放按钮不起作用

Question

我有一个初始页面，上面有两个按钮和两个 display:none 的内容 div。当您单击两个按钮之一时，您选择的内容 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;
}

j查询:

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