音频上滚动 [英] Audio on scroll

问题描述

我做的skrollr插件网站，我几乎与图片做，滚动本身，所以我想现在添加音频，但我似乎无法使音频的启动和停止当我想它。这是我目前正与脚本：

 ＆LT;脚本＆GT;$（窗口）.scroll（函数（）{
    VAR HEIGHT = $（文件）.height（） -  $（窗口）.height（）;
变种涡旋= $（窗口）.scrollTop（）;
      VAR audioElm = $（'＃soundTour'）得到（0）;
    audioElm.play（）;
    audioElm.volume = 1  -  $（窗口）.scrollTop（）/身高;
    的console.log（audioElm.volume）;
}）;
＆LT; / SCRIPT＆GT;
 

这使得作为网站加载我的音乐立即开始和整个网站的跨度淡出，所以当你滚动至底部，它是完全沉默。我试着在脚本中的高度变量搞乱，但无济于事。声音总是结束在很大程度上降低，但仍然在后台播放微弱。有没有一种方法，使之在一定滚动点闭嘴？例如，使音频播放在$（窗口）.scrollTop（）= 500和$（窗口）.scrollTop（）= 3000停止？

解决方案

  VAR播放= FALSE;
VAR audioElm = $（'＃soundTour'）得到（0）;
$（窗口）.scroll（函数（）{
  变种pageScroll = $（窗口）.scrollTop（）;
  如果（打和放大器;！＆安培; pageScroll＆GT; 500安培;＆安培; pageScroll＆LT; 3000）{
    audioElm.play（）;
    打= TRUE;
  }否则如果（pageScroll＆GT; 3000 || pageScroll＆LT; 500）{
    audioElm.pause（）;
    打= FALSE;
  }
}）;
 

您需要的广告在某些条件。
（我外面定义变量性能问题，如jQuery的滚动有着非常糟糕的表现，这变得更糟的电话）。

笔：的http：//$c$cpen.io/vandervals/pen/KpWzVJ

I'm doing a website with the skrollr plugin and I'm almost done with the pictures and scrolling itself, so I'm trying to add the audio now, but I can't seem to make the audio start and stop when I want it to. This is the script I am currently working with:

<script>

$(window).scroll(function() {
    var height = $(document).height() - $(window).height();
var scroll = $(window).scrollTop();  
      var audioElm = $('#soundTour').get(0);
    audioElm.play();
    audioElm.volume = 1 - $(window).scrollTop()/height;
    console.log(audioElm.volume);
});
</script>

This makes my audio start as soon as the website is loaded and fade out across the span of the entire website, so when you've scrolled to the bottom, it's completely silent. I've tried messing with the "height" variable in the script, but to no avail. The sound always ends up heavily lowered, but still faintly playing in the background. Is there a way to make it shut up at a certain scroll point? For example, make the audio play at $(window).scrollTop() = 500 and stop at $(window).scrollTop() = 3000?

解决方案

var playing = false;
var audioElm = $('#soundTour').get(0);
$(window).scroll(function() {
  var pageScroll = $(window).scrollTop();
  if(!playing && pageScroll > 500 && pageScroll < 3000){
    audioElm.play();
    playing = true;
  }else if(pageScroll > 3000 || pageScroll < 500){
    audioElm.pause();
    playing = false;
  }
});

You need to ad some conditions. (I define the variables outside for performance matters, as jQuery scroll has really bad performance, that gets even worse on phones).

Pen: http://codepen.io/vandervals/pen/KpWzVJ

这篇关于音频上滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！