当我使用音频播放器淡入 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;
}

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

这里有此代码的工作模型： 工作模型

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