Question

我正在一个有3个部分的网站（家庭，音乐播放器，关于）

在主页部分，当您单击“立即收听”按钮时，将向下滚动到下一部分并自动开始播放音乐，这非常有效。

当您从第二部分滚动第三部分时，音乐播放器需要停止播放。

我找到了一些代码，可以在滚动时关闭音频。如果滚动下一部分，最好淡出并暂停音频，如果向上滚动，则启动并淡入。第二个脚本区域是导致问题的原因。如果有帮助，这里是该网站的链接。

<header id="mast">
<hgroup>
    <img class="main-logo" src="<?php echo $options['main_logo']; ?>" />
    <a href="#" class="btn s-waypoint" id="listen-btn">Listen Here </a>
</hgroup>

<script>
    document.getElementById('listen-btn').addEventListener('click', function() {
        document.getElementById('music-player').play();
    });
</script>

<script>
$(document).ready(function() {
    var audioElm = $('#music-player').get(0);
    audioElm.play();

    var height = $(document).height() - $(window).height();

    $(window).scroll(function() {
        audioElm.volume = 1 - $(window).scrollTop() / height;
        console.log(audioElm.volume);
    });
});
</script>


<div id="main" class="e-waypoint topo">
    <div class="row">
    <div class="col-md-12" role="main">
        <section>
            <article>
                <audio controls id="music-player">
                    <source src="http://rob.peytongregory.com/wp-content/themes/robertfoster/audio/robert-foster.mp3" type="audio/mpeg">
                </audio>
            </article>     
        </section>
    </div><!-- /#primary.site-content -->
    </div><!-- row -->
</div><!-- /#main -->

单击按钮启动音频，向下滚动停止音频

0 个答案: