Question

你们中的一些人可能知道滚动时那些很酷的音频会消失。我试图在“vimeo iframe”上使用该方法。我的目的是让视频的声音逐渐向下滚动，让它再次向上滚动。说实话我是js的超级新手，甚至不是html和css的高级用户，所以如果我要求太多，如果它根本不可能请告诉我，我很抱歉。

这就是我正在使用的:( http://codepen.io/envira/pen/AuGKh的信用）它基本上是一个vimeo剪辑和音频淡入淡出的脚本效果

<html>
<head>
<meta charset="utf-8">
<title>soundtest</title>
<link href="soundcss - Kopie.css" rel="stylesheet" type="text/css">

    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
    var events=["abort","canplay","canplaythrough","durationchange","emptied","ended",
            "error","loadeddata","loadedmetadata","loadstart","pause","play","playing",
            "progress","ratechange","readystatechange","seeked","seeking","stalled",
            "suspend","timeupdate","volumechange","waiting"]

            $(document).ready(function() {
    var audioElm = $('#scrollaudio').get(0);
    audioElm.play();

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

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

.article1 {
    height:800px;
    background:#124A70;
    color: #fff;
    font-size: 2em;
    text-align: center;
    padding: 10px;
}
.article2 {
    height: 900px;
    background: #E04006;
    color: #fff;
    font-size: 2em;
    text-align: center;
    padding: 10px;
}

p {
    font-family: Tahoma, Arial, sans-serif;
    text-shadow: 0px 1px 1px #111;
}

@charset "utf-8";


.vimeoFrame {width:638px; height:358px; overflow:hidden; margin:0 auto;} .vimeoFrame .vimeoXtra {margin-top:-100px;}
.vimeo {display:block; width:638px; height:358px; margin:0 auto;} 
.vimeoXtra {display:block; width:638px; height:558px; margin:0 auto;}

#wrapper{
    height:358px;
    width:638px;
    background-color:
    overflow:hidden;
}
</style>
</head>

<body>
<div class="article1"><p> Scroll Down</p>
<div id=wrapper">
<div class="vimeoFrame"> <iframe class="vimeoXtra" src="https://player.vimeo.com/video/98417189?autoplay=1&loop=1" frameborder="0"></iframe></div>
</div>

    <audio loop id="scrollaudio" src="Material/8_Mile_Battle_Instrumental.mp3"></audio>
</div>
<div class="article2">

</div>

</body>
</html>

我很抱歉，如果我表现得很愚蠢和擦洗，但我希望你能帮助我

最亲切的问候

Answer 1

一切正常 - 您的示例中的mp3文件无法直接下载。试试其他mp3：http://codepen.io/anon/pen/RPMQmq

<div class="article1"><p> Scroll Down</p>
    <audio loop id="scrollaudio" src="http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3"></audio>
</div>

P.S。使用浏览器控制台调试应用程序 - 一个好主意！

iframe音频在滚动时淡出

1 个答案: